diff --git a/APPLY_COMPONENT_SHOWCASE_UPDATE.ps1 b/APPLY_COMPONENT_SHOWCASE_UPDATE.ps1
new file mode 100644
index 00000000..57bed6cf
--- /dev/null
+++ b/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
+}
diff --git a/APPLY_OVERLAY_REACTIVITY_FIX.ps1 b/APPLY_OVERLAY_REACTIVITY_FIX.ps1
new file mode 100644
index 00000000..681b8342
--- /dev/null
+++ b/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
diff --git a/PATCH_MANIFEST.json b/PATCH_MANIFEST.json
new file mode 100644
index 00000000..0baeae51
--- /dev/null
+++ b/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"
+  ]
+}
diff --git a/README.md b/README.md
index eee8aea3..bec7c050 100644
--- a/README.md
+++ b/README.md
@@ -1,39 +1,9 @@
-# WRNexusJS
+# WRNexus overlay reactivity and event-log fix
 
-WRNexusJS is an SSR-first, Bun-powered full-stack framework with a dedicated `.wrn` language, server rendering, selective client reactivity, file-based routing, database tooling, realtime communication, UI components, mobile support, and framework-native system packages.
+This patch updates ContextMenu, Drawer, Dropdown, Modal, Popover, and Tooltip.
 
-## WRNexusJS 0.4.0
+The click/hover/right-click handlers were running and public events were emitted, but the visible DOM bindings depended on `isOpen()` helper calls. The updated component markup binds `data-open`, `data-show`, `aria-expanded`, and `aria-describedby` directly to `open || visible` so the reactive runtime subscribes to the exact state values controlling the overlay.
 
-Version 0.4 introduces a package contribution platform. Installed `@wrnexus/*` systems can now register components, page/API/realtime routes, middleware, browser runtimes, static assets, Tailwind scan sources, database migrations, CLI inspection data, and DevToolbar panels.
+The showcase event examples now log an event name plus a safe empty object when an event has no detail. Console output such as `open undefined` is debug output, not a thrown exception.
 
-A package-owned browser runtime is injected only when rendered markup asks for it:
-
-```wrn
-<Captcha type="alphanumeric" action="contact-submit" />
-```
-
-`@wrnexus/captcha` marks its output with `data-wrnexus-runtime="captcha"`. WRNexusJS then serves or bundles the package runtime and adds the correct script to the response. Applications no longer copy `captcha.js`, add script tags, or duplicate `Captcha.wrn` inside `@wrnexus/ui`.
-
-## Development
-
-```bash
-bun install
-bun run verify:0.4
-bun run validate:0.4
-```
-
-The complete validation command runs framework typechecking, linting, package tests, formatting checks, integration tests, example tests/builds, CAPTCHA showcase checks, and managed CAPTCHA service tests.
-
-## Main packages
-
-The monorepo contains 30 framework packages covering the language/compiler, SSR/CSR, routing, server runtime, plugins, database access, queues, PubSub, uploads, validation, security, UI, mobile/native capabilities, AI, tracking, testing, and CAPTCHA.
-
-Read:
-
-- `docs/ARCHITECTURE-0.4.md`
-- `docs/PACKAGE-RUNTIMES-0.4.md`
-- `docs/PACKAGE-UPGRADES-0.4.md`
-- `docs/UPGRADE-0.4.md`
-- `docs/TEST-CHECKLIST-0.4.md`
-- `packages/captcha/README.md`
-- `CHANGELOG-0.4.0.md`
+The red `Permissions policy violation: unload ... chext_driver.js` message comes from a browser extension/content script and is unrelated to WRNexusJS.
diff --git a/README_APPLY.md b/README_APPLY.md
new file mode 100644
index 00000000..9e3dcbeb
--- /dev/null
+++ b/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
+```
diff --git a/VALIDATION.md b/VALIDATION.md
new file mode 100644
index 00000000..34740717
--- /dev/null
+++ b/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
+```
diff --git a/bun.lock b/bun.lock
index 1f667062..f2388f75 100644
--- a/bun.lock
+++ b/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=="],
   }
 }
diff --git a/examples/basic-app/app/components/Modal.wrn b/examples/basic-app/app/components/Modal.wrn
new file mode 100644
index 00000000..e7829160
--- /dev/null
+++ b/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 {
+    }
+}
diff --git a/examples/basic-app/app/layouts/document.wrn b/examples/basic-app/app/layouts/document.wrn
new file mode 100644
index 00000000..3a2d0cdc
--- /dev/null
+++ b/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>
+  }
+}
diff --git a/examples/basic-app/app/pages/modal.wrn b/examples/basic-app/app/pages/modal.wrn
new file mode 100644
index 00000000..cf70249c
--- /dev/null
+++ b/examples/basic-app/app/pages/modal.wrn
@@ -0,0 +1,14 @@
+page ModalPage {
+
+    functions {
+        function onConfirmed() {
+            alert("User Confirmed")
+        }
+    }
+
+    view {
+        <Modal
+            onConfirmed={onConfirmed}
+        />
+    }
+}
diff --git a/examples/basic-app/app/pages/ui.wrn b/examples/basic-app/app/pages/ui.wrn
index d83a3e93..1e3e150e 100644
--- a/examples/basic-app/app/pages/ui.wrn
+++ b/examples/basic-app/app/pages/ui.wrn
@@ -1,85 +1,991 @@
-// Wire UI showcase. Route: /ui. Every element below is a server-rendered
-// component from @wrnexus/ui (auto-discovered), styled by theme tokens.
 page UI {
-  layout = "public"
+  state heroActions = [
+    {
+      label: "Browse components",
+      href: "#component-01",
+      icon: "icon-[lucide--blocks]",
+      variant: "default",
+      color: "primary"
+    },
+    {
+      label: "View metrics",
+      href: "#component-14",
+      icon: "icon-[lucide--chart-no-axes-combined]",
+      variant: "outline",
+      color: "primary"
+    }
+  ]
+
+  state statsItems = [
+    {
+      label: "Composite components",
+      value: "18",
+      description: "Shown separately with a practical use case",
+      icon: "icon-[lucide--blocks]",
+      color: "primary"
+    },
+    {
+      label: "Rendering",
+      value: "SSR",
+      description: "Server-first WRNexusJS component rendering",
+      icon: "icon-[lucide--server]",
+      color: "info"
+    },
+    {
+      label: "Responsive",
+      value: "Yes",
+      description: "Mobile, tablet, and desktop layouts",
+      icon: "icon-[lucide--monitor-smartphone]",
+      color: "success"
+    },
+    {
+      label: "Theme aware",
+      value: "Yes",
+      description: "Supports active theme and accent palettes",
+      icon: "icon-[lucide--palette]",
+      color: "warning"
+    }
+  ]
+
+  state featureItems = [
+    {
+      icon: "icon-[lucide--shield-check]",
+      title: "Citizen services",
+      description: "Expose public safety and citizen-service capabilities.",
+      href: "/citizen-services",
+      actionLabel: "View services"
+    },
+    {
+      icon: "icon-[lucide--map-pinned]",
+      title: "Station directory",
+      description: "Help visitors locate stations and jurisdiction contacts.",
+      href: "/contact/police-station-directory",
+      actionLabel: "Find station"
+    },
+    {
+      icon: "icon-[lucide--radio-tower]",
+      title: "Public updates",
+      description: "Publish official alerts, notices, and verified information.",
+      href: "/media",
+      actionLabel: "View updates"
+    }
+  ]
+
+  state metricItems = [
+    {
+      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 directory entries.",
+      icon: "icon-[lucide--landmark]",
+      trend: "Updated",
+      trendLabel: "today",
+      trendDirection: "neutral",
+      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 breadcrumbs = [
+    {
+      label: "Home",
+      href: "/",
+      value: "home",
+      icon: "icon-[lucide--house]"
+    },
+    {
+      label: "Components",
+      href: "/components",
+      value: "components"
+    },
+    {
+      label: "Page header",
+      value: "page-header",
+      current: true
+    }
+  ]
+
+  state heroVisualItems = [
+    {
+      label: "Reusable components",
+      description: "Compose complete pages using shared UI.",
+      value: "108",
+      icon: "icon-[lucide--blocks]"
+    },
+    {
+      label: "Theme support",
+      description: "Built for light, dark, and accent palettes.",
+      value: "Ready",
+      icon: "icon-[lucide--palette]"
+    },
+    {
+      label: "Responsive layout",
+      description: "Optimized for mobile, tablet, and desktop.",
+      value: "100%",
+      icon: "icon-[lucide--monitor-smartphone]"
+    }
+  ]
 
   seo {
-    title = "Wire UI"
-    description = "Built-in Wire UI components and layout primitives."
+    title = "18 UI Components — Names and Use Cases"
+    description = "All 18 WRNexusJS composite UI components shown individually with their names and practical use cases."
+    canonical = "/ui-18-components"
   }
 
   view {
-    <h1>Wire UI components</h1>
-
-    <div data-component="stack" gap="5">
-      <div data-component="alert" variant="info" title="Server-rendered" message="These components render on the server and ship no JS unless they are interactive."></div>
-
-      <div data-component="card">
-        <div data-component="stack" gap="3">
-          <strong>Buttons</strong>
-          <div data-component="hstack" gap="3">
-            <div data-component="button" variant="primary" label="Primary"></div>
-            <div data-component="button" variant="default" label="Default"></div>
-            <div data-component="button" variant="danger" label="Danger"></div>
-            <div data-component="button" variant="ghost" label="Ghost"></div>
-          </div>
+    <PublicPageShell
+      maxWidth="2xl"
+      fullWidth="true"
+      background="default"
+      overflow="hidden"
+      minHeight="screen"
+    >
+      <div
+        class="mx-auto w-full max-w-7xl px-4 py-10 sm:px-6 lg:px-8"
+      >
+        <div
+          id="component-01"
+          class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-6 shadow-sm sm:p-8"
+        >
+          <p
+            class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
+          >
+            01. PublicPageShell
+          </p>
+          <h1
+            class="mt-3 text-3xl font-bold text-[var(--wire-color-text)] sm:text-4xl"
+          >
+            PublicPageShell
+          </h1>
+          <p
+            class="mt-3 text-base leading-7 text-[var(--wire-color-text-muted)]"
+          >
+            <strong
+              class="text-[var(--wire-color-text)]"
+            >
+              Use case:
+            </strong>
+            Provide the outer structure for a complete public page, including maximum width, page background, overflow handling, before/after slots, and minimum-height behavior.
+          </p>
+          <p
+            class="mt-4 rounded-2xl bg-[var(--wire-color-primary-soft)] px-4 py-3 text-sm text-[var(--wire-color-primary-text)]"
+          >
+            This complete page is rendered inside PublicPageShell.
+          </p>
         </div>
       </div>
 
-      <div data-component="grid" cols="3" gap="4">
-        <div data-component="card">
-          <strong>Badges</strong>
-          <div data-component="hstack" gap="2">
-            <div data-component="badge" variant="success" label="Live"></div>
-            <div data-component="badge" variant="warning" label="Beta"></div>
-            <div data-component="badge" variant="danger" label="Off"></div>
+      <div
+        id="component-02"
+        class="mx-auto w-full px-4 pb-10 sm:px-6 lg:px-8"
+      >
+        <div
+          class="mb-4"
+        >
+          <p
+            class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
+          >
+            02. AnnouncementBar
+          </p>
+          <h2
+            class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
+          >
+            AnnouncementBar
+          </h2>
+          <p
+            class="mt-2 text-[var(--wire-color-text-muted)]"
+          >
+            <strong
+              class="text-[var(--wire-color-text)]"
+            >
+              Use case:</strong> Display an important site-wide update, emergency alert, release notice, or time-sensitive action above the primary page content.
+            </p>
           </div>
+          <AnnouncementBar
+            badge="Public notice"
+            badgeIcon="icon-[lucide--sparkles]"
+            message="All 18 composite components are now available"
+            description="Review each component name and its recommended use case on this page."
+            icon="icon-[lucide--megaphone]"
+            actionLabel="View components"
+            actionHref="#component-03"
+            actionIcon="icon-[lucide--arrow-down]"
+            dismissible="true"
+            width="default"
+            size="default"
+            color="primary"
+            variant="outline"
+          />
         </div>
-        <div data-component="card">
-          <strong>Input</strong>
-          <div data-component="input" placeholder="Type here..."></div>
-        </div>
-        <div data-component="card">
-          <strong>Spinner</strong>
-          <div data-component="spinner"></div>
-        </div>
-      </div>
 
-      <div data-component="divider"></div>
-
-      <div data-component="card">
-        <div data-component="stack" gap="3">
-          <strong>More components</strong>
-          <div data-component="hstack" gap="3">
-            <div data-component="tag" label="default"></div>
-            <div data-component="tag" variant="primary" label="primary"></div>
-            <div data-component="tag" variant="success" label="success"></div>
-            <div data-component="tag" variant="danger" label="danger"></div>
+        <div
+          id="component-03"
+          class="border-y border-[var(--wire-color-border)]"
+        >
+          <div
+            class="mx-auto w-full max-w-7xl px-4 pt-10 sm:px-6 lg:px-8"
+          >
+            <p
+              class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
+            >
+              03. PageHeader
+            </p>
+            <h2
+              class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
+            >
+              PageHeader
+            </h2>
+            <p
+              class="mt-2 text-[var(--wire-color-text-muted)]"
+            >
+              <strong
+                class="text-[var(--wire-color-text)]"
+              >
+                Use case:</strong> Introduce an internal or public page with an eyebrow, title, description, icon, breadcrumbs, and primary or secondary actions.
+              </p>
+            </div>
+            <PageHeader
+              eyebrow="Component showcase"
+              title="Page headers with clear hierarchy"
+              description="Use PageHeader for service pages, directories, legal pages, guides, dashboards, and public information pages."
+              icon="icon-[lucide--panel-top]"
+              showBreadcrumbs="true"
+              breadcrumbs='{breadcrumbs}'
+              primaryLabel="Primary action"
+              primaryHref="#primary"
+              primaryIcon="icon-[lucide--arrow-down]"
+              secondaryLabel="Secondary action"
+              secondaryHref="#secondary"
+              secondaryIcon="icon-[lucide--house]"
+              color="primary"
+              variant="outline"
+              maxWidth="full"
+            />
           </div>
-          <div data-component="select" name="fruit">
-            <option>Apple</option>
-            <option>Banana</option>
-            <option>Cherry</option>
-          </div>
-          <div data-component="switch" name="notify" label="Email notifications"></div>
-          <div data-component="radio" name="plan" value="pro" label="Pro plan"></div>
-          <div data-component="progress" value="65"></div>
-          <div data-component="skeleton" width="60%" height="1.2rem"></div>
-          <p>Hover this <div data-component="tooltip" text="I am a CSS tooltip"><strong>tooltip trigger</strong></div>.</p>
-          <div data-component="table">
-            <thead><tr><th>Name</th><th>Role</th></tr></thead>
-            <tbody><tr><td>Ada</td><td>Admin</td></tr><tr><td>Grace</td><td>Editor</td></tr></tbody>
-          </div>
-        </div>
-      </div>
 
-      <div data-component="divider"></div>
+          <div
+            id="component-04"
+            class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
+          >
+            <div
+              class="mb-6"
+            >
+              <p
+                class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
+              >
+                04. Hero
+              </p>
+              <h2
+                class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
+              >
+                Hero
+              </h2>
+              <p
+                class="mt-2 text-[var(--wire-color-text-muted)]"
+              >
+                <strong
+                  class="text-[var(--wire-color-text)]"
+                >
+                  Use case:</strong> Create the primary marketing or public-information introduction with headline emphasis, supporting content, trust items, actions, and an optional visual area.
+                </p>
+              </div>
+              <Hero
+                eyebrow="Reusable public UI"
+                title="Build polished pages"
+                highlight="with consistent hero layouts"
+                description="Use a structured visual panel on the right side."
+                layout="split"
+                visualPosition="right"
+                fullBleed="true"
+                maxWidth="full"
+                size="lg"
+                color="primary"
+                variant="gradient"
+                visualEyebrow="Component system"
+                visualTitle="Everything needed for public pages"
+                visualDescription="Reusable building blocks with consistent layout, theming, and responsive behavior."
+                visualIcon="icon-[lucide--layout-dashboard]"
+                visualItems='{heroVisualItems}'
+              />
+            </div>
 
-      <div data-component="disclosure" summary="How do I override component styles?">
-        Four ways, least to most control: change a theme token, redefine a
-        <code>.wire-*</code> class in your CSS, pass a <code>class</code> prop, or run
-        <code>wrnexus eject &lt;name&gt;</code> to copy the component into app/components.
-      </div>
-    </div>
-  }
-}
+            <div
+              id="component-05"
+              class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
+            >
+              <div
+                class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-6 sm:p-8"
+              >
+                <p
+                  class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
+                >
+                  05. HeroActions
+                </p>
+                <h2
+                  class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
+                >
+                  HeroActions
+                </h2>
+                <p
+                  class="mt-2 text-[var(--wire-color-text-muted)]"
+                >
+                  <strong
+                    class="text-[var(--wire-color-text)]"
+                  >
+                    Use case:</strong> Group hero buttons with consistent alignment, mobile stacking, orientation, sizing, variants, and responsive behavior.
+                  </p>
+                  <div
+                    class="mt-6"
+                  >
+                    <HeroActions
+                      actions='{heroActions}'
+                      align="left"
+                      orientation="horizontal"
+                      stackOnMobile="true"
+                      fullWidthMobile="true"
+                      size="default"
+                      color="primary"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div
+                id="component-06"
+                class="mx-auto w-full px-4 py-12 sm:px-6 lg:px-8"
+              >
+                <div
+                  class="mb-6"
+                >
+                  <p
+                    class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
+                  >
+                    06. StatsBar
+                  </p>
+                  <h2
+                    class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
+                  >
+                    StatsBar
+                  </h2>
+                  <p
+                    class="mt-2 text-[var(--wire-color-text-muted)]"
+                  >
+                    <strong
+                      class="text-[var(--wire-color-text)]"
+                    >
+                      Use case:</strong> Present a compact row of key facts, service counts, performance indicators, trust signals, or public portal statistics.
+                    </p>
+                  </div>
+                  <StatsBar
+                    items='{statsItems}'
+                    columns="4"
+                    compact="true"
+                    dividers="true"
+                    icons="true"
+                    color="primary"
+                    variant="outline"
+                    maxWidth="xl"
+                  />
+                </div>
+
+                <div
+                  id="component-07"
+                  class="py-4"
+                >
+                  <div
+                    class="mx-auto w-full max-w-7xl px-4 pb-5 sm:px-6 lg:px-8"
+                  >
+                    <p
+                      class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
+                    >
+                      07. Section
+                    </p>
+                    <h2
+                      class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
+                    >
+                      Section
+                    </h2>
+                    <p
+                      class="mt-2 text-[var(--wire-color-text-muted)]"
+                    >
+                      <strong
+                        class="text-[var(--wire-color-text)]"
+                      >
+                        Use case:</strong> Create predictable page sections with shared spacing, width constraints, surfaces, borders, and responsive vertical rhythm.
+                      </p>
+                    </div>
+                    <Section
+                      spacing="lg"
+                      maxWidth="xl"
+                      variant="soft"
+                      borderTop="true"
+                      borderBottom="true"
+                    >
+                      <div
+                        class="p-6 text-center"
+                      >
+                        <p
+                          class="font-semibold text-[var(--wire-color-text)]"
+                        >
+                          Content placed inside a Section component
+                        </p>
+                        <p
+                          class="mt-2 text-sm text-[var(--wire-color-text-muted)]"
+                        >
+                          The component owns spacing, surface, borders, and content width.
+                        </p>
+                      </div>
+                    </Section>
+                  </div>
+
+                  <div
+                    id="component-08"
+                    class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
+                  >
+                    <div
+                      class="mb-6"
+                    >
+                      <p
+                        class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
+                      >
+                        08. SectionHeader
+                      </p>
+                      <h2
+                        class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
+                      >
+                        SectionHeader
+                      </h2>
+                      <p
+                        class="mt-2 text-[var(--wire-color-text-muted)]"
+                      >
+                        <strong
+                          class="text-[var(--wire-color-text)]"
+                        >
+                          Use case:</strong> Add a consistent heading block to content sections, including eyebrow text, description, icon slot, action slot, alignment, and heading level.
+                        </p>
+                      </div>
+                      <SectionHeader
+                        eyebrow="Operational overview"
+                        title="A reusable heading for every section"
+                        description="Use this component before grids, lists, forms, reports, service collections, and related-content blocks."
+                        align="split"
+                        size="default"
+                        color="primary"
+                        headingLevel="2"
+                        maxWidth="3xl"
+                      >
+                        <div
+                          data-slot="icon"
+                        >
+                          <span
+                            class="inline-flex size-11 items-center justify-center rounded-2xl bg-[var(--wire-color-primary-soft)] text-[var(--wire-color-primary)]"
+                          >
+                            <span
+                              class="icon-[lucide--heading-2] size-5"
+                              aria-hidden="true"
+                            >
+                            </span>
+                          </span>
+                        </div>
+                        <div
+                          data-slot="actions"
+                        >
+                          <a
+                            href="#component-09"
+                            class="font-semibold text-[var(--wire-color-primary)]"
+                          >
+                            Next component
+                          </a>
+                        </div>
+                      </SectionHeader>
+                    </div>
+
+                    <div
+                      id="component-09"
+                      class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
+                    >
+                      <div
+                        class="mb-6"
+                      >
+                        <p
+                          class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
+                        >
+                          09. MarketingSectionHeader
+                        </p>
+                        <h2
+                          class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
+                        >
+                          MarketingSectionHeader
+                        </h2>
+                        <p
+                          class="mt-2 text-[var(--wire-color-text-muted)]"
+                        >
+                          <strong
+                            class="text-[var(--wire-color-text)]"
+                          >
+                            Use case:</strong> Introduce marketing, services, solutions, features, benefits, case studies, or product sections with a prominent optional action.
+                          </p>
+                        </div>
+                        <MarketingSectionHeader
+                          eyebrow="Public services"
+                          title="Discover important services in one place"
+                          description="Use this header above service cards, solutions, case studies, product capabilities, and campaign sections."
+                          align="split"
+                          color="primary"
+                          actionLabel="View all services"
+                          actionHref="/citizen-services"
+                          actionIcon="icon-[lucide--arrow-right]"
+                        />
+                      </div>
+
+                      <div
+                        id="component-10"
+                        class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
+                      >
+                        <div
+                          class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-6 sm:p-8"
+                        >
+                          <p
+                            class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
+                          >
+                            10. TextLink
+                          </p>
+                          <h2
+                            class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
+                          >
+                            TextLink
+                          </h2>
+                          <p
+                            class="mt-2 text-[var(--wire-color-text-muted)]"
+                          >
+                            <strong
+                              class="text-[var(--wire-color-text)]"
+                            >
+                              Use case:</strong> Provide a lightweight inline action for “view all,” “learn more,” “open documentation,” or related navigation without using a full button.
+                            </p>
+                            <div
+                              class="mt-6"
+                            >
+                              <TextLink
+                                label="Open component documentation"
+                                href="/components"
+                                icon="icon-[lucide--book-open]"
+                                iconPosition="start"
+                                showArrow="true"
+                                underline="false"
+                                color="primary"
+                                variant="button"
+                              />
+                            </div>
+                          </div>
+                        </div>
+
+                        <div
+                          id="component-11"
+                          class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
+                        >
+                          <div
+                            class="mb-6"
+                          >
+                            <p
+                              class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
+                            >
+                              11. FeatureGrid
+                            </p>
+                            <h2
+                              class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
+                            >
+                              FeatureGrid
+                            </h2>
+                            <p
+                              class="mt-2 text-[var(--wire-color-text-muted)]"
+                            >
+                              <strong
+                                class="text-[var(--wire-color-text)]"
+                              >
+                                Use case:</strong> Arrange services, features, solutions, benefits, or linked capabilities in a responsive equal-height grid.
+                              </p>
+                            </div>
+                            <FeatureGrid
+                              columns="3"
+                              tabletColumns="2"
+                              mobileColumns="1"
+                              gap="lg"
+                              equalHeight="true"
+                              align="stretch"
+                              maxWidth="full"
+                            >
+                              {#each featureItems as item, index}
+                                <FeatureCard
+                                  icon="{item.icon}"
+                                  title="{item.title}"
+                                  description="{item.description}"
+                                  href="{item.href}"
+                                  actionLabel="Explore services"
+                                  badge="Public"
+                                  badgeColor="secondary"
+                                  color="primary"
+                                  variant="default"
+                                  hover="lift"
+                                />
+                              {/each}
+                            </FeatureGrid>
+                          </div>
+
+                          <div
+                            id="component-12"
+                            class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
+                          >
+                            <div
+                              class="mb-6"
+                            >
+                              <p
+                                class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
+                              >
+                                12. FeatureCard
+                              </p>
+                              <h2
+                                class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
+                              >
+                                FeatureCard
+                              </h2>
+                              <p
+                                class="mt-2 text-[var(--wire-color-text-muted)]"
+                              >
+                                <strong
+                                  class="text-[var(--wire-color-text)]"
+                                >
+                                  Use case:</strong> Present a linked feature or service with an icon, title, description, badge, visual variant, hover treatment, and action label.
+                                </p>
+                              </div>
+                              <div
+                                class="max-w-md"
+                              >
+                                <FeatureCard
+                                  icon="icon-[lucide--shield-check]"
+                                  title="Citizen safety services"
+                                  description="Create a clear route for crime reporting, complaints, certificates, and emergency information."
+                                  href="/citizen-services"
+                                  actionLabel="Explore services"
+                                  badge="Public"
+                                  badgeColor="primary"
+                                  color="primary"
+                                  variant="default"
+                                  hover="lift"
+                                />
+                              </div>
+                            </div>
+
+                            <div
+                              id="component-13"
+                              class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
+                            >
+                              <div
+                                class="mb-6"
+                              >
+                                <p
+                                  class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
+                                >
+                                  13. FeatureIconCard
+                                </p>
+                                <h2
+                                  class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
+                                >
+                                  FeatureIconCard
+                                </h2>
+                                <p
+                                  class="mt-2 text-[var(--wire-color-text-muted)]"
+                                >
+                                  <strong
+                                    class="text-[var(--wire-color-text)]"
+                                  >
+                                    Use case:</strong> Highlight a capability where the icon treatment should carry stronger visual importance than a standard feature card.
+                                  </p>
+                                </div>
+                                <div
+                                  class="max-w-md"
+                                >
+                                  <FeatureIconCard
+                                    icon="icon-[lucide--file-search]"
+                                    iconSize="lg"
+                                    iconVariant="soft"
+                                    title="Track public requests"
+                                    description="Allow citizens to follow complaints, certificates, and verification requests through a clear status journey."
+                                    href="/citizen-services/track-complaint"
+                                    actionLabel="Track request"
+                                    badge="Fast"
+                                    color="primary"
+                                    variant="raised"
+                                  />
+                                </div>
+                              </div>
+
+                              <div
+                                id="component-14"
+                                class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
+                              >
+                                <div
+                                  class="mb-6"
+                                >
+                                  <p
+                                    class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
+                                  >
+                                    14. MetricGrid
+                                  </p>
+                                  <h2
+                                    class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
+                                  >
+                                    MetricGrid
+                                  </h2>
+                                  <p
+                                    class="mt-2 text-[var(--wire-color-text-muted)]"
+                                  >
+                                    <strong
+                                      class="text-[var(--wire-color-text)]"
+                                    >
+                                      Use case:</strong> Arrange operational values, KPIs, public statistics, usage summaries, or service indicators in a responsive grid.
+                                    </p>
+                                  </div>
+                                  <MetricGrid
+                                    items='{metricItems}'
+                                    columns="3"
+                                    tabletColumns="2"
+                                    mobileColumns="1"
+                                    gap="md"
+                                    equalHeight="true"
+                                    dividers="false"
+                                    color="primary"
+                                    variant="default"
+                                  />
+                                </div>
+
+                                <div
+                                  id="component-15"
+                                  class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
+                                >
+                                  <div
+                                    class="mb-6"
+                                  >
+                                    <p
+                                      class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
+                                    >
+                                      15. MetricCard
+                                    </p>
+                                    <h2
+                                      class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
+                                    >
+                                      MetricCard
+                                    </h2>
+                                    <p
+                                      class="mt-2 text-[var(--wire-color-text-muted)]"
+                                    >
+                                      <strong
+                                        class="text-[var(--wire-color-text)]"
+                                      >
+                                        Use case:</strong> Display one metric with a label, value, suffix, description, icon, trend, status direction, and optional action.
+                                      </p>
+                                    </div>
+                                    <div
+                                      class="max-w-md"
+                                    >
+                                      <MetricCard
+                                        label="Service availability"
+                                        value="99.9"
+                                        suffix="%"
+                                        description="Target availability for essential public services."
+                                        icon="icon-[lucide--activity]"
+                                        trend="Stable"
+                                        trendLabel="last 30 days"
+                                        trendDirection="positive"
+                                        href="/status"
+                                        actionLabel="Open status"
+                                        color="success"
+                                        variant="default"
+                                      />
+                                    </div>
+                                  </div>
+
+                                  <div
+                                    id="component-16"
+                                    class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
+                                  >
+                                    <div
+                                      class="mb-6"
+                                    >
+                                      <p
+                                        class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
+                                      >
+                                        16. SplitHero
+                                      </p>
+                                      <h2
+                                        class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
+                                      >
+                                        SplitHero
+                                      </h2>
+                                      <p
+                                        class="mt-2 text-[var(--wire-color-text-muted)]"
+                                      >
+                                        <strong
+                                          class="text-[var(--wire-color-text)]"
+                                        >
+                                          Use case:</strong> Build a two-column introduction that balances descriptive content and a visual, screenshot, feature panel, image, map, or media block.
+                                        </p>
+                                      </div>
+                                      <SplitHero
+                                        eyebrow="Balanced layout"
+                                        title="Combine detailed content"
+                                        highlight="with a strong visual panel"
+                                        description="Use SplitHero for product explanations, department introductions, public campaigns, service walkthroughs, and feature storytelling."
+                                        primaryLabel="View public services"
+                                        primaryHref="/citizen-services"
+                                        primaryIcon="icon-[lucide--arrow-right]"
+                                        secondaryLabel="Contact department"
+                                        secondaryHref="/contact"
+                                        secondaryIcon="icon-[lucide--phone]"
+                                        visualPosition="right"
+                                        ratio="balanced"
+                                        color="primary"
+                                        variant="default"
+                                      >
+                                        <div
+                                          data-slot="visual"
+                                        >
+                                          <div
+                                            class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-8 shadow-lg"
+                                          >
+                                            <span
+                                              class="icon-[lucide--layout-dashboard] size-14 text-[var(--wire-color-primary)]"
+                                              aria-hidden="true"
+                                            >
+                                            </span>
+                                            <h3
+                                              class="mt-5 text-xl font-bold text-[var(--wire-color-text)]"
+                                            >
+                                              Visual content area
+                                            </h3>
+                                            <p
+                                              class="mt-2 text-[var(--wire-color-text-muted)]"
+                                            >
+                                              Add a product screenshot, service diagram, dashboard, image, or interactive preview.
+                                            </p>
+                                          </div>
+                                        </div>
+                                      </SplitHero>
+                                    </div>
+
+                                    <div
+                                      id="component-17"
+                                      class="py-12"
+                                    >
+                                      <div
+                                        class="mx-auto w-full max-w-7xl px-4 pb-6 sm:px-6 lg:px-8"
+                                      >
+                                        <p
+                                          class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
+                                        >
+                                          17. CTASection
+                                        </p>
+                                        <h2
+                                          class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
+                                        >
+                                          CTASection
+                                        </h2>
+                                        <p
+                                          class="mt-2 text-[var(--wire-color-text-muted)]"
+                                        >
+                                          <strong
+                                            class="text-[var(--wire-color-text)]"
+                                          >
+                                            Use case:</strong> Close a page or major section with a strong conversion action such as registration, sign-in, contact, application, service request, or documentation access.
+                                          </p>
+                                        </div>
+                                        <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 consistent presentation."
+                                          icon="icon-[lucide--rocket]"
+                                          align="center"
+                                          size="lg"
+                                          color="primary"
+                                          variant="gradient"
+                                          primaryLabel="Use these components"
+                                          primaryHref="/components"
+                                          primaryIcon="icon-[lucide--blocks]"
+                                          secondaryLabel="Back to home"
+                                          secondaryHref="/"
+                                          secondaryIcon="icon-[lucide--house]"
+                                          maxWidth="xl"
+                                        />
+                                      </div>
+
+                                      <div
+                                        id="component-18"
+                                        class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
+                                      >
+                                        <div
+                                          class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-6 sm:p-8"
+                                        >
+                                          <p
+                                            class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
+                                          >
+                                            18. BackToTop
+                                          </p>
+                                          <h2
+                                            class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
+                                          >
+                                            BackToTop
+                                          </h2>
+                                          <p
+                                            class="mt-2 text-[var(--wire-color-text-muted)]"
+                                          >
+                                            <strong
+                                              class="text-[var(--wire-color-text)]"
+                                            >
+                                              Use case:</strong> Provide a floating control on long pages that returns visitors to the top and can optionally show scroll progress.
+                                            </p>
+                                            <p
+                                              class="mt-4 text-sm text-[var(--wire-color-text-muted)]"
+                                            >
+                                              Scroll down the page until the floating button becomes visible.
+                                            </p>
+                                          </div>
+                                        </div>
+
+                                        <div
+                                          data-slot="after"
+                                        >
+                                          <BackToTop
+                                            threshold="400"
+                                            label="Back to top"
+                                            ariaLabel="Scroll back to the top of the 18 component showcase"
+                                            icon="icon-[lucide--arrow-up]"
+                                            position="right"
+                                            offset="md"
+                                            behavior="smooth"
+                                            showProgress="true"
+                                            color="primary"
+                                            variant="solid"
+                                          />
+                                        </div>
+                                      </PublicPageShell>
+                                    }
+                                  }
diff --git a/examples/basic-app/app/styles/global.css b/examples/basic-app/app/styles/global.css
index cb0c88e0..21912387 100644
--- a/examples/basic-app/app/styles/global.css
+++ b/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 {
diff --git a/examples/basic-app/package.json b/examples/basic-app/package.json
index 55ea5544..03c8c5f0 100644
--- a/examples/basic-app/package.json
+++ b/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",
diff --git a/examples/component-showcase/README.md b/examples/component-showcase/README.md
index 841d0264..8279af3f 100644
--- a/examples/component-showcase/README.md
+++ b/examples/component-showcase/README.md
@@ -1,23 +1,71 @@
 # WRNexus UI component showcase
 
-This example renders every component from `@wrnexus/ui` with representative,
-prop-driven data. Pages are generated from `packages/ui/component-reference.json`
-so coverage stays synchronized with the packaged component catalog.
+The showcase is generated from `packages/ui/component-reference.json`. It stays
+synchronized with the current component source rather than maintaining a second
+hand-written catalog.
 
 ```bash
 bun run --cwd examples/component-showcase dev
 ```
 
-Open `http://localhost:3000`. The index links to the category catalog, and every
-component card opens a dedicated documentation page with three live use cases,
-usage examples, its prop API, events, slots, and related navigation.
+Open `http://localhost:3000`.
 
-After changing UI component props, regenerate and verify the catalog:
+## Detail-page coverage
+
+Every current UI component receives a dedicated detail page with:
+
+- an interactive server-rendered playground for every declared prop
+- typed boolean, number, array, and object controls
+- public component-tag syntax with single-quoted dynamic WRN expressions
+- component-specific production use cases when a profile exists
+- responsive fallback examples for every remaining component
+- copyable `.wrn` source beside every live preview
+- complete props, slots, and explicitly declared public events
+- live `event.detail` output for interactive components
+- previous and next component navigation
+
+The specialized profiles for new and recently repaired components live in:
+
+```text
+scripts/showcase-profiles.mjs
+```
+
+Update that file to add product-quality examples or public enum options. Do not
+infer allowed prop values from implementation comparisons; unrestricted values
+such as icon classes, labels, IDs, and URLs must remain free-form inputs.
+
+## Generated files
+
+The generator creates:
+
+```text
+app/layouts/showcase.wrn
+app/layouts/document.wrn
+app/pages/*.wrn
+app/pages/components/*.wrn
+showcase-manifest.json
+```
+
+`showcase-manifest.json` records component, category, demo, prop, slot, and event
+coverage and is used by the test suite. Do not hand-edit generated pages.
+
+## Validation
+
+After changing UI components, metadata, profiles, the playground, or showcase
+styles, run:
 
 ```bash
+bun run scripts/generate-ui-component-reference.mjs
 bun run --cwd examples/component-showcase generate
+bun run --cwd examples/component-showcase test
+bun run --cwd examples/component-showcase build
+```
+
+The complete local check is:
+
+```bash
 bun run --cwd examples/component-showcase check
 ```
 
-Files under `app/pages/` are generated. Customize the generator or stylesheet
-instead of editing those pages directly.
+Review representative component pages at mobile, tablet, and desktop widths and
+in light, dark, keyboard-only, and reduced-motion modes before publishing.
diff --git a/examples/component-showcase/app/layouts/showcase.wrn b/examples/component-showcase/app/layouts/showcase.wrn
index 8bddc782..1d2ed77f 100644
--- a/examples/component-showcase/app/layouts/showcase.wrn
+++ b/examples/component-showcase/app/layouts/showcase.wrn
@@ -9,7 +9,7 @@ layout Showcase {
           <label class="docs-search"><span class="icon-[lucide--search] size-4" aria-hidden="true"></span><input type="search" placeholder="Search documentation..." data-docs-search /><kbd>⌘ K</kbd></label>
         </div>
         <div class="showcase-header-end">
-          <nav aria-label="Primary navigation" class="showcase-nav"><a href="/docs">Docs</a><a href="/blocks">Blocks</a><a href="/templates">Templates</a></nav>
+          <nav aria-label="Primary navigation" class="showcase-nav"><a href="/docs">Docs</a><a href="/block-library">Blocks</a><a href="/templates">Templates</a></nav>
           <button type="button" class="showcase-theme" data-design-panel-toggle aria-label="Customize design"><span class="icon-[lucide--palette] size-5" aria-hidden="true"></span></button>
         </div>
       </header>
@@ -30,39 +30,47 @@ layout Showcase {
             
         <section class="docs-directory-group">
           <a class="docs-directory-heading" href="/advanced-forms">Advanced Forms</a>
-          <div><a data-docs-component-link href="/components/advanced-select"><span data-docs-component-name>Advanced Select</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/combo-box"><span data-docs-component-name>Combo Box</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/copy-markup"><span data-docs-component-name>Copy Markup</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/input-number"><span data-docs-component-name>Input Number</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/pin-input"><span data-docs-component-name>Pin Input</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/search-box"><span data-docs-component-name>Search Box</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/strong-password"><span data-docs-component-name>Strong Password</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/toggle-count"><span data-docs-component-name>Toggle Count</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/toggle-password"><span data-docs-component-name>Toggle Password</span><small data-component-status="complete">Complete</small></a></div>
+          <div><a data-docs-component-link href="/components/advanced-select">Advanced Select</a><a data-docs-component-link href="/components/combo-box">Combo Box</a><a data-docs-component-link href="/components/copy-markup">Copy Markup</a><a data-docs-component-link href="/components/input-number">Input Number</a><a data-docs-component-link href="/components/pin-input">Pin Input</a><a data-docs-component-link href="/components/strong-password">Strong Password</a><a data-docs-component-link href="/components/toggle-count">Toggle Count</a><a data-docs-component-link href="/components/toggle-password">Toggle Password</a></div>
         </section>
         <section class="docs-directory-group">
           <a class="docs-directory-heading" href="/base">Base</a>
-          <div><a data-docs-component-link href="/components/accordion"><span data-docs-component-name>Accordion</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/alert"><span data-docs-component-name>Alert</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/avatar"><span data-docs-component-name>Avatar</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/avatar-group"><span data-docs-component-name>Avatar Group</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/badge"><span data-docs-component-name>Badge</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/blockquote"><span data-docs-component-name>Blockquote</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/button"><span data-docs-component-name>Button</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/button-group"><span data-docs-component-name>Button Group</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/card"><span data-docs-component-name>Card</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/carousel"><span data-docs-component-name>Carousel</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/chat-bubble"><span data-docs-component-name>Chat Bubble</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/collapse"><span data-docs-component-name>Collapse</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/date-picker"><span data-docs-component-name>Date Picker</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/device-frame"><span data-docs-component-name>Device Frame</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/file-upload-progress"><span data-docs-component-name>File Upload Progress</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/hero-actions"><span data-docs-component-name>Hero Actions</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/legend-indicator"><span data-docs-component-name>Legend Indicator</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/list"><span data-docs-component-name>List</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/list-group"><span data-docs-component-name>List Group</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/marquee"><span data-docs-component-name>Marquee</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/progress"><span data-docs-component-name>Progress</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/rating"><span data-docs-component-name>Rating</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/skeleton"><span data-docs-component-name>Skeleton</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/spinner"><span data-docs-component-name>Spinner</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/styled-icon"><span data-docs-component-name>Styled Icon</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/timeline"><span data-docs-component-name>Timeline</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/toast"><span data-docs-component-name>Toast</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/tree-view"><span data-docs-component-name>Tree View</span><small data-component-status="pending">Pending</small></a></div>
+          <div><a data-docs-component-link href="/components/accordion">Accordion</a><a data-docs-component-link href="/components/alert">Alert</a><a data-docs-component-link href="/components/avatar">Avatar</a><a data-docs-component-link href="/components/avatar-group">Avatar Group</a><a data-docs-component-link href="/components/badge">Badge</a><a data-docs-component-link href="/components/blockquote">Blockquote</a><a data-docs-component-link href="/components/button">Button</a><a data-docs-component-link href="/components/button-group">Button Group</a><a data-docs-component-link href="/components/card">Card</a><a data-docs-component-link href="/components/carousel">Carousel</a><a data-docs-component-link href="/components/chat-bubble">Chat Bubble</a><a data-docs-component-link href="/components/collapse">Collapse</a><a data-docs-component-link href="/components/date-picker">Date Picker</a><a data-docs-component-link href="/components/device-frame">Device Frame</a><a data-docs-component-link href="/components/file-upload-progress">File Upload Progress</a><a data-docs-component-link href="/components/legend-indicator">Legend Indicator</a><a data-docs-component-link href="/components/list">List</a><a data-docs-component-link href="/components/list-group">List Group</a><a data-docs-component-link href="/components/marquee">Marquee</a><a data-docs-component-link href="/components/progress">Progress</a><a data-docs-component-link href="/components/rating">Rating</a><a data-docs-component-link href="/components/skeleton">Skeleton</a><a data-docs-component-link href="/components/spinner">Spinner</a><a data-docs-component-link href="/components/styled-icon">Styled Icon</a><a data-docs-component-link href="/components/timeline">Timeline</a><a data-docs-component-link href="/components/toast">Toast</a><a data-docs-component-link href="/components/tree-view">Tree View</a></div>
         </section>
         <section class="docs-directory-group">
-          <a class="docs-directory-heading" href="/blocks">Blocks</a>
-          <div><a data-docs-component-link href="/components/announcement-bar"><span data-docs-component-name>Announcement Bar</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/ctasection"><span data-docs-component-name>CTASection</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/feature-card"><span data-docs-component-name>Feature Card</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/feature-icon-card"><span data-docs-component-name>Feature Icon Card</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/hero"><span data-docs-component-name>Hero</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/marketing-section-header"><span data-docs-component-name>Marketing Section Header</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/metric-card"><span data-docs-component-name>Metric Card</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/page-header"><span data-docs-component-name>Page Header</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/portal-dashboard"><span data-docs-component-name>Portal Dashboard</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/split-hero"><span data-docs-component-name>Split Hero</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/stats-bar"><span data-docs-component-name>Stats Bar</span><small data-component-status="pending">Pending</small></a></div>
+          <a class="docs-directory-heading" href="/core">Core</a>
+          <div><a data-docs-component-link href="/components/auth-form">Auth Form</a><a data-docs-component-link href="/components/auth-split-layout">Auth Split Layout</a><a data-docs-component-link href="/components/portal-dashboard">Portal Dashboard</a><a data-docs-component-link href="/components/preference-switcher">Preference Switcher</a></div>
+        </section>
+        <section class="docs-directory-group">
+          <a class="docs-directory-heading" href="/data">Data</a>
+          <div><a data-docs-component-link href="/components/metric-card">Metric Card</a><a data-docs-component-link href="/components/metric-grid">Metric Grid</a><a data-docs-component-link href="/components/stats-bar">Stats Bar</a></div>
         </section>
         <section class="docs-directory-group">
           <a class="docs-directory-heading" href="/forms">Forms</a>
-          <div><a data-docs-component-link href="/components/auth-form"><span data-docs-component-name>Auth Form</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/checkbox"><span data-docs-component-name>Checkbox</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/color-picker"><span data-docs-component-name>Color Picker</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/file-input"><span data-docs-component-name>File Input</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/input"><span data-docs-component-name>Input</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/input-group"><span data-docs-component-name>Input Group</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/radio"><span data-docs-component-name>Radio</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/range-slider"><span data-docs-component-name>Range Slider</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/select"><span data-docs-component-name>Select</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/switch"><span data-docs-component-name>Switch</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/textarea"><span data-docs-component-name>Textarea</span><small data-component-status="complete">Complete</small></a><a data-docs-component-link href="/components/time-picker"><span data-docs-component-name>Time Picker</span><small data-component-status="complete">Complete</small></a></div>
+          <div><a data-docs-component-link href="/components/checkbox">Checkbox</a><a data-docs-component-link href="/components/color-picker">Color Picker</a><a data-docs-component-link href="/components/file-input">File Input</a><a data-docs-component-link href="/components/input">Input</a><a data-docs-component-link href="/components/input-group">Input Group</a><a data-docs-component-link href="/components/radio">Radio</a><a data-docs-component-link href="/components/range-slider">Range Slider</a><a data-docs-component-link href="/components/search-box">Search Box</a><a data-docs-component-link href="/components/select">Select</a><a data-docs-component-link href="/components/switch">Switch</a><a data-docs-component-link href="/components/textarea">Textarea</a><a data-docs-component-link href="/components/time-picker">Time Picker</a></div>
         </section>
         <section class="docs-directory-group">
           <a class="docs-directory-heading" href="/integrations">Integrations</a>
-          <div><a data-docs-component-link href="/components/advanced-date-picker"><span data-docs-component-name>Advanced Date Picker</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/advanced-range-slider"><span data-docs-component-name>Advanced Range Slider</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/chart"><span data-docs-component-name>Chart</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/clipboard"><span data-docs-component-name>Clipboard</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/confetti"><span data-docs-component-name>Confetti</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/data-map"><span data-docs-component-name>Data Map</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/data-table"><span data-docs-component-name>Data Table</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/drag-and-drop"><span data-docs-component-name>Drag And Drop</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/file-upload"><span data-docs-component-name>File Upload</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/map"><span data-docs-component-name>Map</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/toast-notifications"><span data-docs-component-name>Toast Notifications</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/wysiwyg-editor"><span data-docs-component-name>Wysiwyg Editor</span><small data-component-status="pending">Pending</small></a></div>
+          <div><a data-docs-component-link href="/components/advanced-date-picker">Advanced Date Picker</a><a data-docs-component-link href="/components/advanced-range-slider">Advanced Range Slider</a><a data-docs-component-link href="/components/chart">Chart</a><a data-docs-component-link href="/components/clipboard">Clipboard</a><a data-docs-component-link href="/components/confetti">Confetti</a><a data-docs-component-link href="/components/data-map">Data Map</a><a data-docs-component-link href="/components/data-table">Data Table</a><a data-docs-component-link href="/components/drag-and-drop">Drag And Drop</a><a data-docs-component-link href="/components/file-upload">File Upload</a><a data-docs-component-link href="/components/map">Map</a><a data-docs-component-link href="/components/toast-notifications">Toast Notifications</a><a data-docs-component-link href="/components/wysiwyg-editor">Wysiwyg Editor</a></div>
         </section>
         <section class="docs-directory-group">
           <a class="docs-directory-heading" href="/layout">Layout</a>
-          <div><a data-docs-component-link href="/components/auth-split-layout"><span data-docs-component-name>Auth Split Layout</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/columns"><span data-docs-component-name>Columns</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/container"><span data-docs-component-name>Container</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/custom-scrollbar"><span data-docs-component-name>Custom Scrollbar</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/divider"><span data-docs-component-name>Divider</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/feature-grid"><span data-docs-component-name>Feature Grid</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/grid"><span data-docs-component-name>Grid</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/image"><span data-docs-component-name>Image</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/kbd"><span data-docs-component-name>Kbd</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/layout-splitter"><span data-docs-component-name>Layout Splitter</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/link"><span data-docs-component-name>Link</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/metric-grid"><span data-docs-component-name>Metric Grid</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/public-page-shell"><span data-docs-component-name>Public Page Shell</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/section"><span data-docs-component-name>Section</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/section-header"><span data-docs-component-name>Section Header</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/text-link"><span data-docs-component-name>Text Link</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/typography"><span data-docs-component-name>Typography</span><small data-component-status="pending">Pending</small></a></div>
+          <div><a data-docs-component-link href="/components/columns">Columns</a><a data-docs-component-link href="/components/container">Container</a><a data-docs-component-link href="/components/custom-scrollbar">Custom Scrollbar</a><a data-docs-component-link href="/components/divider">Divider</a><a data-docs-component-link href="/components/feature-grid">Feature Grid</a><a data-docs-component-link href="/components/footer">Footer</a><a data-docs-component-link href="/components/grid">Grid</a><a data-docs-component-link href="/components/image">Image</a><a data-docs-component-link href="/components/kbd">Kbd</a><a data-docs-component-link href="/components/layout-splitter">Layout Splitter</a><a data-docs-component-link href="/components/link">Link</a><a data-docs-component-link href="/components/public-page-shell">Public Page Shell</a><a data-docs-component-link href="/components/section">Section</a><a data-docs-component-link href="/components/section-header">Section Header</a><a data-docs-component-link href="/components/typography">Typography</a></div>
+        </section>
+        <section class="docs-directory-group">
+          <a class="docs-directory-heading" href="/marketing">Marketing</a>
+          <div><a data-docs-component-link href="/components/announcement-bar">Announcement Bar</a><a data-docs-component-link href="/components/ctasection">CTASection</a><a data-docs-component-link href="/components/feature-card">Feature Card</a><a data-docs-component-link href="/components/feature-icon-card">Feature Icon Card</a><a data-docs-component-link href="/components/hero">Hero</a><a data-docs-component-link href="/components/hero-actions">Hero Actions</a><a data-docs-component-link href="/components/marketing-section-header">Marketing Section Header</a><a data-docs-component-link href="/components/page-header">Page Header</a><a data-docs-component-link href="/components/split-hero">Split Hero</a><a data-docs-component-link href="/components/text-link">Text Link</a></div>
         </section>
         <section class="docs-directory-group">
           <a class="docs-directory-heading" href="/navigation">Navigation</a>
-          <div><a data-docs-component-link href="/components/back-to-top"><span data-docs-component-name>Back To Top</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/breadcrumb"><span data-docs-component-name>Breadcrumb</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/footer"><span data-docs-component-name>Footer</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/mega-menu"><span data-docs-component-name>Mega Menu</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/nav"><span data-docs-component-name>Nav</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/navbar"><span data-docs-component-name>Navbar</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/pagination"><span data-docs-component-name>Pagination</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/preference-switcher"><span data-docs-component-name>Preference Switcher</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/scrollspy"><span data-docs-component-name>Scrollspy</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/sidebar"><span data-docs-component-name>Sidebar</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/stepper"><span data-docs-component-name>Stepper</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/tabs"><span data-docs-component-name>Tabs</span><small data-component-status="pending">Pending</small></a></div>
+          <div><a data-docs-component-link href="/components/back-to-top">Back To Top</a><a data-docs-component-link href="/components/breadcrumb">Breadcrumb</a><a data-docs-component-link href="/components/mega-menu">Mega Menu</a><a data-docs-component-link href="/components/nav">Nav</a><a data-docs-component-link href="/components/navbar">Navbar</a><a data-docs-component-link href="/components/pagination">Pagination</a><a data-docs-component-link href="/components/scrollspy">Scrollspy</a><a data-docs-component-link href="/components/sidebar">Sidebar</a><a data-docs-component-link href="/components/stepper">Stepper</a><a data-docs-component-link href="/components/tabs">Tabs</a></div>
         </section>
         <section class="docs-directory-group">
           <a class="docs-directory-heading" href="/overlays">Overlays</a>
-          <div><a data-docs-component-link href="/components/context-menu"><span data-docs-component-name>Context Menu</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/drawer"><span data-docs-component-name>Drawer</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/dropdown"><span data-docs-component-name>Dropdown</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/modal"><span data-docs-component-name>Modal</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/popover"><span data-docs-component-name>Popover</span><small data-component-status="pending">Pending</small></a><a data-docs-component-link href="/components/tooltip"><span data-docs-component-name>Tooltip</span><small data-component-status="pending">Pending</small></a></div>
+          <div><a data-docs-component-link href="/components/context-menu">Context Menu</a><a data-docs-component-link href="/components/drawer">Drawer</a><a data-docs-component-link href="/components/dropdown">Dropdown</a><a data-docs-component-link href="/components/modal">Modal</a><a data-docs-component-link href="/components/popover">Popover</a><a data-docs-component-link href="/components/tooltip">Tooltip</a></div>
         </section>
         <section class="docs-directory-group">
           <a class="docs-directory-heading" href="/tables">Tables</a>
-          <div><a data-docs-component-link href="/components/table"><span data-docs-component-name>Table</span><small data-component-status="pending">Pending</small></a></div>
+          <div><a data-docs-component-link href="/components/table">Table</a></div>
         </section>
           </nav>
           <p class="docs-directory-empty" data-docs-empty>No components found.</p>
diff --git a/examples/component-showcase/app/pages/accessibility.wrn b/examples/component-showcase/app/pages/accessibility.wrn
index de126e90..da39f85b 100644
--- a/examples/component-showcase/app/pages/accessibility.wrn
+++ b/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>
   }
 }
diff --git a/examples/component-showcase/app/pages/advanced-forms.wrn b/examples/component-showcase/app/pages/advanced-forms.wrn
index 6fc8eae7..b3a091e0 100644
--- a/examples/component-showcase/app/pages/advanced-forms.wrn
+++ b/examples/component-showcase/app/pages/advanced-forms.wrn
@@ -3,100 +3,90 @@ page AdvancedFormsShowcase {
   layout = "showcase"
   seo {
     title = "Advanced Forms components"
-    description = "9 advanced-forms components from @wrnexus/ui."
+    description = "8 advanced-forms components from @wrnexus/ui."
   }
   view {
     <header class="showcase-hero showcase-hero--category">
       <span class="showcase-eyebrow">Component category</span>
       <h1 class="showcase-title">Advanced Forms</h1>
-      <p class="showcase-description">9 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
-      <div class="category-meta"><span>9 components</span><span>Multiple use cases</span><span>116 live configurations</span></div>
+      <p class="showcase-description">8 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
+      <div class="category-meta"><span>8 components</span><span>Multiple use cases</span><span>112 live configurations</span></div>
     </header>
     <div class="catalog-grid">
-      <article class="catalog-card">
+      <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><div data-component="AdvancedSelect" size="default" label="Default advanced select" name="advanced-select-1" value="design" values="[]" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;disabled&quot;:false}]" groups="[]" placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false"></div></div>
+          <div class="catalog-card-stage"><AdvancedSelect size="default" label="Default advanced select" name="advanced-select-1" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Advanced Forms</span><h2>Advanced Select</h2><p>Theme-aware, responsive advanced select component.</p></div>
           <div class="catalog-card-footer"><span>51 props · 0 slots</span><a href="/components/advanced-select">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
-      <article class="catalog-card">
+      <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><div data-component="ComboBox" label="Default autocomplete" name="combobox-1" value="" options="[{&quot;value&quot;:&quot;design&quot;,&quot;label&quot;:&quot;Design&quot;,&quot;description&quot;:&quot;Product and visual design&quot;,&quot;icon&quot;:&quot;icon-[lucide--palette]&quot;,&quot;color&quot;:&quot;#8b5cf6&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%238b5cf6&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3ED%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;engineering&quot;,&quot;label&quot;:&quot;Engineering&quot;,&quot;description&quot;:&quot;Platform and application engineering&quot;,&quot;icon&quot;:&quot;icon-[lucide--code-2]&quot;,&quot;color&quot;:&quot;#0ea5e9&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%230ea5e9&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EE%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;growth&quot;,&quot;label&quot;:&quot;Growth&quot;,&quot;description&quot;:&quot;Marketing and customer growth&quot;,&quot;icon&quot;:&quot;icon-[lucide--trending-up]&quot;,&quot;color&quot;:&quot;#10b981&quot;,&quot;avatar&quot;:&quot;data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 64 64&#39;%3E%3Crect width=&#39;64&#39; height=&#39;64&#39; rx=&#39;32&#39; fill=&#39;%2310b981&#39;/%3E%3Ctext x=&#39;32&#39; y=&#39;40&#39; text-anchor=&#39;middle&#39; font-family=&#39;Arial&#39; font-size=&#39;24&#39; fill=&#39;white&#39;%3EG%3C/text%3E%3C/svg%3E&quot;},{&quot;value&quot;:&quot;support&quot;,&quot;label&quot;:&quot;Support&quot;,&quot;description&quot;:&quot;Customer operations&quot;,&quot;icon&quot;:&quot;icon-[lucide--life-buoy]&quot;,&quot;color&quot;:&quot;#f59e0b&quot;}]" groups="[]" placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false"></div></div>
+          <div class="catalog-card-stage"><ComboBox label="Default autocomplete" name="combobox-1" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Advanced Forms</span><h2>Combo Box</h2><p>Editable autocomplete combobox with local and remote suggestions.</p></div>
           <div class="catalog-card-footer"><span>41 props · 0 slots</span><a href="/components/combo-box">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
-      <article class="catalog-card">
+      <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><div data-component="CopyMarkup" size="default" label="Copy Markup" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
+          <div class="catalog-card-stage"><CopyMarkup size="default" label="Copy Markup" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Advanced Forms</span><h2>Copy Markup</h2><p>Theme-aware, responsive copy markup component.</p></div>
           <div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/copy-markup">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
-      <article class="catalog-card">
+      <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><div data-component="InputNumber" size="md" color="primary" variant="default" name="default-quantity" value="1" min="0" max="99" step="1"></div></div>
+          <div class="catalog-card-stage"><InputNumber size="md" color="primary" variant="default" name="default-quantity" value="1" min="0" max="99" step="1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Advanced Forms</span><h2>Input Number</h2><p>Theme-aware, responsive input number component.</p></div>
           <div class="catalog-card-footer"><span>40 props · 0 slots</span><a href="/components/input-number">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
-      <article class="catalog-card">
+      <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><div data-component="PinInput" size="default" label="Default four-digit PIN" name="pin-input-1" value="" length="4" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+          <div class="catalog-card-stage"><PinInput size="default" label="Default four-digit PIN" name="pin-input-1" value="" length="4" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Advanced Forms</span><h2>Pin Input</h2><p>Secure multi-cell PIN and verification-code input with regex and paste support.</p></div>
           <div class="catalog-card-footer"><span>26 props · 0 slots</span><a href="/components/pin-input">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
-      <article class="catalog-card">
+      <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><div data-component="SearchBox" size="default" label="Search Box" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
-        </div>
-        <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Advanced Forms</span><h2>Search Box</h2><p>Theme-aware, responsive search box component.</p></div>
-          <div class="catalog-card-footer"><span>13 props · 0 slots</span><a href="/components/search-box">Explore component <span aria-hidden="true">→</span></a></div>
-        </div>
-      </article>
-      <article class="catalog-card">
-        <div class="catalog-card-preview">
-          <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><div data-component="StrongPassword" label="Live strength meter" name="strong-password-1" value="Northstar!2026" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&amp;*()_+-=[]{}|;:,.&lt;&gt;?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="false" presentation="inline" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage=""></div></div>
+          <div class="catalog-card-stage"><StrongPassword label="Live strength meter" name="strong-password-1" value="Northstar!2026" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&amp;*()_+-=[]{}|;:,.&lt;&gt;?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="false" presentation="inline" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Advanced Forms</span><h2>Strong Password</h2><p>Theme-aware, responsive strong password component.</p></div>
           <div class="catalog-card-footer"><span>27 props · 0 slots</span><a href="/components/strong-password">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
-      <article class="catalog-card">
+      <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><div data-component="ToggleCount" size="default" color="primary" variant="segmented" name="pricing-cycle" value="annual" items="[{&quot;label&quot;:&quot;Startup&quot;,&quot;monthly&quot;:19,&quot;annual&quot;:190},{&quot;label&quot;:&quot;Team&quot;,&quot;monthly&quot;:89,&quot;annual&quot;:890},{&quot;label&quot;:&quot;Enterprise&quot;,&quot;monthly&quot;:129,&quot;annual&quot;:1290}]" align="end"></div></div>
+          <div class="catalog-card-stage"><ToggleCount size="default" variant="segmented" class="showcase-instance showcase-instance--1" value="sample-1" firstLabel="Toggle Count" secondLabel="Toggle Count" ariaLabel="Toggle Count 1 example" items='[{"id":"toggle-count-0-1","key":"toggle-count-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#toggle-count-demo","actionHref":"#toggle-count-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"toggle-count-0-2","key":"toggle-count-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#toggle-count-demo","actionHref":"#toggle-count-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' align="start" fullWidth="false" disabled="false" animate="true" animationDuration="450" animationSteps="18" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Advanced Forms</span><h2>Toggle Count</h2><p>Theme-aware, responsive toggle count component.</p></div>
           <div class="catalog-card-footer"><span>23 props · 0 slots</span><a href="/components/toggle-count">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
-      <article class="catalog-card">
+      <article class="catalog-card" data-interactive-preview="false">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><div data-component="TogglePassword" size="default" label="Password" name="toggle-password-1" value="Northstar!2026" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields="[]" visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage=""></div></div>
+          <div class="catalog-card-stage"><TogglePassword size="default" label="Password" name="toggle-password-1" value="Northstar!2026" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Advanced Forms</span><h2>Toggle Password</h2><p>Accessible password field with optional show and hide controls.</p></div>
diff --git a/examples/component-showcase/app/pages/base.wrn b/examples/component-showcase/app/pages/base.wrn
index 9a08a5fd..40276a11 100644
--- a/examples/component-showcase/app/pages/base.wrn
+++ b/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>
-      <div class="category-meta"><span>28 components</span><span>Multiple use cases</span><span>172 live configurations</span></div>
+      <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>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 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"]}]' size="md" variant="default" align="start" scrollable="false" dismissible="true" ariaLabel="Card 1 example" class="showcase-instance showcase-instance--1"><p class="showcase-card-copy">Supporting content belongs inside the default slot.</p></Card></div>
         </div>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Base</span><h2>Card</h2><p>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>
-        <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 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>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>
diff --git a/examples/component-showcase/app/pages/blocks.wrn b/examples/component-showcase/app/pages/block-library.wrn
similarity index 99%
rename from examples/component-showcase/app/pages/blocks.wrn
rename to examples/component-showcase/app/pages/block-library.wrn
index 59df0ea8..ac809850 100644
--- a/examples/component-showcase/app/pages/blocks.wrn
+++ b/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 {
diff --git a/examples/component-showcase/app/pages/colors.wrn b/examples/component-showcase/app/pages/colors.wrn
index 4949fc97..e1f53c86 100644
--- a/examples/component-showcase/app/pages/colors.wrn
+++ b/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>
   }
 }
diff --git a/examples/component-showcase/app/pages/components/accordion.wrn b/examples/component-showcase/app/pages/components/accordion.wrn
index 2922b615..4d867583 100644
--- a/examples/component-showcase/app/pages/components/accordion.wrn
+++ b/examples/component-showcase/app/pages/components/accordion.wrn
@@ -4,20 +4,20 @@ page AccordionDetail {
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
-  state playground_id = ctx.url.searchParams.get("pg_id") ?? "accordion-example-1"
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"value\": \"first\",\n    \"label\": \"Accordion #1\",\n    \"content\": \"This is the item's accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.\"\n  },\n  {\n    \"value\": \"second\",\n    \"label\": \"Accordion #2\",\n    \"content\": \"This is the item's accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.\"\n  },\n  {\n    \"value\": \"third\",\n    \"label\": \"Accordion #3\",\n    \"content\": \"This is the item's accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.\"\n  }\n]"
-  state playground_defaultOpen = ctx.url.searchParams.get("pg_defaultOpen") ?? "[\n  \"first\"\n]"
-  state playground_multiple = ctx.url.searchParams.get("pg_multiple") ?? "false"
-  state playground_alwaysOpen = ctx.url.searchParams.get("pg_alwaysOpen") ?? "false"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+  state playground_id = ctx.url.searchParams.get("pg_id") ?? "accordion"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_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\"]}]")
+  state playground_defaultOpen = JSON.parse(ctx.url.searchParams.get("pg_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\"]}]")
+  state playground_multiple = (ctx.url.searchParams.get("pg_multiple") ?? "false") === "true"
+  state playground_alwaysOpen = (ctx.url.searchParams.get("pg_alwaysOpen") ?? "false") === "true"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
   state playground_indicator = ctx.url.searchParams.get("pg_indicator") ?? "plus"
   state playground_indicatorPosition = ctx.url.searchParams.get("pg_indicatorPosition") ?? "start"
-  state playground_showIndicator = ctx.url.searchParams.get("pg_showIndicator") ?? "true"
-  state playground_bordered = ctx.url.searchParams.get("pg_bordered") ?? "false"
-  state playground_separated = ctx.url.searchParams.get("pg_separated") ?? "false"
-  state playground_flush = ctx.url.searchParams.get("pg_flush") ?? "false"
-  state playground_contentItalic = ctx.url.searchParams.get("pg_contentItalic") ?? "true"
+  state playground_showIndicator = (ctx.url.searchParams.get("pg_showIndicator") ?? "true") === "true"
+  state playground_bordered = (ctx.url.searchParams.get("pg_bordered") ?? "false") === "true"
+  state playground_separated = (ctx.url.searchParams.get("pg_separated") ?? "false") === "true"
+  state playground_flush = (ctx.url.searchParams.get("pg_flush") ?? "false") === "true"
+  state playground_contentItalic = (ctx.url.searchParams.get("pg_contentItalic") ?? "false") === "true"
   seo {
     title = "Accordion"
     description = "Theme-aware, responsive accordion component."
@@ -35,62 +35,453 @@ page AccordionDetail {
       </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="Accordion" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Accordion" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="change,open,close">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Accordion</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="Accordion" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" class="{playground_class}" id="{playground_id}" items="{playground_items}" defaultOpen="{playground_defaultOpen}" multiple="{playground_multiple}" alwaysOpen="{playground_alwaysOpen}" disabled="{playground_disabled}" indicator="{playground_indicator}" indicatorPosition="{playground_indicatorPosition}" showIndicator="{playground_showIndicator}" bordered="{playground_bordered}" separated="{playground_separated}" flush="{playground_flush}" contentItalic="{playground_contentItalic}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Accordion size='{playground_size}' color='{playground_color}' variant='{playground_variant}' class='{playground_class}' id='{playground_id}' items='{playground_items}' defaultOpen='{playground_defaultOpen}' multiple='{playground_multiple}' alwaysOpen='{playground_alwaysOpen}' disabled='{playground_disabled}' indicator='{playground_indicator}' indicatorPosition='{playground_indicatorPosition}' showIndicator='{playground_showIndicator}' bordered='{playground_bordered}' separated='{playground_separated}' flush='{playground_flush}' contentItalic='{playground_contentItalic}' /></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;Accordion
-  id="accordion-example-1"
   items='[
     &#123;
-      "value": "first",
-      "label": "Accordion #1",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+      "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": [
+        &#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": "second",
-      "label": "Accordion #2",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
-    &#125;,
-    &#123;
-      "value": "third",
-      "label": "Accordion #3",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+      "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": [
+        &#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;
   ]'
   defaultOpen='[
-    "first"
+    &#123;
+      "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": [
+        &#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": "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": [
+        &#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;
   ]'
-  contentItalic="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>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-accordion-size"><span><strong>size</strong><small>string</small></span><select id="playground-accordion-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-accordion-color"><span><strong>color</strong><small>string</small></span><select id="playground-accordion-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-accordion-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-accordion-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-accordion-class"><span><strong>class</strong><small>string</small></span><input id="playground-accordion-class" name="pg_class" type="text" value="" /></label><label class="playground-field" for="playground-accordion-id"><span><strong>id</strong><small>string</small></span><input id="playground-accordion-id" name="pg_id" type="text" value="accordion-example-1" /></label><label class="playground-field" for="playground-accordion-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-accordion-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+          <div class="playground-fields"><label class="playground-field" for="playground-accordion-size"><span><strong>size</strong><small>string</small></span><select id="playground-accordion-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-accordion-color"><span><strong>color</strong><small>string</small></span><select id="playground-accordion-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-accordion-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-accordion-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-accordion-class"><span><strong>class</strong><small>string</small></span><input id="playground-accordion-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label><label class="playground-field" for="playground-accordion-id"><span><strong>id</strong><small>string</small></span><input id="playground-accordion-id" name="pg_id" type="text" value="accordion" /></label><label class="playground-field" for="playground-accordion-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-accordion-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
-    "value": "first",
-    "label": "Accordion #1",
-    "content": "This is the item's accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+    "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"
+    ]
   },
   {
-    "value": "second",
-    "label": "Accordion #2",
-    "content": "This is the item's accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
-  },
-  {
-    "value": "third",
-    "label": "Accordion #3",
-    "content": "This is the item's accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+    "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"
+    ]
   }
 ]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-accordion-defaultOpen"><span><strong>default Open</strong><small>string</small></span><textarea id="playground-accordion-defaultOpen" name="pg_defaultOpen" rows="5" spellcheck="false" data-playground-json>[
-  "first"
-]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-accordion-multiple"><span><strong>multiple</strong><small>boolean</small></span><input id="playground-accordion-multiple" name="pg_multiple" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-accordion-alwaysOpen"><span><strong>always Open</strong><small>boolean</small></span><input id="playground-accordion-alwaysOpen" name="pg_alwaysOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-accordion-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-accordion-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-accordion-indicator"><span><strong>indicator</strong><small>string</small></span><input id="playground-accordion-indicator" name="pg_indicator" type="text" value="plus" /></label><label class="playground-field" for="playground-accordion-indicatorPosition"><span><strong>indicator Position</strong><small>string</small></span><select id="playground-accordion-indicatorPosition" name="pg_indicatorPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-toggle" for="playground-accordion-showIndicator"><span><strong>show Indicator</strong><small>boolean</small></span><input id="playground-accordion-showIndicator" name="pg_showIndicator" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-accordion-bordered"><span><strong>bordered</strong><small>boolean</small></span><input id="playground-accordion-bordered" name="pg_bordered" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-accordion-separated"><span><strong>separated</strong><small>boolean</small></span><input id="playground-accordion-separated" name="pg_separated" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-accordion-flush"><span><strong>flush</strong><small>boolean</small></span><input id="playground-accordion-flush" name="pg_flush" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-accordion-contentItalic"><span><strong>content Italic</strong><small>boolean</small></span><input id="playground-accordion-contentItalic" name="pg_contentItalic" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label></div>
+  {
+    "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"
+    ]
+  }
+]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-accordion-multiple"><span><strong>multiple</strong><small>boolean</small></span><input id="playground-accordion-multiple" name="pg_multiple" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-accordion-alwaysOpen"><span><strong>always Open</strong><small>boolean</small></span><input id="playground-accordion-alwaysOpen" name="pg_alwaysOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-accordion-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-accordion-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-accordion-indicator"><span><strong>indicator</strong><small>string</small></span><input id="playground-accordion-indicator" name="pg_indicator" type="text" value="plus" /></label><label class="playground-field" for="playground-accordion-indicatorPosition"><span><strong>indicator Position</strong><small>string</small></span><input id="playground-accordion-indicatorPosition" name="pg_indicatorPosition" type="text" value="start" /></label><label class="playground-toggle" for="playground-accordion-showIndicator"><span><strong>show Indicator</strong><small>boolean</small></span><input id="playground-accordion-showIndicator" name="pg_showIndicator" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-accordion-bordered"><span><strong>bordered</strong><small>boolean</small></span><input id="playground-accordion-bordered" name="pg_bordered" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-accordion-separated"><span><strong>separated</strong><small>boolean</small></span><input id="playground-accordion-separated" name="pg_separated" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-accordion-flush"><span><strong>flush</strong><small>boolean</small></span><input id="playground-accordion-flush" name="pg_flush" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-accordion-contentItalic"><span><strong>content Italic</strong><small>boolean</small></span><input id="playground-accordion-contentItalic" name="pg_contentItalic" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label></div>
         </form>
       </div>
     </section>
@@ -99,395 +490,731 @@ page AccordionDetail {
         <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 accordion</h2><p>Open one section at a time with a clear plus and minus indicator.</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="accordion-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="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="demo-render"><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>
-          <section class="demo-code" aria-label="Default accordion 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;Accordion
-  id="accordion-example-1"
   items='[
     &#123;
-      "value": "first",
-      "label": "Accordion #1",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+      "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": [
+        &#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": "second",
-      "label": "Accordion #2",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
-    &#125;,
-    &#123;
-      "value": "third",
-      "label": "Accordion #3",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+      "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": [
+        &#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;
   ]'
   defaultOpen='[
-    "first"
+    &#123;
+      "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": [
+        &#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": "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": [
+        &#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;
   ]'
-  contentItalic="true"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Behavior</span><h2>Always open</h2><p>Allow several content sections to remain expanded at the same time.</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="accordion-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="Accordion" size="default" color="primary" id="accordion-example-2" 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;,&quot;second&quot;]" alwaysOpen="true" contentItalic="true"></div></div>
+            
+            <div class="demo-render"><Accordion size="sm" variant="secondary" class="showcase-instance showcase-instance--2" items='[{"id":"accordion-1-1","key":"accordion-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":"#accordion-demo","actionHref":"#accordion-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":"accordion-1-2","key":"accordion-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#accordion-demo","actionHref":"#accordion-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"]}]' defaultOpen='[{"id":"accordion-1-1","key":"accordion-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":"#accordion-demo","actionHref":"#accordion-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":"accordion-1-2","key":"accordion-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#accordion-demo","actionHref":"#accordion-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"]}]' multiple="false" alwaysOpen="false" disabled="false" showIndicator="true" bordered="false" separated="false" flush="false" contentItalic="false" /></div>
           </div>
-          <section class="demo-code" aria-label="Always open 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;Accordion
-  id="accordion-example-2"
+  size="sm"
+  variant="secondary"
   items='[
     &#123;
-      "value": "first",
-      "label": "Accordion #1",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+      "id": "accordion-1-1",
+      "key": "accordion-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": "#accordion-demo",
+      "actionHref": "#accordion-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;
-      "value": "second",
-      "label": "Accordion #2",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
-    &#125;,
-    &#123;
-      "value": "third",
-      "label": "Accordion #3",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+      "id": "accordion-1-2",
+      "key": "accordion-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#accordion-demo",
+      "actionHref": "#accordion-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;
   ]'
   defaultOpen='[
-    "first",
-    "second"
+    &#123;
+      "id": "accordion-1-1",
+      "key": "accordion-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": "#accordion-demo",
+      "actionHref": "#accordion-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": "accordion-1-2",
+      "key": "accordion-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#accordion-demo",
+      "actionHref": "#accordion-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;
   ]'
-  alwaysOpen="true"
-  contentItalic="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>Nested accordion</h2><p>Place a coordinated secondary accordion inside an expanded parent section.</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="accordion-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="Accordion" size="default" color="primary" id="accordion-example-3" 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;children&quot;:[{&quot;value&quot;:&quot;sub-first&quot;,&quot;label&quot;:&quot;Sub 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;sub-second&quot;,&quot;label&quot;:&quot;Sub 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;sub-third&quot;,&quot;label&quot;:&quot;Sub 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;}]},{&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;,&quot;first.sub-first&quot;]" alwaysOpen="true" contentItalic="true"></div></div>
+            
+            <div class="demo-render"><Accordion size="lg" variant="success" class="showcase-instance showcase-instance--3" items='[{"id":"accordion-2-1","key":"accordion-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":"#accordion-demo","actionHref":"#accordion-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":"accordion-2-2","key":"accordion-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":"#accordion-demo","actionHref":"#accordion-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"]}]' defaultOpen='[{"id":"accordion-2-1","key":"accordion-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":"#accordion-demo","actionHref":"#accordion-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":"accordion-2-2","key":"accordion-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":"#accordion-demo","actionHref":"#accordion-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"]}]' multiple="false" alwaysOpen="false" disabled="false" showIndicator="true" bordered="false" separated="false" flush="false" contentItalic="false" /></div>
           </div>
-          <section class="demo-code" aria-label="Nested accordion 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;Accordion
-  id="accordion-example-3"
+  size="lg"
+  variant="success"
   items='[
     &#123;
-      "value": "first",
-      "label": "Accordion #1",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.",
-      "children": [
+      "id": "accordion-2-1",
+      "key": "accordion-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": "#accordion-demo",
+      "actionHref": "#accordion-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;
-          "value": "sub-first",
-          "label": "Sub accordion #1",
-          "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+          "label": "Nested option A",
+          "value": "nested-a"
         &#125;,
         &#123;
-          "value": "sub-second",
-          "label": "Sub accordion #2",
-          "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
-        &#125;,
-        &#123;
-          "value": "sub-third",
-          "label": "Sub accordion #3",
-          "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+          "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;
-      "value": "second",
-      "label": "Accordion #2",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
-    &#125;,
-    &#123;
-      "value": "third",
-      "label": "Accordion #3",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+      "id": "accordion-2-2",
+      "key": "accordion-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": "#accordion-demo",
+      "actionHref": "#accordion-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;
   ]'
   defaultOpen='[
-    "first",
-    "first.sub-first"
-  ]'
-  alwaysOpen="true"
-  contentItalic="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Indicators</span><h2>Without an indicator</h2><p>Use a minimal text-only accordion when visual indicators are unnecessary.</p></div>
-          <span class="demo-case-number">04</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="accordion-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="Accordion" size="default" color="primary" id="accordion-example-4" 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;]" showIndicator="false" contentItalic="true"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Without an indicator usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Accordion
-  id="accordion-example-4"
-  items='[
     &#123;
-      "value": "first",
-      "label": "Accordion #1",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+      "id": "accordion-2-1",
+      "key": "accordion-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": "#accordion-demo",
+      "actionHref": "#accordion-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;
-      "value": "second",
-      "label": "Accordion #2",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
-    &#125;,
-    &#123;
-      "value": "third",
-      "label": "Accordion #3",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
+      "id": "accordion-2-2",
+      "key": "accordion-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": "#accordion-demo",
+      "actionHref": "#accordion-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;
   ]'
-  defaultOpen='[
-    "first"
-  ]'
-  showIndicator="false"
-  contentItalic="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Indicators</span><h2>Chevron indicator</h2><p>Communicate expanded state with a rotating chevron.</p></div>
-          <span class="demo-case-number">05</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="accordion-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="Accordion" size="default" color="primary" variant="chevron" id="accordion-example-5" 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;]" indicator="chevron" indicatorPosition="start" contentItalic="true"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Chevron indicator usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Accordion
-  variant="chevron"
-  id="accordion-example-5"
-  items='[
-    &#123;
-      "value": "first",
-      "label": "Accordion #1",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
-    &#125;,
-    &#123;
-      "value": "second",
-      "label": "Accordion #2",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
-    &#125;,
-    &#123;
-      "value": "third",
-      "label": "Accordion #3",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
-    &#125;
-  ]'
-  defaultOpen='[
-    "first"
-  ]'
-  indicator="chevron"
-  contentItalic="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>Separated title and indicator</h2><p>Place the title and state indicator at opposite ends of each trigger.</p></div>
-          <span class="demo-case-number">06</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="accordion-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="Accordion" size="default" color="primary" variant="chevron" id="accordion-example-6" 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;]" indicator="chevron" indicatorPosition="end" contentItalic="true"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Separated title and indicator usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Accordion
-  variant="chevron"
-  id="accordion-example-6"
-  items='[
-    &#123;
-      "value": "first",
-      "label": "Accordion #1",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
-    &#125;,
-    &#123;
-      "value": "second",
-      "label": "Accordion #2",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
-    &#125;,
-    &#123;
-      "value": "third",
-      "label": "Accordion #3",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
-    &#125;
-  ]'
-  defaultOpen='[
-    "first"
-  ]'
-  indicator="chevron"
-  indicatorPosition="end"
-  contentItalic="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Surface</span><h2>Bordered accordion</h2><p>Group sections inside one bordered surface with dividing lines.</p></div>
-          <span class="demo-case-number">07</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="accordion-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="Accordion" size="default" color="primary" id="accordion-example-7" 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;]" bordered="true" contentItalic="true"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Bordered accordion usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Accordion
-  id="accordion-example-7"
-  items='[
-    &#123;
-      "value": "first",
-      "label": "Accordion #1",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
-    &#125;,
-    &#123;
-      "value": "second",
-      "label": "Accordion #2",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
-    &#125;,
-    &#123;
-      "value": "third",
-      "label": "Accordion #3",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
-    &#125;
-  ]'
-  defaultOpen='[
-    "first"
-  ]'
-  bordered="true"
-  contentItalic="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Surface</span><h2>Bordered open content</h2><p>Render each section as an independent rounded card.</p></div>
-          <span class="demo-case-number">08</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="accordion-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="Accordion" size="default" color="primary" id="accordion-example-8" 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;second&quot;]" indicatorPosition="end" separated="true" contentItalic="true"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Bordered open content usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Accordion
-  id="accordion-example-8"
-  items='[
-    &#123;
-      "value": "first",
-      "label": "Accordion #1",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
-    &#125;,
-    &#123;
-      "value": "second",
-      "label": "Accordion #2",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
-    &#125;,
-    &#123;
-      "value": "third",
-      "label": "Accordion #3",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
-    &#125;
-  ]'
-  defaultOpen='[
-    "second"
-  ]'
-  indicatorPosition="end"
-  separated="true"
-  contentItalic="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 section</h2><p>Disable an individual section while keeping the rest of the accordion interactive.</p></div>
-          <span class="demo-case-number">09</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="accordion-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="Accordion" size="default" color="primary" id="accordion-example-9" 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;disabled&quot;:true},{&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>
-          <section class="demo-code" aria-label="Disabled section usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Accordion
-  id="accordion-example-9"
-  items='[
-    &#123;
-      "value": "first",
-      "label": "Accordion #1",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
-    &#125;,
-    &#123;
-      "value": "second",
-      "label": "Accordion #2",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.",
-      "disabled": true
-    &#125;,
-    &#123;
-      "value": "third",
-      "label": "Accordion #3",
-      "content": "This is the item\'s accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure."
-    &#125;
-  ]'
-  defaultOpen='[
-    "first"
-  ]'
-  contentItalic="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>@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><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>@open</code><span>Fires after the component opens.</span></div><div><code>@close</code><span>Fires after the component closes.</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;Accordion
+  @change='console.log(event.detail)'
+  @open='console.log(event.detail)'
+  @close='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=\"Accordion\"], [data-component=\"Accordion\"]")
 
-component.addEventListener('change', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("open", (event) =&gt; &#123;
+  console.log("open", event.detail)
+&#125;)
+
+component?.addEventListener("close", (event) =&gt; &#123;
+  console.log("close", 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>"accordion"</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>defaultOpen</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>alwaysOpen</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>indicator</code></td><td>string</td><td><code>"plus"</code></td><td>No</td></tr><tr><td><code>indicatorPosition</code></td><td>string</td><td><code>"start"</code></td><td>No</td></tr><tr><td><code>showIndicator</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>bordered</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>separated</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>flush</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>contentItalic</code></td><td>boolean</td><td><code>false</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="#accordion-demo-1">Default accordion</a><a href="#accordion-demo-2">Always open</a><a href="#accordion-demo-3">Nested accordion</a><a href="#accordion-demo-4">Without an indicator</a><a href="#accordion-demo-5">Chevron indicator</a><a href="#accordion-demo-6">Separated title and indicator</a><a href="#accordion-demo-7">Bordered accordion</a><a href="#accordion-demo-8">Bordered open content</a><a href="#accordion-demo-9">Disabled section</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="#accordion-demo-1">Production default</a><a href="#accordion-demo-2">Compact application</a><a href="#accordion-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/advanced-date-picker.wrn b/examples/component-showcase/app/pages/components/advanced-date-picker.wrn
index e1a9e2f6..bb469fdb 100644
--- a/examples/component-showcase/app/pages/components/advanced-date-picker.wrn
+++ b/examples/component-showcase/app/pages/components/advanced-date-picker.wrn
@@ -5,7 +5,7 @@ page AdvancedDatePickerDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Advanced Date Picker example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default advanced date picker for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"advanced-date-picker-0-1\",\n    \"key\": \"advanced-date-picker-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#advanced-date-picker-demo\",\n    \"actionHref\": \"#advanced-date-picker-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"advanced-date-picker-0-2\",\n    \"key\": \"advanced-date-picker-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#advanced-date-picker-demo\",\n    \"actionHref\": \"#advanced-date-picker-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"advanced-date-picker-0-1\",\"key\":\"advanced-date-picker-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#advanced-date-picker-demo\",\"actionHref\":\"#advanced-date-picker-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"advanced-date-picker-0-2\",\"key\":\"advanced-date-picker-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#advanced-date-picker-demo\",\"actionHref\":\"#advanced-date-picker-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -25,12 +25,12 @@ page AdvancedDatePickerDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="AdvancedDatePicker" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="AdvancedDatePicker" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="input,change,open,close,clear">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Advanced Date Picker</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="AdvancedDatePicker" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><AdvancedDatePicker size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;AdvancedDatePicker
@@ -147,6 +147,7 @@ page AdvancedDatePickerDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -257,7 +258,7 @@ page AdvancedDatePickerDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-date-picker-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-advanced-date-picker-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-advanced-date-picker-class"><span><strong>class</strong><small>string</small></span><input id="playground-advanced-date-picker-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-date-picker-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-advanced-date-picker-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-advanced-date-picker-class"><span><strong>class</strong><small>string</small></span><input id="playground-advanced-date-picker-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page AdvancedDatePickerDetail {
         <div class="demo-workbench">
           <div id="advanced-date-picker-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AdvancedDatePicker" size="default" title="Advanced Date Picker example" description="A polished default advanced date picker for a modern application." items="[{&quot;id&quot;:&quot;advanced-date-picker-0-1&quot;,&quot;key&quot;:&quot;advanced-date-picker-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#advanced-date-picker-demo&quot;,&quot;actionHref&quot;:&quot;#advanced-date-picker-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;advanced-date-picker-0-2&quot;,&quot;key&quot;:&quot;advanced-date-picker-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#advanced-date-picker-demo&quot;,&quot;actionHref&quot;:&quot;#advanced-date-picker-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><AdvancedDatePicker size="default" title="Advanced Date Picker example" description="A polished default advanced date picker for a modern application." items='[{"id":"advanced-date-picker-0-1","key":"advanced-date-picker-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#advanced-date-picker-demo","actionHref":"#advanced-date-picker-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"advanced-date-picker-0-2","key":"advanced-date-picker-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#advanced-date-picker-demo","actionHref":"#advanced-date-picker-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -399,7 +401,8 @@ page AdvancedDatePickerDetail {
         <div class="demo-workbench">
           <div id="advanced-date-picker-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AdvancedDatePicker" size="sm" title="Compact Advanced Date Picker" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;advanced-date-picker-1-1&quot;,&quot;key&quot;:&quot;advanced-date-picker-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#advanced-date-picker-demo&quot;,&quot;actionHref&quot;:&quot;#advanced-date-picker-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;advanced-date-picker-1-2&quot;,&quot;key&quot;:&quot;advanced-date-picker-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#advanced-date-picker-demo&quot;,&quot;actionHref&quot;:&quot;#advanced-date-picker-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><AdvancedDatePicker size="sm" title="Compact Advanced Date Picker" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"advanced-date-picker-1-1","key":"advanced-date-picker-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#advanced-date-picker-demo","actionHref":"#advanced-date-picker-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"advanced-date-picker-1-2","key":"advanced-date-picker-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#advanced-date-picker-demo","actionHref":"#advanced-date-picker-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="secondary" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -528,7 +531,8 @@ page AdvancedDatePickerDetail {
         <div class="demo-workbench">
           <div id="advanced-date-picker-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AdvancedDatePicker" size="lg" title="Advanced Advanced Date Picker" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;advanced-date-picker-2-1&quot;,&quot;key&quot;:&quot;advanced-date-picker-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#advanced-date-picker-demo&quot;,&quot;actionHref&quot;:&quot;#advanced-date-picker-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;advanced-date-picker-2-2&quot;,&quot;key&quot;:&quot;advanced-date-picker-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#advanced-date-picker-demo&quot;,&quot;actionHref&quot;:&quot;#advanced-date-picker-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><AdvancedDatePicker size="lg" title="Advanced Advanced Date Picker" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"advanced-date-picker-2-1","key":"advanced-date-picker-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#advanced-date-picker-demo","actionHref":"#advanced-date-picker-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"advanced-date-picker-2-2","key":"advanced-date-picker-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#advanced-date-picker-demo","actionHref":"#advanced-date-picker-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' variant="success" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -649,11 +653,33 @@ page AdvancedDatePickerDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div><div><code>@clear</code><span>Fires after the current value or collection is cleared.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires as the editable value changes.</span></div><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div><div><code>@open</code><span>Fires after the component opens.</span></div><div><code>@close</code><span>Fires after the component closes.</span></div><div><code>@clear</code><span>Fires after the current value or selection is cleared.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;AdvancedDatePicker
+  @input='console.log(event.detail)'
+  @change='console.log(event.detail)'
+  @open='console.log(event.detail)'
+  @close='console.log(event.detail)'
+  @clear='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"AdvancedDatePicker\"], [data-component=\"AdvancedDatePicker\"]")
 
-component.addEventListener('input', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("open", (event) =&gt; &#123;
+  console.log("open", event.detail)
+&#125;)
+
+component?.addEventListener("close", (event) =&gt; &#123;
+  console.log("close", event.detail)
+&#125;)
+
+component?.addEventListener("clear", (event) =&gt; &#123;
+  console.log("clear", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Advanced Date Picker"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
diff --git a/examples/component-showcase/app/pages/components/advanced-range-slider.wrn b/examples/component-showcase/app/pages/components/advanced-range-slider.wrn
index 0e4b99ec..e08392de 100644
--- a/examples/component-showcase/app/pages/components/advanced-range-slider.wrn
+++ b/examples/component-showcase/app/pages/components/advanced-range-slider.wrn
@@ -5,7 +5,7 @@ page AdvancedRangeSliderDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Advanced Range Slider example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default advanced range slider for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"advanced-range-slider-0-1\",\n    \"key\": \"advanced-range-slider-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#advanced-range-slider-demo\",\n    \"actionHref\": \"#advanced-range-slider-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"advanced-range-slider-0-2\",\n    \"key\": \"advanced-range-slider-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#advanced-range-slider-demo\",\n    \"actionHref\": \"#advanced-range-slider-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"advanced-range-slider-0-1\",\"key\":\"advanced-range-slider-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#advanced-range-slider-demo\",\"actionHref\":\"#advanced-range-slider-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"advanced-range-slider-0-2\",\"key\":\"advanced-range-slider-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#advanced-range-slider-demo\",\"actionHref\":\"#advanced-range-slider-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -25,12 +25,12 @@ page AdvancedRangeSliderDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="AdvancedRangeSlider" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="AdvancedRangeSlider" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="input,change,start,end">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Advanced Range Slider</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="AdvancedRangeSlider" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><AdvancedRangeSlider size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;AdvancedRangeSlider
@@ -147,6 +147,7 @@ page AdvancedRangeSliderDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -257,7 +258,7 @@ page AdvancedRangeSliderDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-range-slider-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-advanced-range-slider-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-advanced-range-slider-class"><span><strong>class</strong><small>string</small></span><input id="playground-advanced-range-slider-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-range-slider-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-advanced-range-slider-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-advanced-range-slider-class"><span><strong>class</strong><small>string</small></span><input id="playground-advanced-range-slider-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page AdvancedRangeSliderDetail {
         <div class="demo-workbench">
           <div id="advanced-range-slider-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AdvancedRangeSlider" size="default" title="Advanced Range Slider example" description="A polished default advanced range slider for a modern application." items="[{&quot;id&quot;:&quot;advanced-range-slider-0-1&quot;,&quot;key&quot;:&quot;advanced-range-slider-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#advanced-range-slider-demo&quot;,&quot;actionHref&quot;:&quot;#advanced-range-slider-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;advanced-range-slider-0-2&quot;,&quot;key&quot;:&quot;advanced-range-slider-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#advanced-range-slider-demo&quot;,&quot;actionHref&quot;:&quot;#advanced-range-slider-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><AdvancedRangeSlider size="default" title="Advanced Range Slider example" description="A polished default advanced range slider for a modern application." items='[{"id":"advanced-range-slider-0-1","key":"advanced-range-slider-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#advanced-range-slider-demo","actionHref":"#advanced-range-slider-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"advanced-range-slider-0-2","key":"advanced-range-slider-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#advanced-range-slider-demo","actionHref":"#advanced-range-slider-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -399,7 +401,8 @@ page AdvancedRangeSliderDetail {
         <div class="demo-workbench">
           <div id="advanced-range-slider-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AdvancedRangeSlider" size="sm" title="Compact Advanced Range Slider" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;advanced-range-slider-1-1&quot;,&quot;key&quot;:&quot;advanced-range-slider-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#advanced-range-slider-demo&quot;,&quot;actionHref&quot;:&quot;#advanced-range-slider-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;advanced-range-slider-1-2&quot;,&quot;key&quot;:&quot;advanced-range-slider-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#advanced-range-slider-demo&quot;,&quot;actionHref&quot;:&quot;#advanced-range-slider-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><AdvancedRangeSlider size="sm" title="Compact Advanced Range Slider" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"advanced-range-slider-1-1","key":"advanced-range-slider-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#advanced-range-slider-demo","actionHref":"#advanced-range-slider-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"advanced-range-slider-1-2","key":"advanced-range-slider-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#advanced-range-slider-demo","actionHref":"#advanced-range-slider-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="secondary" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -528,7 +531,8 @@ page AdvancedRangeSliderDetail {
         <div class="demo-workbench">
           <div id="advanced-range-slider-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AdvancedRangeSlider" size="lg" title="Advanced Advanced Range Slider" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;advanced-range-slider-2-1&quot;,&quot;key&quot;:&quot;advanced-range-slider-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#advanced-range-slider-demo&quot;,&quot;actionHref&quot;:&quot;#advanced-range-slider-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;advanced-range-slider-2-2&quot;,&quot;key&quot;:&quot;advanced-range-slider-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#advanced-range-slider-demo&quot;,&quot;actionHref&quot;:&quot;#advanced-range-slider-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><AdvancedRangeSlider size="lg" title="Advanced Advanced Range Slider" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"advanced-range-slider-2-1","key":"advanced-range-slider-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#advanced-range-slider-demo","actionHref":"#advanced-range-slider-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"advanced-range-slider-2-2","key":"advanced-range-slider-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#advanced-range-slider-demo","actionHref":"#advanced-range-slider-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' variant="success" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -649,11 +653,28 @@ page AdvancedRangeSliderDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@start</code><span>Fires when the component emits the start event.</span></div><div><code>@end</code><span>Fires when the component emits the end event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires as the editable value changes.</span></div><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div><div><code>@start</code><span>Fires when the component emits the start event.</span></div><div><code>@end</code><span>Fires when the component emits the end event.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;AdvancedRangeSlider
+  @input='console.log(event.detail)'
+  @change='console.log(event.detail)'
+  @start='console.log(event.detail)'
+  @end='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"AdvancedRangeSlider\"], [data-component=\"AdvancedRangeSlider\"]")
 
-component.addEventListener('input', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("start", (event) =&gt; &#123;
+  console.log("start", event.detail)
+&#125;)
+
+component?.addEventListener("end", (event) =&gt; &#123;
+  console.log("end", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Advanced Range Slider"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
diff --git a/examples/component-showcase/app/pages/components/advanced-select.wrn b/examples/component-showcase/app/pages/components/advanced-select.wrn
index 36368d68..eaf6805e 100644
--- a/examples/component-showcase/app/pages/components/advanced-select.wrn
+++ b/examples/component-showcase/app/pages/components/advanced-select.wrn
@@ -6,24 +6,24 @@ page AdvancedSelectDetail {
   state playground_label = ctx.url.searchParams.get("pg_label") ?? "Default advanced select"
   state playground_name = ctx.url.searchParams.get("pg_name") ?? "advanced-select-1"
   state playground_value = ctx.url.searchParams.get("pg_value") ?? "design"
-  state playground_values = ctx.url.searchParams.get("pg_values") ?? "[]"
-  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    \"disabled\": false\n  }\n]"
-  state playground_groups = ctx.url.searchParams.get("pg_groups") ?? "[]"
+  state playground_values = JSON.parse(ctx.url.searchParams.get("pg_values") ?? "[]")
+  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\",\"disabled\":false}]")
+  state playground_groups = JSON.parse(ctx.url.searchParams.get("pg_groups") ?? "[]")
   state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Choose a team"
   state playground_placeholderIcon = ctx.url.searchParams.get("pg_placeholderIcon") ?? ""
   state playground_searchPlaceholder = ctx.url.searchParams.get("pg_searchPlaceholder") ?? "Search options…"
-  state playground_multiple = ctx.url.searchParams.get("pg_multiple") ?? "false"
-  state playground_searchable = ctx.url.searchParams.get("pg_searchable") ?? "true"
-  state playground_defaultOpen = ctx.url.searchParams.get("pg_defaultOpen") ?? "false"
-  state playground_clearable = ctx.url.searchParams.get("pg_clearable") ?? "true"
-  state playground_allowEmpty = ctx.url.searchParams.get("pg_allowEmpty") ?? "false"
-  state playground_tags = ctx.url.searchParams.get("pg_tags") ?? "false"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
-  state playground_invalid = ctx.url.searchParams.get("pg_invalid") ?? "false"
+  state playground_multiple = (ctx.url.searchParams.get("pg_multiple") ?? "false") === "true"
+  state playground_searchable = (ctx.url.searchParams.get("pg_searchable") ?? "true") === "true"
+  state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true"
+  state playground_clearable = (ctx.url.searchParams.get("pg_clearable") ?? "true") === "true"
+  state playground_allowEmpty = (ctx.url.searchParams.get("pg_allowEmpty") ?? "false") === "true"
+  state playground_tags = (ctx.url.searchParams.get("pg_tags") ?? "false") === "true"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
+  state playground_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 options…"
   state playground_emptyLabel = ctx.url.searchParams.get("pg_emptyLabel") ?? "No options found"
   state playground_selectedOptionsLabel = ctx.url.searchParams.get("pg_selectedOptionsLabel") ?? "Selected options"
@@ -32,25 +32,25 @@ page AdvancedSelectDetail {
   state playground_loadMoreLabel = ctx.url.searchParams.get("pg_loadMoreLabel") ?? "Load more"
   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_searchResultLimit = ctx.url.searchParams.get("pg_searchResultLimit") ?? "0"
-  state playground_maxSelections = ctx.url.searchParams.get("pg_maxSelections") ?? "0"
-  state playground_showCounter = ctx.url.searchParams.get("pg_showCounter") ?? "false"
+  state playground_minSearchLength = Number(ctx.url.searchParams.get("pg_minSearchLength") ?? "0")
+  state playground_searchResultLimit = Number(ctx.url.searchParams.get("pg_searchResultLimit") ?? "0")
+  state playground_maxSelections = Number(ctx.url.searchParams.get("pg_maxSelections") ?? "0")
+  state playground_showCounter = (ctx.url.searchParams.get("pg_showCounter") ?? "false") === "true"
   state playground_counterTemplate = ctx.url.searchParams.get("pg_counterTemplate") ?? "{selected} selected"
   state playground_optionTemplate = ctx.url.searchParams.get("pg_optionTemplate") ?? "default"
   state playground_selectedTemplate = ctx.url.searchParams.get("pg_selectedTemplate") ?? "default"
-  state playground_closeOnSelect = ctx.url.searchParams.get("pg_closeOnSelect") ?? "true"
-  state playground_scrollToSelected = ctx.url.searchParams.get("pg_scrollToSelected") ?? "true"
-  state playground_fixed = ctx.url.searchParams.get("pg_fixed") ?? "false"
+  state playground_closeOnSelect = (ctx.url.searchParams.get("pg_closeOnSelect") ?? "true") === "true"
+  state playground_scrollToSelected = (ctx.url.searchParams.get("pg_scrollToSelected") ?? "true") === "true"
+  state playground_fixed = (ctx.url.searchParams.get("pg_fixed") ?? "false") === "true"
   state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom"
-  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_remoteAutoLoad = ctx.url.searchParams.get("pg_remoteAutoLoad") ?? "true"
-  state playground_infinite = ctx.url.searchParams.get("pg_infinite") ?? "false"
-  state playground_hasMore = ctx.url.searchParams.get("pg_hasMore") ?? "false"
-  state playground_page = ctx.url.searchParams.get("pg_page") ?? "1"
+  state playground_remoteDebounce = Number(ctx.url.searchParams.get("pg_remoteDebounce") ?? "250")
+  state playground_remoteAutoLoad = (ctx.url.searchParams.get("pg_remoteAutoLoad") ?? "true") === "true"
+  state playground_infinite = (ctx.url.searchParams.get("pg_infinite") ?? "false") === "true"
+  state playground_hasMore = (ctx.url.searchParams.get("pg_hasMore") ?? "false") === "true"
+  state playground_page = Number(ctx.url.searchParams.get("pg_page") ?? "1")
   state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   seo {
     title = "Advanced Select"
@@ -69,12 +69,12 @@ page AdvancedSelectDetail {
       </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="AdvancedSelect" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="AdvancedSelect" 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 Advanced Select</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="AdvancedSelect" size="{playground_size}" color="{playground_color}" label="{playground_label}" name="{playground_name}" value="{playground_value}" values="{playground_values}" options="{playground_options}" groups="{playground_groups}" placeholder="{playground_placeholder}" placeholderIcon="{playground_placeholderIcon}" searchPlaceholder="{playground_searchPlaceholder}" multiple="{playground_multiple}" searchable="{playground_searchable}" defaultOpen="{playground_defaultOpen}" clearable="{playground_clearable}" allowEmpty="{playground_allowEmpty}" tags="{playground_tags}" disabled="{playground_disabled}" required="{playground_required}" invalid="{playground_invalid}" validationMessage="{playground_validationMessage}" helpText="{playground_helpText}" loading="{playground_loading}" loadingLabel="{playground_loadingLabel}" emptyLabel="{playground_emptyLabel}" selectedOptionsLabel="{playground_selectedOptionsLabel}" clearLabel="{playground_clearLabel}" createLabel="{playground_createLabel}" loadMoreLabel="{playground_loadMoreLabel}" searchMode="{playground_searchMode}" searchFields="{playground_searchFields}" minSearchLength="{playground_minSearchLength}" searchResultLimit="{playground_searchResultLimit}" maxSelections="{playground_maxSelections}" showCounter="{playground_showCounter}" counterTemplate="{playground_counterTemplate}" optionTemplate="{playground_optionTemplate}" selectedTemplate="{playground_selectedTemplate}" closeOnSelect="{playground_closeOnSelect}" scrollToSelected="{playground_scrollToSelected}" fixed="{playground_fixed}" placement="{playground_placement}" remote="{playground_remote}" remoteUrl="{playground_remoteUrl}" remoteQueryParam="{playground_remoteQueryParam}" remoteDebounce="{playground_remoteDebounce}" remoteAutoLoad="{playground_remoteAutoLoad}" infinite="{playground_infinite}" hasMore="{playground_hasMore}" page="{playground_page}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><AdvancedSelect size='{playground_size}' color='{playground_color}' label='{playground_label}' name='{playground_name}' value='{playground_value}' values='{playground_values}' options='{playground_options}' groups='{playground_groups}' placeholder='{playground_placeholder}' placeholderIcon='{playground_placeholderIcon}' searchPlaceholder='{playground_searchPlaceholder}' multiple='{playground_multiple}' searchable='{playground_searchable}' defaultOpen='{playground_defaultOpen}' clearable='{playground_clearable}' allowEmpty='{playground_allowEmpty}' tags='{playground_tags}' disabled='{playground_disabled}' required='{playground_required}' invalid='{playground_invalid}' validationMessage='{playground_validationMessage}' helpText='{playground_helpText}' loading='{playground_loading}' loadingLabel='{playground_loadingLabel}' emptyLabel='{playground_emptyLabel}' selectedOptionsLabel='{playground_selectedOptionsLabel}' clearLabel='{playground_clearLabel}' createLabel='{playground_createLabel}' loadMoreLabel='{playground_loadMoreLabel}' searchMode='{playground_searchMode}' searchFields='{playground_searchFields}' minSearchLength='{playground_minSearchLength}' searchResultLimit='{playground_searchResultLimit}' maxSelections='{playground_maxSelections}' showCounter='{playground_showCounter}' counterTemplate='{playground_counterTemplate}' optionTemplate='{playground_optionTemplate}' selectedTemplate='{playground_selectedTemplate}' closeOnSelect='{playground_closeOnSelect}' scrollToSelected='{playground_scrollToSelected}' fixed='{playground_fixed}' placement='{playground_placement}' remote='{playground_remote}' remoteUrl='{playground_remoteUrl}' remoteQueryParam='{playground_remoteQueryParam}' remoteDebounce='{playground_remoteDebounce}' remoteAutoLoad='{playground_remoteAutoLoad}' infinite='{playground_infinite}' hasMore='{playground_hasMore}' page='{playground_page}' 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;AdvancedSelect
@@ -89,7 +89,7 @@ page AdvancedSelectDetail {
       "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",
@@ -97,7 +97,7 @@ page AdvancedSelectDetail {
       "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",
@@ -105,7 +105,7 @@ page AdvancedSelectDetail {
       "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",
@@ -120,6 +120,7 @@ page AdvancedSelectDetail {
 /&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>51 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -154,7 +155,7 @@ page AdvancedSelectDetail {
     "description": "Customer operations",
     "disabled": false
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-select-groups"><span><strong>groups</strong><small>string</small></span><textarea id="playground-advanced-select-groups" name="pg_groups" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-select-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-advanced-select-placeholder" name="pg_placeholder" type="text" value="Choose a team" /></label><label class="playground-field" for="playground-advanced-select-placeholderIcon"><span><strong>placeholder Icon</strong><small>string</small></span><input id="playground-advanced-select-placeholderIcon" name="pg_placeholderIcon" type="text" value="" /></label><label class="playground-field" for="playground-advanced-select-searchPlaceholder"><span><strong>search Placeholder</strong><small>string</small></span><input id="playground-advanced-select-searchPlaceholder" name="pg_searchPlaceholder" type="text" value="Search options…" /></label><label class="playground-toggle" for="playground-advanced-select-multiple"><span><strong>multiple</strong><small>boolean</small></span><input id="playground-advanced-select-multiple" name="pg_multiple" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-searchable"><span><strong>searchable</strong><small>boolean</small></span><input id="playground-advanced-select-searchable" name="pg_searchable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-advanced-select-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-clearable"><span><strong>clearable</strong><small>boolean</small></span><input id="playground-advanced-select-clearable" name="pg_clearable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-allowEmpty"><span><strong>allow Empty</strong><small>boolean</small></span><input id="playground-advanced-select-allowEmpty" name="pg_allowEmpty" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-tags"><span><strong>tags</strong><small>boolean</small></span><input id="playground-advanced-select-tags" name="pg_tags" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-advanced-select-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-advanced-select-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-invalid"><span><strong>invalid</strong><small>boolean</small></span><input id="playground-advanced-select-invalid" name="pg_invalid" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-validationMessage"><span><strong>validation Message</strong><small>string</small></span><input id="playground-advanced-select-validationMessage" name="pg_validationMessage" type="text" value="" /></label><label class="playground-field" for="playground-advanced-select-helpText"><span><strong>help Text</strong><small>string</small></span><input id="playground-advanced-select-helpText" name="pg_helpText" type="text" value="" /></label><label class="playground-toggle" for="playground-advanced-select-loading"><span><strong>loading</strong><small>boolean</small></span><input id="playground-advanced-select-loading" name="pg_loading" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-loadingLabel"><span><strong>loading Label</strong><small>string</small></span><input id="playground-advanced-select-loadingLabel" name="pg_loadingLabel" type="text" value="Loading options…" /></label><label class="playground-field" for="playground-advanced-select-emptyLabel"><span><strong>empty Label</strong><small>string</small></span><input id="playground-advanced-select-emptyLabel" name="pg_emptyLabel" type="text" value="No options found" /></label><label class="playground-field" for="playground-advanced-select-selectedOptionsLabel"><span><strong>selected Options Label</strong><small>string</small></span><input id="playground-advanced-select-selectedOptionsLabel" name="pg_selectedOptionsLabel" type="text" value="Selected options" /></label><label class="playground-field" for="playground-advanced-select-clearLabel"><span><strong>clear Label</strong><small>string</small></span><input id="playground-advanced-select-clearLabel" name="pg_clearLabel" type="text" value="Clear selection" /></label><label class="playground-field" for="playground-advanced-select-createLabel"><span><strong>create Label</strong><small>string</small></span><input id="playground-advanced-select-createLabel" name="pg_createLabel" type="text" value="Create" /></label><label class="playground-field" for="playground-advanced-select-loadMoreLabel"><span><strong>load More Label</strong><small>string</small></span><input id="playground-advanced-select-loadMoreLabel" name="pg_loadMoreLabel" type="text" value="Load more" /></label><label class="playground-field" for="playground-advanced-select-searchMode"><span><strong>search Mode</strong><small>string</small></span><select id="playground-advanced-select-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-advanced-select-searchFields"><span><strong>search Fields</strong><small>string</small></span><input id="playground-advanced-select-searchFields" name="pg_searchFields" type="text" value="label,description" /></label><label class="playground-field" for="playground-advanced-select-minSearchLength"><span><strong>min Search Length</strong><small>number</small></span><input id="playground-advanced-select-minSearchLength" name="pg_minSearchLength" type="number" value="0" /></label><label class="playground-field" for="playground-advanced-select-searchResultLimit"><span><strong>search Result Limit</strong><small>number</small></span><input id="playground-advanced-select-searchResultLimit" name="pg_searchResultLimit" type="number" value="0" /></label><label class="playground-field" for="playground-advanced-select-maxSelections"><span><strong>max Selections</strong><small>number</small></span><input id="playground-advanced-select-maxSelections" name="pg_maxSelections" type="number" value="0" /></label><label class="playground-toggle" for="playground-advanced-select-showCounter"><span><strong>show Counter</strong><small>boolean</small></span><input id="playground-advanced-select-showCounter" name="pg_showCounter" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-counterTemplate"><span><strong>counter Template</strong><small>string</small></span><input id="playground-advanced-select-counterTemplate" name="pg_counterTemplate" type="text" value="{selected} selected" /></label><label class="playground-field" for="playground-advanced-select-optionTemplate"><span><strong>option Template</strong><small>string</small></span><select id="playground-advanced-select-optionTemplate" name="pg_optionTemplate"><option value="default" selected>default</option><option value="icon">icon</option><option value="avatar">avatar</option><option value="color">color</option></select></label><label class="playground-field" for="playground-advanced-select-selectedTemplate"><span><strong>selected Template</strong><small>string</small></span><select id="playground-advanced-select-selectedTemplate" name="pg_selectedTemplate"><option value="default" selected>default</option><option value="count">count</option><option value="text">text</option></select></label><label class="playground-toggle" for="playground-advanced-select-closeOnSelect"><span><strong>close On Select</strong><small>boolean</small></span><input id="playground-advanced-select-closeOnSelect" name="pg_closeOnSelect" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-scrollToSelected"><span><strong>scroll To Selected</strong><small>boolean</small></span><input id="playground-advanced-select-scrollToSelected" name="pg_scrollToSelected" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-fixed"><span><strong>fixed</strong><small>boolean</small></span><input id="playground-advanced-select-fixed" name="pg_fixed" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-placement"><span><strong>placement</strong><small>string</small></span><input id="playground-advanced-select-placement" name="pg_placement" type="text" value="bottom" /></label><label class="playground-toggle" for="playground-advanced-select-remote"><span><strong>remote</strong><small>boolean</small></span><input id="playground-advanced-select-remote" name="pg_remote" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-remoteUrl"><span><strong>remote Url</strong><small>string</small></span><input id="playground-advanced-select-remoteUrl" name="pg_remoteUrl" type="text" value="" /></label><label class="playground-field" for="playground-advanced-select-remoteQueryParam"><span><strong>remote Query Param</strong><small>string</small></span><input id="playground-advanced-select-remoteQueryParam" name="pg_remoteQueryParam" type="text" value="q" /></label><label class="playground-field" for="playground-advanced-select-remoteDebounce"><span><strong>remote Debounce</strong><small>number</small></span><input id="playground-advanced-select-remoteDebounce" name="pg_remoteDebounce" type="number" value="250" /></label><label class="playground-toggle" for="playground-advanced-select-remoteAutoLoad"><span><strong>remote Auto Load</strong><small>boolean</small></span><input id="playground-advanced-select-remoteAutoLoad" name="pg_remoteAutoLoad" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-infinite"><span><strong>infinite</strong><small>boolean</small></span><input id="playground-advanced-select-infinite" name="pg_infinite" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-hasMore"><span><strong>has More</strong><small>boolean</small></span><input id="playground-advanced-select-hasMore" name="pg_hasMore" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-page"><span><strong>page</strong><small>number</small></span><input id="playground-advanced-select-page" name="pg_page" type="number" value="1" /></label><label class="playground-field" for="playground-advanced-select-class"><span><strong>class</strong><small>string</small></span><input id="playground-advanced-select-class" name="pg_class" type="text" value="" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-select-groups"><span><strong>groups</strong><small>string</small></span><textarea id="playground-advanced-select-groups" name="pg_groups" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-select-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-advanced-select-placeholder" name="pg_placeholder" type="text" value="Choose a team" /></label><label class="playground-field" for="playground-advanced-select-placeholderIcon"><span><strong>placeholder Icon</strong><small>string</small></span><input id="playground-advanced-select-placeholderIcon" name="pg_placeholderIcon" type="text" value="" /></label><label class="playground-field" for="playground-advanced-select-searchPlaceholder"><span><strong>search Placeholder</strong><small>string</small></span><input id="playground-advanced-select-searchPlaceholder" name="pg_searchPlaceholder" type="text" value="Search options…" /></label><label class="playground-toggle" for="playground-advanced-select-multiple"><span><strong>multiple</strong><small>boolean</small></span><input id="playground-advanced-select-multiple" name="pg_multiple" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-searchable"><span><strong>searchable</strong><small>boolean</small></span><input id="playground-advanced-select-searchable" name="pg_searchable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-advanced-select-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-clearable"><span><strong>clearable</strong><small>boolean</small></span><input id="playground-advanced-select-clearable" name="pg_clearable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-allowEmpty"><span><strong>allow Empty</strong><small>boolean</small></span><input id="playground-advanced-select-allowEmpty" name="pg_allowEmpty" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-tags"><span><strong>tags</strong><small>boolean</small></span><input id="playground-advanced-select-tags" name="pg_tags" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-advanced-select-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-advanced-select-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-invalid"><span><strong>invalid</strong><small>boolean</small></span><input id="playground-advanced-select-invalid" name="pg_invalid" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-validationMessage"><span><strong>validation Message</strong><small>string</small></span><input id="playground-advanced-select-validationMessage" name="pg_validationMessage" type="text" value="" /></label><label class="playground-field" for="playground-advanced-select-helpText"><span><strong>help Text</strong><small>string</small></span><input id="playground-advanced-select-helpText" name="pg_helpText" type="text" value="" /></label><label class="playground-toggle" for="playground-advanced-select-loading"><span><strong>loading</strong><small>boolean</small></span><input id="playground-advanced-select-loading" name="pg_loading" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-loadingLabel"><span><strong>loading Label</strong><small>string</small></span><input id="playground-advanced-select-loadingLabel" name="pg_loadingLabel" type="text" value="Loading options…" /></label><label class="playground-field" for="playground-advanced-select-emptyLabel"><span><strong>empty Label</strong><small>string</small></span><input id="playground-advanced-select-emptyLabel" name="pg_emptyLabel" type="text" value="No options found" /></label><label class="playground-field" for="playground-advanced-select-selectedOptionsLabel"><span><strong>selected Options Label</strong><small>string</small></span><input id="playground-advanced-select-selectedOptionsLabel" name="pg_selectedOptionsLabel" type="text" value="Selected options" /></label><label class="playground-field" for="playground-advanced-select-clearLabel"><span><strong>clear Label</strong><small>string</small></span><input id="playground-advanced-select-clearLabel" name="pg_clearLabel" type="text" value="Clear selection" /></label><label class="playground-field" for="playground-advanced-select-createLabel"><span><strong>create Label</strong><small>string</small></span><input id="playground-advanced-select-createLabel" name="pg_createLabel" type="text" value="Create" /></label><label class="playground-field" for="playground-advanced-select-loadMoreLabel"><span><strong>load More Label</strong><small>string</small></span><input id="playground-advanced-select-loadMoreLabel" name="pg_loadMoreLabel" type="text" value="Load more" /></label><label class="playground-field" for="playground-advanced-select-searchMode"><span><strong>search Mode</strong><small>string</small></span><input id="playground-advanced-select-searchMode" name="pg_searchMode" type="text" value="contains" /></label><label class="playground-field" for="playground-advanced-select-searchFields"><span><strong>search Fields</strong><small>string</small></span><input id="playground-advanced-select-searchFields" name="pg_searchFields" type="text" value="label,description" /></label><label class="playground-field" for="playground-advanced-select-minSearchLength"><span><strong>min Search Length</strong><small>number</small></span><input id="playground-advanced-select-minSearchLength" name="pg_minSearchLength" type="number" value="0" /></label><label class="playground-field" for="playground-advanced-select-searchResultLimit"><span><strong>search Result Limit</strong><small>number</small></span><input id="playground-advanced-select-searchResultLimit" name="pg_searchResultLimit" type="number" value="0" /></label><label class="playground-field" for="playground-advanced-select-maxSelections"><span><strong>max Selections</strong><small>number</small></span><input id="playground-advanced-select-maxSelections" name="pg_maxSelections" type="number" value="0" /></label><label class="playground-toggle" for="playground-advanced-select-showCounter"><span><strong>show Counter</strong><small>boolean</small></span><input id="playground-advanced-select-showCounter" name="pg_showCounter" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-counterTemplate"><span><strong>counter Template</strong><small>string</small></span><input id="playground-advanced-select-counterTemplate" name="pg_counterTemplate" type="text" value="{selected} selected" /></label><label class="playground-field" for="playground-advanced-select-optionTemplate"><span><strong>option Template</strong><small>string</small></span><input id="playground-advanced-select-optionTemplate" name="pg_optionTemplate" type="text" value="default" /></label><label class="playground-field" for="playground-advanced-select-selectedTemplate"><span><strong>selected Template</strong><small>string</small></span><input id="playground-advanced-select-selectedTemplate" name="pg_selectedTemplate" type="text" value="default" /></label><label class="playground-toggle" for="playground-advanced-select-closeOnSelect"><span><strong>close On Select</strong><small>boolean</small></span><input id="playground-advanced-select-closeOnSelect" name="pg_closeOnSelect" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-scrollToSelected"><span><strong>scroll To Selected</strong><small>boolean</small></span><input id="playground-advanced-select-scrollToSelected" name="pg_scrollToSelected" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-fixed"><span><strong>fixed</strong><small>boolean</small></span><input id="playground-advanced-select-fixed" name="pg_fixed" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-advanced-select-placement" name="pg_placement"><option value="bottom" selected>bottom</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-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-toggle" for="playground-advanced-select-remote"><span><strong>remote</strong><small>boolean</small></span><input id="playground-advanced-select-remote" name="pg_remote" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-remoteUrl"><span><strong>remote Url</strong><small>string</small></span><input id="playground-advanced-select-remoteUrl" name="pg_remoteUrl" type="text" value="" /></label><label class="playground-field" for="playground-advanced-select-remoteQueryParam"><span><strong>remote Query Param</strong><small>string</small></span><input id="playground-advanced-select-remoteQueryParam" name="pg_remoteQueryParam" type="text" value="q" /></label><label class="playground-field" for="playground-advanced-select-remoteDebounce"><span><strong>remote Debounce</strong><small>number</small></span><input id="playground-advanced-select-remoteDebounce" name="pg_remoteDebounce" type="number" value="250" /></label><label class="playground-toggle" for="playground-advanced-select-remoteAutoLoad"><span><strong>remote Auto Load</strong><small>boolean</small></span><input id="playground-advanced-select-remoteAutoLoad" name="pg_remoteAutoLoad" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-infinite"><span><strong>infinite</strong><small>boolean</small></span><input id="playground-advanced-select-infinite" name="pg_infinite" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-advanced-select-hasMore"><span><strong>has More</strong><small>boolean</small></span><input id="playground-advanced-select-hasMore" name="pg_hasMore" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-advanced-select-page"><span><strong>page</strong><small>number</small></span><input id="playground-advanced-select-page" name="pg_page" type="number" value="1" /></label><label class="playground-field" for="playground-advanced-select-class"><span><strong>class</strong><small>string</small></span><input id="playground-advanced-select-class" name="pg_class" type="text" value="" /></label></div>
         </form>
       </div>
     </section>
@@ -169,7 +170,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-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="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="demo-render"><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>
           <section class="demo-code" aria-label="Default advanced select usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -185,7 +187,7 @@ page AdvancedSelectDetail {
       "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",
@@ -193,7 +195,7 @@ page AdvancedSelectDetail {
       "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",
@@ -201,7 +203,7 @@ page AdvancedSelectDetail {
       "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",
@@ -225,7 +227,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-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="AdvancedSelect" size="default" label="Grouped options" name="advanced-select-2" value="design" values="[]" 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;disabled&quot;:false}]}]" placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" 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="demo-render"><AdvancedSelect size="default" label="Grouped options" name="advanced-select-2" value="design" values='[]' 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","disabled":false}]}]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="false" 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>
           <section class="demo-code" aria-label="Grouped options usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -245,7 +248,7 @@ page AdvancedSelectDetail {
           "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",
@@ -253,7 +256,7 @@ page AdvancedSelectDetail {
           "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;,
@@ -266,7 +269,7 @@ page AdvancedSelectDetail {
           "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",
@@ -292,7 +295,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-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="AdvancedSelect" size="default" label="Fixed-position dropdown" name="advanced-select-3" 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="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="true" remote="false" remoteUrl="" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><AdvancedSelect size="default" label="Fixed-position dropdown" name="advanced-select-3" 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="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="true" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Fixed-position dropdown usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -308,7 +312,7 @@ page AdvancedSelectDetail {
       "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",
@@ -316,7 +320,7 @@ page AdvancedSelectDetail {
       "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",
@@ -324,7 +328,7 @@ page AdvancedSelectDetail {
       "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",
@@ -350,7 +354,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-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="AdvancedSelect" size="default" label="Placeholder with icon" name="advanced-select-4" value="" 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 workspace" placeholderIcon="icon-[lucide--building-2]" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><AdvancedSelect size="default" label="Placeholder with icon" name="advanced-select-4" value="" 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 workspace" placeholderIcon="icon-[lucide--building-2]" multiple="false" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Placeholder with icon usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -365,7 +370,7 @@ page AdvancedSelectDetail {
       "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",
@@ -373,7 +378,7 @@ page AdvancedSelectDetail {
       "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",
@@ -381,7 +386,7 @@ page AdvancedSelectDetail {
       "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",
@@ -408,7 +413,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-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="AdvancedSelect" size="default" label="Allow empty selection" name="advanced-select-5" 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="false" allowEmpty="true" 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="demo-render"><AdvancedSelect size="default" label="Allow empty selection" name="advanced-select-5" 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="false" allowEmpty="true" 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>
           <section class="demo-code" aria-label="Allow empty selection usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -424,7 +430,7 @@ page AdvancedSelectDetail {
       "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",
@@ -432,7 +438,7 @@ page AdvancedSelectDetail {
       "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",
@@ -440,7 +446,7 @@ page AdvancedSelectDetail {
       "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",
@@ -464,7 +470,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-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="AdvancedSelect" size="default" label="Multiple selection" name="advanced-select-6" value="" values="[&quot;design&quot;,&quot;engineering&quot;]" 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="true" searchable="false" 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="demo-render"><AdvancedSelect size="default" label="Multiple selection" name="advanced-select-6" value="" values='["design","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","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" 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>
           <section class="demo-code" aria-label="Multiple selection usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -482,7 +489,7 @@ page AdvancedSelectDetail {
       "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",
@@ -490,7 +497,7 @@ page AdvancedSelectDetail {
       "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",
@@ -498,7 +505,7 @@ page AdvancedSelectDetail {
       "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",
@@ -524,7 +531,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-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="AdvancedSelect" size="default" label="Multiple selection with optgroups" name="advanced-select-7" value="" values="[&quot;design&quot;,&quot;engineering&quot;]" 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;disabled&quot;:false}]}]" placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" 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="demo-render"><AdvancedSelect size="default" label="Multiple selection with optgroups" name="advanced-select-7" value="" values='["design","engineering"]' 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","disabled":false}]}]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" 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>
           <section class="demo-code" aria-label="Multiple selection with optgroups usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -546,7 +554,7 @@ page AdvancedSelectDetail {
           "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",
@@ -554,7 +562,7 @@ page AdvancedSelectDetail {
           "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;,
@@ -567,7 +575,7 @@ page AdvancedSelectDetail {
           "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",
@@ -594,7 +602,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-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="AdvancedSelect" size="default" label="Multiple selection with option templates" name="advanced-select-8" value="" values="[&quot;design&quot;,&quot;engineering&quot;]" 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="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><AdvancedSelect size="default" label="Multiple selection with option templates" name="advanced-select-8" value="" values='["design","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","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Multiple selection with option templates usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -612,7 +621,7 @@ page AdvancedSelectDetail {
       "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",
@@ -620,7 +629,7 @@ page AdvancedSelectDetail {
       "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",
@@ -628,7 +637,7 @@ page AdvancedSelectDetail {
       "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",
@@ -655,7 +664,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-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="AdvancedSelect" size="default" label="Multiple selection with counter" name="advanced-select-9" value="" values="[&quot;design&quot;,&quot;engineering&quot;]" 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="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="true" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><AdvancedSelect size="default" label="Multiple selection with counter" name="advanced-select-9" value="" values='["design","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","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="true" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Multiple selection with counter usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -673,7 +683,7 @@ page AdvancedSelectDetail {
       "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 +691,7 @@ page AdvancedSelectDetail {
       "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 +699,7 @@ page AdvancedSelectDetail {
       "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",
@@ -716,7 +726,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-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="AdvancedSelect" size="default" label="Multiple selection with conditional counter" name="advanced-select-10" value="" values="[&quot;design&quot;,&quot;engineering&quot;]" 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="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="3" showCounter="true" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><AdvancedSelect size="default" label="Multiple selection with conditional counter" name="advanced-select-10" value="" values='["design","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","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="3" showCounter="true" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Multiple selection with conditional counter usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -734,7 +745,7 @@ page AdvancedSelectDetail {
       "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",
@@ -742,7 +753,7 @@ page AdvancedSelectDetail {
       "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",
@@ -750,7 +761,7 @@ page AdvancedSelectDetail {
       "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",
@@ -778,7 +789,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-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="AdvancedSelect" size="default" label="Counter with option templates" name="advanced-select-11" 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="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="true" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><AdvancedSelect size="default" label="Counter with option templates" name="advanced-select-11" 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="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="true" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Counter with option templates usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -794,7 +806,7 @@ page AdvancedSelectDetail {
       "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",
@@ -802,7 +814,7 @@ page AdvancedSelectDetail {
       "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",
@@ -810,7 +822,7 @@ page AdvancedSelectDetail {
       "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",
@@ -837,7 +849,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-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="AdvancedSelect" size="default" label="Searchable dropdown" name="advanced-select-12" 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="demo-render"><AdvancedSelect size="default" label="Searchable dropdown" name="advanced-select-12" 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>
           <section class="demo-code" aria-label="Searchable dropdown usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -853,7 +866,7 @@ page AdvancedSelectDetail {
       "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",
@@ -861,7 +874,7 @@ page AdvancedSelectDetail {
       "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",
@@ -869,7 +882,7 @@ page AdvancedSelectDetail {
       "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",
@@ -893,7 +906,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-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="AdvancedSelect" size="default" label="Minimum search length" name="advanced-select-13" 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="3" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><AdvancedSelect size="default" label="Minimum search length" name="advanced-select-13" 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="3" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" 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>
@@ -909,7 +923,7 @@ page AdvancedSelectDetail {
       "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",
@@ -917,7 +931,7 @@ page AdvancedSelectDetail {
       "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",
@@ -925,7 +939,7 @@ page AdvancedSelectDetail {
       "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",
@@ -950,7 +964,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-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="AdvancedSelect" size="default" label="Search result limit" name="advanced-select-14" 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="3" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><AdvancedSelect size="default" label="Search result limit" name="advanced-select-14" 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="3" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" 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>
@@ -966,7 +981,7 @@ page AdvancedSelectDetail {
       "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",
@@ -974,7 +989,7 @@ page AdvancedSelectDetail {
       "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",
@@ -982,7 +997,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1007,7 +1022,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-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="AdvancedSelect" size="default" label="Scroll to selected option" name="advanced-select-15" 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="false" 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="demo-render"><AdvancedSelect size="default" label="Scroll to selected option" name="advanced-select-15" 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="false" 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>
           <section class="demo-code" aria-label="Scroll to selected option usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -1023,7 +1039,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1031,7 +1047,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1039,7 +1055,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1064,7 +1080,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-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="AdvancedSelect" size="default" label="Search match mode" name="advanced-select-16" 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="startsWith" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><AdvancedSelect size="default" label="Search match mode" name="advanced-select-16" 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="startsWith" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Search match mode usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -1080,7 +1097,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1088,7 +1105,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1096,7 +1113,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1121,7 +1138,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-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="AdvancedSelect" size="default" label="Search labels and descriptions" name="advanced-select-17" 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="demo-render"><AdvancedSelect size="default" label="Search labels and descriptions" name="advanced-select-17" 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>
           <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>
@@ -1137,7 +1155,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1145,7 +1163,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1153,7 +1171,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1177,7 +1195,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-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="AdvancedSelect" size="default" label="Tag-style selection" name="advanced-select-18" 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="false" allowEmpty="false" tags="true" 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="demo-render"><AdvancedSelect size="default" label="Tag-style selection" name="advanced-select-18" 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="false" allowEmpty="false" tags="true" 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>
           <section class="demo-code" aria-label="Tag-style selection usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -1193,7 +1212,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1201,7 +1220,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1209,7 +1228,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1235,7 +1254,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-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="AdvancedSelect" size="default" label="Disabled tag selection" name="advanced-select-19" 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="false" allowEmpty="false" tags="true" disabled="true" 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="demo-render"><AdvancedSelect size="default" label="Disabled tag selection" name="advanced-select-19" 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="false" allowEmpty="false" tags="true" disabled="true" 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>
           <section class="demo-code" aria-label="Disabled tag selection usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -1251,7 +1271,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1259,7 +1279,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1267,7 +1287,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1294,7 +1314,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-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="AdvancedSelect" size="default" label="Option template with icons" name="advanced-select-20" 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="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><AdvancedSelect size="default" label="Option template with icons" name="advanced-select-20" 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="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Option template with icons usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -1310,7 +1331,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1318,7 +1339,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1326,7 +1347,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1352,7 +1373,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-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="AdvancedSelect" size="default" label="Option template with avatars" name="advanced-select-21" 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="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="avatar" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><AdvancedSelect size="default" label="Option template with avatars" name="advanced-select-21" 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="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="avatar" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Option template with avatars usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -1368,7 +1390,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1376,7 +1398,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1384,7 +1406,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1410,7 +1432,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-demo-22" class="demo-canvas demo-canvas--22">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AdvancedSelect" size="default" label="Option template with color indicators" name="advanced-select-22" 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="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="color" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><AdvancedSelect size="default" label="Option template with color indicators" name="advanced-select-22" 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="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="color" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Option template 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>
@@ -1426,7 +1449,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1434,7 +1457,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1442,7 +1465,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1468,7 +1491,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-demo-23" class="demo-canvas demo-canvas--23">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AdvancedSelect" size="lg" label="Advanced select sizes" name="advanced-select-23" 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="false" 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="demo-render"><AdvancedSelect size="lg" label="Advanced select sizes" name="advanced-select-23" 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="false" 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>
           <section class="demo-code" aria-label="Advanced select sizes usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -1485,7 +1509,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1493,7 +1517,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1501,7 +1525,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1526,7 +1550,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-demo-24" class="demo-canvas demo-canvas--24">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AdvancedSelect" size="default" label="Disabled advanced select" name="advanced-select-24" 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="false" allowEmpty="false" tags="false" disabled="true" 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="demo-render"><AdvancedSelect size="default" label="Disabled advanced select" name="advanced-select-24" 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="false" allowEmpty="false" tags="false" disabled="true" 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>
           <section class="demo-code" aria-label="Disabled advanced select usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -1542,7 +1567,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1550,7 +1575,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1558,7 +1583,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1584,7 +1609,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-demo-25" class="demo-canvas demo-canvas--25">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AdvancedSelect" size="default" label="Inside a modal" name="advanced-select-25" 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="false" 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="demo-render"><AdvancedSelect size="default" label="Inside a modal" name="advanced-select-25" 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="false" 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>
           <section class="demo-code" aria-label="Inside a modal usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -1600,7 +1626,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1608,7 +1634,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1616,7 +1642,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1641,7 +1667,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-demo-26" class="demo-canvas demo-canvas--26">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><form data-schema="advanced-select-validation" class="demo-validation-form"><div data-component="AdvancedSelect" size="default" label="Validation states" name="advanced-select-26" 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="false" allowEmpty="false" tags="false" disabled="false" required="true" 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><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
+            
+            <div class="demo-render"><form data-schema="advanced-select-validation" class="demo-validation-form"><AdvancedSelect size="default" label="Validation states" name="advanced-select-26" 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="false" allowEmpty="false" tags="false" disabled="false" required="true" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" 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 states usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -1657,7 +1684,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1665,7 +1692,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1673,7 +1700,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1699,7 +1726,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-demo-27" class="demo-canvas demo-canvas--27">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><form data-schema="advanced-select-dynamic-validation" class="demo-validation-form"><div data-component="AdvancedSelect" size="default" label="Dynamic validation styling" name="advanced-select-27" 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="false" allowEmpty="false" tags="false" disabled="false" required="true" 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><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
+            
+            <div class="demo-render"><form data-schema="advanced-select-dynamic-validation" class="demo-validation-form"><AdvancedSelect size="default" label="Dynamic validation styling" name="advanced-select-27" 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="false" allowEmpty="false" tags="false" disabled="false" required="true" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" 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="Dynamic validation styling usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -1715,7 +1743,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1723,7 +1751,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1731,7 +1759,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1757,7 +1785,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-demo-28" class="demo-canvas demo-canvas--28">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AdvancedSelect" size="default" label="Add or remove options" name="advanced-select-28" 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="false" 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="demo-render"><AdvancedSelect size="default" label="Add or remove options" name="advanced-select-28" 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="false" 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>
           <section class="demo-code" aria-label="Add or remove options usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -1773,7 +1802,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1781,7 +1810,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1789,7 +1818,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1814,7 +1843,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-demo-29" class="demo-canvas demo-canvas--29">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AdvancedSelect" size="default" label="Add or remove options in multiple mode" name="advanced-select-29" value="" values="[&quot;design&quot;,&quot;engineering&quot;]" 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="true" searchable="false" 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="demo-render"><AdvancedSelect size="default" label="Add or remove options in multiple mode" name="advanced-select-29" value="" values='["design","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","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" 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>
           <section class="demo-code" aria-label="Add or remove options in multiple mode usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -1832,7 +1862,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1840,7 +1870,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1848,7 +1878,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1874,7 +1904,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-demo-30" class="demo-canvas demo-canvas--30">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AdvancedSelect" size="default" label="Set a single value programmatically" name="advanced-select-30" 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="false" 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="demo-render"><AdvancedSelect size="default" label="Set a single value programmatically" name="advanced-select-30" 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="false" 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>
           <section class="demo-code" aria-label="Set a single value programmatically usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -1890,7 +1921,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1898,7 +1929,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1906,7 +1937,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1931,7 +1962,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-demo-31" class="demo-canvas demo-canvas--31">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AdvancedSelect" size="default" label="Set multiple values programmatically" name="advanced-select-31" value="" values="[&quot;design&quot;,&quot;engineering&quot;]" 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="true" searchable="false" 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="demo-render"><AdvancedSelect size="default" label="Set multiple values programmatically" name="advanced-select-31" value="" values='["design","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","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="false" 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>
           <section class="demo-code" aria-label="Set multiple values programmatically usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -1949,7 +1981,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1957,7 +1989,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1965,7 +1997,7 @@ page AdvancedSelectDetail {
       "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",
@@ -1991,7 +2023,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-demo-32" class="demo-canvas demo-canvas--32">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AdvancedSelect" size="default" label="Remote data source" name="advanced-select-32" 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="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><AdvancedSelect size="default" label="Remote data source" name="advanced-select-32" 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="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Remote data source usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -2007,7 +2040,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2015,7 +2048,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2023,7 +2056,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2050,7 +2083,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-demo-33" class="demo-canvas demo-canvas--33">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AdvancedSelect" size="default" label="Remote data source (multiple)" name="advanced-select-33" value="" values="[&quot;design&quot;,&quot;engineering&quot;]" 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="true" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><AdvancedSelect size="default" label="Remote data source (multiple)" name="advanced-select-33" value="" values='["design","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","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Remote data source (multiple) usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -2068,7 +2102,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2076,7 +2110,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2084,7 +2118,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2112,7 +2146,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-demo-34" class="demo-canvas demo-canvas--34">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AdvancedSelect" size="default" label="Remote data tags" name="advanced-select-34" value="" values="[&quot;design&quot;,&quot;engineering&quot;]" 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="true" searchable="true" allowEmpty="false" tags="true" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><AdvancedSelect size="default" label="Remote data tags" name="advanced-select-34" value="" values='["design","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","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="true" searchable="true" allowEmpty="false" tags="true" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Remote data tags usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -2130,7 +2165,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2138,7 +2173,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2146,7 +2181,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2175,7 +2210,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-demo-35" class="demo-canvas demo-canvas--35">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AdvancedSelect" size="default" label="Option templates with remote data" name="advanced-select-35" 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="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="icon" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><AdvancedSelect size="default" label="Option templates with remote data" name="advanced-select-35" 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="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="icon" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Option templates with remote data usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -2191,7 +2227,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2199,7 +2235,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2207,7 +2243,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2235,7 +2271,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-demo-36" class="demo-canvas demo-canvas--36">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AdvancedSelect" size="default" label="Conditional counter with remote data" name="advanced-select-36" 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="2" searchResultLimit="0" maxSelections="3" showCounter="true" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><AdvancedSelect size="default" label="Conditional counter with remote data" name="advanced-select-36" 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="2" searchResultLimit="0" maxSelections="3" showCounter="true" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Conditional counter with remote data usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -2251,7 +2288,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2259,7 +2296,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2267,7 +2304,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2296,7 +2333,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-demo-37" class="demo-canvas demo-canvas--37">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AdvancedSelect" size="default" label="Avatar template with remote data" name="advanced-select-37" 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="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="avatar" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><AdvancedSelect size="default" label="Avatar template with remote data" name="advanced-select-37" 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="2" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="avatar" fixed="false" remote="true" remoteUrl="/api/teams" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Avatar template with remote data usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -2312,7 +2350,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2320,7 +2358,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2328,7 +2366,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2356,7 +2394,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-demo-38" class="demo-canvas demo-canvas--38">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AdvancedSelect" size="default" label="Preselected values" name="advanced-select-38" value="engineering" 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="false" 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="demo-render"><AdvancedSelect size="default" label="Preselected values" name="advanced-select-38" value="engineering" 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="false" 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>
           <section class="demo-code" aria-label="Preselected values usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -2372,7 +2411,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2380,7 +2419,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2388,7 +2427,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2413,7 +2452,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-demo-39" class="demo-canvas demo-canvas--39">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AdvancedSelect" size="default" label="Infinite scroll" name="advanced-select-39" 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="true" remoteUrl="/api/teams" infinite="true" hasMore="true"></div></div>
+            
+            <div class="demo-render"><AdvancedSelect size="default" label="Infinite scroll" name="advanced-select-39" 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="true" remoteUrl="/api/teams" infinite="true" hasMore="true" /></div>
           </div>
           <section class="demo-code" aria-label="Infinite scroll usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -2429,7 +2469,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2437,7 +2477,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2445,7 +2485,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2473,7 +2513,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-demo-40" class="demo-canvas demo-canvas--40">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AdvancedSelect" size="default" label="Inside overflow-hidden containers" name="advanced-select-40" 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="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="true" remote="false" remoteUrl="" infinite="false" hasMore="false"></div></div>
+            
+            <div class="demo-render"><AdvancedSelect size="default" label="Inside overflow-hidden containers" name="advanced-select-40" 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="false" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="true" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
           </div>
           <section class="demo-code" aria-label="Inside overflow-hidden containers usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -2489,7 +2530,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2497,7 +2538,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2505,7 +2546,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2531,7 +2572,8 @@ page AdvancedSelectDetail {
         <div class="demo-workbench">
           <div id="advanced-select-demo-41" class="demo-canvas demo-canvas--41">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AdvancedSelect" size="default" label="Destroy and reinitialize" name="advanced-select-41" 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="false" 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="demo-render"><AdvancedSelect size="default" label="Destroy and reinitialize" name="advanced-select-41" 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="false" 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>
           <section class="demo-code" aria-label="Destroy and reinitialize usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -2547,7 +2589,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2555,7 +2597,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2563,7 +2605,7 @@ page AdvancedSelectDetail {
       "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",
@@ -2580,11 +2622,48 @@ page AdvancedSelectDetail {
           </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;AdvancedSelect
+  @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=\"AdvancedSelect\"], [data-component=\"AdvancedSelect\"]")
 
-component.addEventListener('search', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("search", (event) =&gt; &#123;
+  console.log("search", event.detail)
+&#125;)
+
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+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>"Advanced Select"</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>values</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>"Select an option"</code></td><td>No</td></tr><tr><td><code>placeholderIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>searchPlaceholder</code></td><td>string</td><td><code>"Search options…"</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>searchable</code></td><td>boolean</td><td><code>true</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>clearable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>allowEmpty</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>tags</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 options…"</code></td><td>No</td></tr><tr><td><code>emptyLabel</code></td><td>string</td><td><code>"No options found"</code></td><td>No</td></tr><tr><td><code>selectedOptionsLabel</code></td><td>string</td><td><code>"Selected options"</code></td><td>No</td></tr><tr><td><code>clearLabel</code></td><td>string</td><td><code>"Clear selection"</code></td><td>No</td></tr><tr><td><code>createLabel</code></td><td>string</td><td><code>"Create"</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>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>maxSelections</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>showCounter</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>counterTemplate</code></td><td>string</td><td><code>"&#123;selected&#125; selected"</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>selectedTemplate</code></td><td>string</td><td><code>"default"</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>scrollToSelected</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>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>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
diff --git a/examples/component-showcase/app/pages/components/alert.wrn b/examples/component-showcase/app/pages/components/alert.wrn
index 4f9728a7..dada0fb1 100644
--- a/examples/component-showcase/app/pages/components/alert.wrn
+++ b/examples/component-showcase/app/pages/components/alert.wrn
@@ -2,26 +2,26 @@
 page AlertDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
-  state playground_color = ctx.url.searchParams.get("pg_color") ?? "dark"
-  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
-  state playground_radius = ctx.url.searchParams.get("pg_radius") ?? "lg"
+  state playground_color = ctx.url.searchParams.get("pg_color") ?? "info"
+  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "soft"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+  state playground_radius = ctx.url.searchParams.get("pg_radius") ?? "md"
   state playground_shadow = ctx.url.searchParams.get("pg_shadow") ?? "sm"
-  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Dark alert!"
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? "You should check in on some of those fields below."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[]"
-  state playground_actions = ctx.url.searchParams.get("pg_actions") ?? "[]"
-  state playground_showIcon = ctx.url.searchParams.get("pg_showIcon") ?? "false"
+  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Alert example"
+  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default alert for a modern application."
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_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\"]}]")
+  state playground_actions = JSON.parse(ctx.url.searchParams.get("pg_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\"]}]")
+  state playground_showIcon = (ctx.url.searchParams.get("pg_showIcon") ?? "true") === "true"
   state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
-  state playground_dismissible = ctx.url.searchParams.get("pg_dismissible") ?? "false"
-  state playground_dismissLabel = ctx.url.searchParams.get("pg_dismissLabel") ?? "Dismiss alert"
+  state playground_dismissible = (ctx.url.searchParams.get("pg_dismissible") ?? "true") === "true"
+  state playground_dismissLabel = ctx.url.searchParams.get("pg_dismissLabel") ?? "Alert"
   state playground_role = ctx.url.searchParams.get("pg_role") ?? "alert"
   state playground_live = ctx.url.searchParams.get("pg_live") ?? "polite"
-  state playground_linkLabel = ctx.url.searchParams.get("pg_linkLabel") ?? ""
-  state playground_linkHref = ctx.url.searchParams.get("pg_linkHref") ?? ""
-  state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? ""
-  state playground_actionHref = ctx.url.searchParams.get("pg_actionHref") ?? ""
-  state playground_compact = ctx.url.searchParams.get("pg_compact") ?? "true"
+  state playground_linkLabel = ctx.url.searchParams.get("pg_linkLabel") ?? "Alert"
+  state playground_linkHref = ctx.url.searchParams.get("pg_linkHref") ?? "#alert-demo"
+  state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Alert"
+  state playground_actionHref = ctx.url.searchParams.get("pg_actionHref") ?? "#alert-demo"
+  state playground_compact = (ctx.url.searchParams.get("pg_compact") ?? "false") === "true"
   seo {
     title = "Alert"
     description = "Theme-aware, responsive alert component."
@@ -39,30 +39,462 @@ page AlertDetail {
       </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="Alert" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Alert" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="dismiss,action">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Alert</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="Alert" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" class="{playground_class}" radius="{playground_radius}" shadow="{playground_shadow}" title="{playground_title}" description="{playground_description}" items="{playground_items}" actions="{playground_actions}" showIcon="{playground_showIcon}" icon="{playground_icon}" dismissible="{playground_dismissible}" dismissLabel="{playground_dismissLabel}" role="{playground_role}" live="{playground_live}" linkLabel="{playground_linkLabel}" linkHref="{playground_linkHref}" actionLabel="{playground_actionLabel}" actionHref="{playground_actionHref}" compact="{playground_compact}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Alert size='{playground_size}' color='{playground_color}' variant='{playground_variant}' class='{playground_class}' radius='{playground_radius}' shadow='{playground_shadow}' title='{playground_title}' description='{playground_description}' items='{playground_items}' actions='{playground_actions}' showIcon='{playground_showIcon}' icon='{playground_icon}' dismissible='{playground_dismissible}' dismissLabel='{playground_dismissLabel}' role='{playground_role}' live='{playground_live}' linkLabel='{playground_linkLabel}' linkHref='{playground_linkHref}' actionLabel='{playground_actionLabel}' actionHref='{playground_actionHref}' compact='{playground_compact}' /></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;Alert
-  color="dark"
-  variant="solid"
-  radius="lg"
-  title="Dark alert!"
-  description="You should check in on some of those fields below."
-  items='[]'
-  actions='[]'
-  compact="true"
+  title="Alert example"
+  description="A polished default alert for a modern application."
+  items='[
+    &#123;
+      "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": [
+        &#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": "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": [
+        &#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;
+  ]'
+  actions='[
+    &#123;
+      "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": [
+        &#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": "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": [
+        &#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;
+  ]'
+  showIcon="true"
+  dismissible="true"
+  dismissLabel="Alert"
+  linkLabel="Alert"
+  linkHref="#alert-demo"
+  actionLabel="Alert"
+  actionHref="#alert-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>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-alert-size"><span><strong>size</strong><small>string</small></span><select id="playground-alert-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-alert-color"><span><strong>color</strong><small>string</small></span><select id="playground-alert-color" name="pg_color"><option value="dark" selected>dark</option><option value="info">info</option><option value="primary">primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option></select></label><label class="playground-field" for="playground-alert-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-alert-variant" name="pg_variant"><option value="solid" selected>solid</option><option value="soft">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></select></label><label class="playground-field" for="playground-alert-class"><span><strong>class</strong><small>string</small></span><input id="playground-alert-class" name="pg_class" type="text" value="" /></label><label class="playground-field" for="playground-alert-radius"><span><strong>radius</strong><small>string</small></span><input id="playground-alert-radius" name="pg_radius" type="text" value="lg" /></label><label class="playground-field" for="playground-alert-shadow"><span><strong>shadow</strong><small>string</small></span><input id="playground-alert-shadow" name="pg_shadow" type="text" value="sm" /></label><label class="playground-field" for="playground-alert-title"><span><strong>title</strong><small>string</small></span><input id="playground-alert-title" name="pg_title" type="text" value="Dark alert!" /></label><label class="playground-field" for="playground-alert-description"><span><strong>description</strong><small>string</small></span><input id="playground-alert-description" name="pg_description" type="text" value="You should check in on some of those fields below." /></label><label class="playground-field" for="playground-alert-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-alert-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-alert-actions"><span><strong>actions</strong><small>string</small></span><textarea id="playground-alert-actions" name="pg_actions" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-alert-showIcon"><span><strong>show Icon</strong><small>boolean</small></span><input id="playground-alert-showIcon" name="pg_showIcon" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-alert-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-alert-icon" name="pg_icon" type="text" value="" /></label><label class="playground-toggle" for="playground-alert-dismissible"><span><strong>dismissible</strong><small>boolean</small></span><input id="playground-alert-dismissible" name="pg_dismissible" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-alert-dismissLabel"><span><strong>dismiss Label</strong><small>string</small></span><input id="playground-alert-dismissLabel" name="pg_dismissLabel" type="text" value="Dismiss alert" /></label><label class="playground-field" for="playground-alert-role"><span><strong>role</strong><small>string</small></span><input id="playground-alert-role" name="pg_role" type="text" value="alert" /></label><label class="playground-field" for="playground-alert-live"><span><strong>live</strong><small>string</small></span><input id="playground-alert-live" name="pg_live" type="text" value="polite" /></label><label class="playground-field" for="playground-alert-linkLabel"><span><strong>link Label</strong><small>string</small></span><input id="playground-alert-linkLabel" name="pg_linkLabel" type="text" value="" /></label><label class="playground-field" for="playground-alert-linkHref"><span><strong>link Href</strong><small>string</small></span><input id="playground-alert-linkHref" name="pg_linkHref" type="text" value="" /></label><label class="playground-field" for="playground-alert-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-alert-actionLabel" name="pg_actionLabel" type="text" value="" /></label><label class="playground-field" for="playground-alert-actionHref"><span><strong>action Href</strong><small>string</small></span><input id="playground-alert-actionHref" name="pg_actionHref" type="text" value="" /></label><label class="playground-toggle" for="playground-alert-compact"><span><strong>compact</strong><small>boolean</small></span><input id="playground-alert-compact" name="pg_compact" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-alert-size"><span><strong>size</strong><small>string</small></span><select id="playground-alert-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-alert-color"><span><strong>color</strong><small>string</small></span><select id="playground-alert-color" name="pg_color"><option value="info" selected>info</option><option value="primary">primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option></select></label><label class="playground-field" for="playground-alert-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-alert-variant" name="pg_variant" type="text" value="soft" /></label><label class="playground-field" for="playground-alert-class"><span><strong>class</strong><small>string</small></span><input id="playground-alert-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label><label class="playground-field" for="playground-alert-radius"><span><strong>radius</strong><small>string</small></span><input id="playground-alert-radius" name="pg_radius" type="text" value="md" /></label><label class="playground-field" for="playground-alert-shadow"><span><strong>shadow</strong><small>string</small></span><input id="playground-alert-shadow" name="pg_shadow" type="text" value="sm" /></label><label class="playground-field" for="playground-alert-title"><span><strong>title</strong><small>string</small></span><input id="playground-alert-title" name="pg_title" type="text" value="Alert example" /></label><label class="playground-field" for="playground-alert-description"><span><strong>description</strong><small>string</small></span><input id="playground-alert-description" name="pg_description" type="text" value="A polished default alert for a modern application." /></label><label class="playground-field" for="playground-alert-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-alert-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+  {
+    "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"
+    ]
+  }
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-alert-actions"><span><strong>actions</strong><small>string</small></span><textarea id="playground-alert-actions" name="pg_actions" rows="5" spellcheck="false" data-playground-json>[
+  {
+    "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"
+    ]
+  }
+]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-alert-showIcon"><span><strong>show Icon</strong><small>boolean</small></span><input id="playground-alert-showIcon" name="pg_showIcon" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-alert-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-alert-icon" name="pg_icon" type="text" value="" /></label><label class="playground-toggle" for="playground-alert-dismissible"><span><strong>dismissible</strong><small>boolean</small></span><input id="playground-alert-dismissible" name="pg_dismissible" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-alert-dismissLabel"><span><strong>dismiss Label</strong><small>string</small></span><input id="playground-alert-dismissLabel" name="pg_dismissLabel" type="text" value="Alert" /></label><label class="playground-field" for="playground-alert-role"><span><strong>role</strong><small>string</small></span><input id="playground-alert-role" name="pg_role" type="text" value="alert" /></label><label class="playground-field" for="playground-alert-live"><span><strong>live</strong><small>string</small></span><input id="playground-alert-live" name="pg_live" type="text" value="polite" /></label><label class="playground-field" for="playground-alert-linkLabel"><span><strong>link Label</strong><small>string</small></span><input id="playground-alert-linkLabel" name="pg_linkLabel" type="text" value="Alert" /></label><label class="playground-field" for="playground-alert-linkHref"><span><strong>link Href</strong><small>string</small></span><input id="playground-alert-linkHref" name="pg_linkHref" type="text" value="#alert-demo" /></label><label class="playground-field" for="playground-alert-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-alert-actionLabel" name="pg_actionLabel" type="text" value="Alert" /></label><label class="playground-field" for="playground-alert-actionHref"><span><strong>action Href</strong><small>string</small></span><input id="playground-alert-actionHref" name="pg_actionHref" type="text" value="#alert-demo" /></label><label class="playground-toggle" for="playground-alert-compact"><span><strong>compact</strong><small>boolean</small></span><input id="playground-alert-compact" name="pg_compact" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label></div>
         </form>
       </div>
     </section>
@@ -71,49 +503,489 @@ page AlertDetail {
         <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">Solid colors</span><h2>Dark solid alert</h2><p>Live dark solid alert with accessible semantics and copyable component code.</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="alert-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="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="demo-render"><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>
-          <section class="demo-code" aria-label="Dark solid alert 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;Alert
-  color="dark"
-  variant="solid"
-  radius="lg"
-  title="Dark alert!"
-  description="You should check in on some of those fields below."
-  items='[]'
-  actions='[]'
-  compact="true"
+  title="Alert example"
+  description="A polished default alert for a modern application."
+  items='[
+    &#123;
+      "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": [
+        &#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": "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": [
+        &#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;
+  ]'
+  actions='[
+    &#123;
+      "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": [
+        &#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": "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": [
+        &#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;
+  ]'
+  showIcon="true"
+  dismissible="true"
+  dismissLabel="Alert"
+  linkLabel="Alert"
+  linkHref="#alert-demo"
+  actionLabel="Alert"
+  actionHref="#alert-demo"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Solid colors</span><h2>Secondary solid alert</h2><p>Live secondary solid alert with accessible semantics and copyable component code.</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="alert-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="Alert" color="secondary" variant="solid" radius="lg" shadow="sm" title="Secondary 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="demo-render"><Alert size="sm" variant="secondary" class="showcase-instance showcase-instance--2" title="Compact Alert" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"alert-1-1","key":"alert-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":"#alert-demo","actionHref":"#alert-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":"alert-1-2","key":"alert-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#alert-demo","actionHref":"#alert-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":"alert-1-1","key":"alert-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":"#alert-demo","actionHref":"#alert-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":"alert-1-2","key":"alert-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#alert-demo","actionHref":"#alert-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"]}]' showIcon="true" icon="icon-[lucide--arrow-right]" dismissible="true" dismissLabel="Compact example" linkLabel="Compact example" linkHref="#alert-demo" actionLabel="Compact example" actionHref="#alert-demo" compact="true" /></div>
           </div>
-          <section class="demo-code" aria-label="Secondary solid alert 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;Alert
-  color="secondary"
-  variant="solid"
-  radius="lg"
-  title="Secondary alert!"
-  description="You should check in on some of those fields below."
-  items='[]'
-  actions='[]'
+  size="sm"
+  variant="secondary"
+  title="Compact Alert"
+  description="A compact configuration for dashboards and dense product surfaces."
+  items='[
+    &#123;
+      "id": "alert-1-1",
+      "key": "alert-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": "#alert-demo",
+      "actionHref": "#alert-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": "alert-1-2",
+      "key": "alert-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#alert-demo",
+      "actionHref": "#alert-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;
+  ]'
+  actions='[
+    &#123;
+      "id": "alert-1-1",
+      "key": "alert-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": "#alert-demo",
+      "actionHref": "#alert-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": "alert-1-2",
+      "key": "alert-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#alert-demo",
+      "actionHref": "#alert-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;
+  ]'
+  showIcon="true"
+  icon="icon-[lucide--arrow-right]"
+  dismissible="true"
+  dismissLabel="Compact example"
+  linkLabel="Compact example"
+  linkHref="#alert-demo"
+  actionLabel="Compact example"
+  actionHref="#alert-demo"
   compact="true"
 /&gt;</code></pre>
           </section>
@@ -121,343 +993,266 @@ page AlertDetail {
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Solid colors</span><h2>Info solid alert</h2><p>Live info solid alert with accessible semantics and copyable component code.</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="alert-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="Alert" color="info" variant="solid" radius="lg" shadow="sm" title="Info 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="demo-render"><Alert size="lg" variant="success" class="showcase-instance showcase-instance--3" title="Advanced Alert" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"alert-2-1","key":"alert-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":"#alert-demo","actionHref":"#alert-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":"alert-2-2","key":"alert-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":"#alert-demo","actionHref":"#alert-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":"alert-2-1","key":"alert-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":"#alert-demo","actionHref":"#alert-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":"alert-2-2","key":"alert-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":"#alert-demo","actionHref":"#alert-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"]}]' showIcon="true" icon="icon-[lucide--trash-2]" dismissible="true" dismissLabel="Advanced example" linkLabel="Advanced example" linkHref="#alert-demo" actionLabel="Advanced example" actionHref="#alert-demo" compact="false" /></div>
           </div>
-          <section class="demo-code" aria-label="Info solid alert 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;Alert
-  variant="solid"
-  radius="lg"
-  title="Info alert!"
-  description="You should check in on some of those fields below."
-  items='[]'
-  actions='[]'
-  compact="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Solid colors</span><h2>Success solid alert</h2><p>Live success solid alert with accessible semantics and copyable component code.</p></div>
-          <span class="demo-case-number">04</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="alert-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="Alert" color="success" variant="solid" radius="lg" shadow="sm" title="Success 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>
-          <section class="demo-code" aria-label="Success solid 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;Alert
-  color="success"
-  variant="solid"
-  radius="lg"
-  title="Success alert!"
-  description="You should check in on some of those fields below."
-  items='[]'
-  actions='[]'
-  compact="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Solid colors</span><h2>Danger solid alert</h2><p>Live danger solid alert with accessible semantics and copyable component code.</p></div>
-          <span class="demo-case-number">05</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="alert-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="Alert" color="danger" variant="solid" radius="lg" shadow="sm" title="Danger 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>
-          <section class="demo-code" aria-label="Danger solid 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;Alert
-  color="danger"
-  variant="solid"
-  radius="lg"
-  title="Danger alert!"
-  description="You should check in on some of those fields below."
-  items='[]'
-  actions='[]'
-  compact="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Solid colors</span><h2>Warning solid alert</h2><p>Live warning solid alert with accessible semantics and copyable component code.</p></div>
-          <span class="demo-case-number">06</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="alert-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="Alert" color="warning" variant="solid" radius="lg" shadow="sm" title="Warning 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>
-          <section class="demo-code" aria-label="Warning solid 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;Alert
-  color="warning"
-  variant="solid"
-  radius="lg"
-  title="Warning alert!"
-  description="You should check in on some of those fields below."
-  items='[]'
-  actions='[]'
-  compact="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Solid colors</span><h2>Light solid alert</h2><p>Live light solid alert with accessible semantics and copyable component code.</p></div>
-          <span class="demo-case-number">07</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="alert-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="Alert" color="light" variant="solid" radius="lg" shadow="sm" title="Light 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>
-          <section class="demo-code" aria-label="Light solid 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;Alert
-  color="light"
-  variant="solid"
-  radius="lg"
-  title="Light alert!"
-  description="You should check in on some of those fields below."
-  items='[]'
-  actions='[]'
-  compact="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>Soft color alert</h2><p>Live soft color alert with accessible semantics and copyable component code.</p></div>
-          <span class="demo-case-number">08</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="alert-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="Alert" color="info" variant="soft" radius="md" shadow="sm" title="A new software update is available." description="See what is new in version 3.0.7." items="[]" actions="[]" showIcon="true" dismissible="false" linkLabel="" linkHref="" actionLabel="" actionHref="" compact="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Soft color 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;Alert
-  title="A new software update is available."
-  description="See what is new in version 3.0.7."
-  items='[]'
-  actions='[]'
-  showIcon="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>With supporting text</h2><p>Live with supporting text with accessible semantics and copyable component code.</p></div>
-          <span class="demo-case-number">09</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="alert-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="Alert" color="info" variant="accent" radius="md" shadow="sm" title="Successfully updated." description="You have successfully updated your email preferences." items="[]" actions="[]" showIcon="true" dismissible="false" linkLabel="" linkHref="" actionLabel="" actionHref="" compact="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="With supporting 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;Alert
-  variant="accent"
-  title="Successfully updated."
-  description="You have successfully updated your email preferences."
-  items='[]'
-  actions='[]'
-  showIcon="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>With a list</h2><p>Live with a list with accessible semantics and copyable component code.</p></div>
-          <span class="demo-case-number">010</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="alert-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="Alert" color="info" variant="soft" radius="md" shadow="sm" title="A problem occurred while submitting your data." description="" items="[{&quot;label&quot;:&quot;This username is already in use&quot;},{&quot;label&quot;:&quot;Email field cannot be empty&quot;},{&quot;label&quot;:&quot;Please enter a valid phone number&quot;}]" actions="[]" showIcon="true" dismissible="false" linkLabel="" linkHref="" actionLabel="" actionHref="" compact="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="With a 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;Alert
-  title="A problem occurred while submitting your data."
+  size="lg"
+  variant="success"
+  title="Advanced Alert"
+  description="A richer configuration demonstrating additional content and hierarchy."
   items='[
     &#123;
-      "label": "This username is already in use"
+      "id": "alert-2-1",
+      "key": "alert-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": "#alert-demo",
+      "actionHref": "#alert-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": "Email field cannot be empty"
-    &#125;,
-    &#123;
-      "label": "Please enter a valid phone number"
+      "id": "alert-2-2",
+      "key": "alert-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": "#alert-demo",
+      "actionHref": "#alert-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;
   ]'
-  actions='[]'
-  showIcon="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>With actions</h2><p>Live with actions with accessible semantics and copyable component code.</p></div>
-          <span class="demo-case-number">011</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="alert-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="Alert" color="info" variant="soft" radius="md" shadow="sm" title="YouTube would like to send notifications" description="Notifications may include alerts, sounds, and icon badges. These can be configured in Settings." items="[]" actions="[{&quot;label&quot;:&quot;Don&#39;t allow&quot;,&quot;href&quot;:&quot;#deny&quot;},{&quot;label&quot;:&quot;Allow&quot;,&quot;href&quot;:&quot;#allow&quot;}]" showIcon="true" dismissible="false" linkLabel="" linkHref="" actionLabel="" actionHref="" compact="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="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;Alert
-  title="YouTube would like to send notifications"
-  description="Notifications may include alerts, sounds, and icon badges. These can be configured in Settings."
-  items='[]'
   actions='[
     &#123;
-      "label": "Don\'t allow",
-      "href": "#deny"
+      "id": "alert-2-1",
+      "key": "alert-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": "#alert-demo",
+      "actionHref": "#alert-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": "Allow",
-      "href": "#allow"
+      "id": "alert-2-2",
+      "key": "alert-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": "#alert-demo",
+      "actionHref": "#alert-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;
   ]'
   showIcon="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Actions & states</span><h2>Right-aligned link</h2><p>Live right-aligned link with accessible semantics and copyable component code.</p></div>
-          <span class="demo-case-number">012</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="alert-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="Alert" color="info" variant="soft" radius="md" shadow="sm" title="A new software update is available." description="See what is new in version 3.0.7." items="[]" actions="[]" showIcon="true" dismissible="false" linkLabel="Details" linkHref="#details" actionLabel="" actionHref="" compact="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Right-aligned 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;Alert
-  title="A new software update is available."
-  description="See what is new in version 3.0.7."
-  items='[]'
-  actions='[]'
-  showIcon="true"
-  linkLabel="Details"
-  linkHref="#details"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Actions & states</span><h2>Discovery notice</h2><p>Live discovery notice with accessible semantics and copyable component code.</p></div>
-          <span class="demo-case-number">013</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="alert-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="Alert" color="info" variant="soft" radius="xl" shadow="md" title="New version published" description="A new version of this page was published. Refresh to see the changes." items="[]" actions="[]" showIcon="true" dismissible="false" linkLabel="Refresh" linkHref="#refresh" actionLabel="" actionHref="" compact="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Discovery 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;Alert
-  radius="xl"
-  shadow="md"
-  title="New version published"
-  description="A new version of this page was published. Refresh to see the changes."
-  items='[]'
-  actions='[]'
-  showIcon="true"
-  linkLabel="Refresh"
-  linkHref="#refresh"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Actions & states</span><h2>Bordered alert</h2><p>Live bordered alert with accessible semantics and copyable component code.</p></div>
-          <span class="demo-case-number">014</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="alert-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="Alert" color="info" variant="bordered" radius="md" shadow="none" title="A new software update is available." description="See what is new in version 3.0.7." items="[]" actions="[]" showIcon="true" dismissible="false" linkLabel="" linkHref="" actionLabel="" actionHref="" compact="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Bordered 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;Alert
-  variant="bordered"
-  shadow="none"
-  title="A new software update is available."
-  description="See what is new in version 3.0.7."
-  items='[]'
-  actions='[]'
-  showIcon="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Actions & states</span><h2>Dismissible alert</h2><p>Live dismissible alert with accessible semantics and copyable component code.</p></div>
-          <span class="demo-case-number">015</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="alert-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="Alert" color="info" variant="soft" radius="md" shadow="sm" title="Requires JavaScript" description="This page requires an optional plugin. You can skip this step if it is already installed." items="[]" actions="[]" showIcon="true" dismissible="true" linkLabel="" linkHref="" actionLabel="Learn more" actionHref="#learn-more" compact="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Dismissible 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;Alert
-  title="Requires JavaScript"
-  description="This page requires an optional plugin. You can skip this step if it is already installed."
-  items='[]'
-  actions='[]'
-  showIcon="true"
+  icon="icon-[lucide--trash-2]"
   dismissible="true"
-  actionLabel="Learn more"
-  actionHref="#learn-more"
+  dismissLabel="Advanced example"
+  linkLabel="Advanced example"
+  linkHref="#alert-demo"
+  actionLabel="Advanced example"
+  actionHref="#alert-demo"
 /&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><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>@dismiss</code><span>Fires after the announcement or feedback surface is dismissed.</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;Alert
+  @dismiss='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=\"Alert\"], [data-component=\"Alert\"]")
 
-component.addEventListener('dismiss', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("dismiss", (event) =&gt; &#123;
+  console.log("dismiss", 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>"info"</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>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>radius</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>shadow</code></td><td>string</td><td><code>"sm"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Alert"</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>actions</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>showIcon</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>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 alert"</code></td><td>No</td></tr><tr><td><code>role</code></td><td>string</td><td><code>"alert"</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>linkLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>linkHref</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>actionHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>compact</code></td><td>boolean</td><td><code>false</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="#alert-demo-1">Dark solid alert</a><a href="#alert-demo-2">Secondary solid alert</a><a href="#alert-demo-3">Info solid alert</a><a href="#alert-demo-4">Success solid alert</a><a href="#alert-demo-5">Danger solid alert</a><a href="#alert-demo-6">Warning solid alert</a><a href="#alert-demo-7">Light solid alert</a><a href="#alert-demo-8">Soft color alert</a><a href="#alert-demo-9">With supporting text</a><a href="#alert-demo-10">With a list</a><a href="#alert-demo-11">With actions</a><a href="#alert-demo-12">Right-aligned link</a><a href="#alert-demo-13">Discovery notice</a><a href="#alert-demo-14">Bordered alert</a><a href="#alert-demo-15">Dismissible alert</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="#alert-demo-1">Production default</a><a href="#alert-demo-2">Compact application</a><a href="#alert-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/announcement-bar.wrn b/examples/component-showcase/app/pages/components/announcement-bar.wrn
index 91c8ba55..01d09a3e 100644
--- a/examples/component-showcase/app/pages/components/announcement-bar.wrn
+++ b/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_compact = ctx.url.searchParams.get("pg_compact") ?? "false"
+  state playground_sticky = (ctx.url.searchParams.get("pg_sticky") ?? "false") === "true"
+  state playground_compact = (ctx.url.searchParams.get("pg_compact") ?? "false") === "true"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
+  state playground_width = ctx.url.searchParams.get("pg_width") ?? "wide"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "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>
-        <div class="detail-badges"><span>18 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <p>Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.</p>
+        <div class="detail-badges"><span>19 props</span><span>0 slots</span><span>1 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>
-          <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="playground-announcement-bar-live"><span><strong>live</strong><small>string</small></span><input id="playground-announcement-bar-live" name="pg_live" type="text" value="polite" /></label><label class="playground-field" for="playground-announcement-bar-class"><span><strong>class</strong><small>string</small></span><input id="playground-announcement-bar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <header><div><span>Component props</span><strong>19 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-announcement-bar-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-announcement-bar-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-announcement-bar-badgeIcon"><span><strong>badge Icon</strong><small>string</small></span><input id="playground-announcement-bar-badgeIcon" name="pg_badgeIcon" type="text" value="" /></label><label class="playground-field" for="playground-announcement-bar-message"><span><strong>message</strong><small>string</small></span><input id="playground-announcement-bar-message" name="pg_message" type="text" value="Announcement" /></label><label class="playground-field" for="playground-announcement-bar-description"><span><strong>description</strong><small>string</small></span><input id="playground-announcement-bar-description" name="pg_description" type="text" value="A polished default announcement bar for a modern application." /></label><label class="playground-field" for="playground-announcement-bar-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-announcement-bar-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-announcement-bar-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-announcement-bar-actionLabel" name="pg_actionLabel" type="text" value="Announcement Bar" /></label><label class="playground-field" for="playground-announcement-bar-actionHref"><span><strong>action Href</strong><small>string</small></span><input id="playground-announcement-bar-actionHref" name="pg_actionHref" type="text" value="#announcement-bar-demo" /></label><label class="playground-field" for="playground-announcement-bar-actionIcon"><span><strong>action Icon</strong><small>string</small></span><input id="playground-announcement-bar-actionIcon" name="pg_actionIcon" type="text" value="" /></label><label class="playground-toggle" for="playground-announcement-bar-dismissible"><span><strong>dismissible</strong><small>boolean</small></span><input id="playground-announcement-bar-dismissible" name="pg_dismissible" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-announcement-bar-dismissLabel"><span><strong>dismiss Label</strong><small>string</small></span><input id="playground-announcement-bar-dismissLabel" name="pg_dismissLabel" type="text" value="Announcement Bar" /></label><label class="playground-toggle" for="playground-announcement-bar-sticky"><span><strong>sticky</strong><small>boolean</small></span><input id="playground-announcement-bar-sticky" name="pg_sticky" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-announcement-bar-compact"><span><strong>compact</strong><small>boolean</small></span><input id="playground-announcement-bar-compact" name="pg_compact" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-announcement-bar-size"><span><strong>size</strong><small>string</small></span><select id="playground-announcement-bar-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="spacious">spacious</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-announcement-bar-width"><span><strong>width</strong><small>string</small></span><select id="playground-announcement-bar-width" name="pg_width"><option value="wide" selected>wide</option><option value="default">default</option><option value="full">full</option><option value="compact">compact</option></select></label><label class="playground-field" for="playground-announcement-bar-color"><span><strong>color</strong><small>string</small></span><select id="playground-announcement-bar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="info">info</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option></select></label><label class="playground-field" for="playground-announcement-bar-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-announcement-bar-variant" name="pg_variant"><option value="solid" selected>solid</option><option value="soft">soft</option><option value="default">default</option><option value="outline">outline</option><option value="minimal">minimal</option></select></label><label class="playground-field" for="playground-announcement-bar-role"><span><strong>role</strong><small>string</small></span><select id="playground-announcement-bar-role" name="pg_role"><option value="status" selected>status</option><option value="alert">alert</option></select></label><label class="playground-field" for="playground-announcement-bar-live"><span><strong>live</strong><small>string</small></span><select id="playground-announcement-bar-live" name="pg_live"><option value="polite" selected>polite</option><option value="off">off</option><option value="assertive">assertive</option></select></label><label class="playground-field" for="playground-announcement-bar-class"><span><strong>class</strong><small>string</small></span><input id="playground-announcement-bar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </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."
-  actionLabel="Announcement Bar"
-  actionHref="#announcement-bar-demo"
+  badge="Public notice"
+  badgeIcon="icon-[lucide--sparkles]"
+  message="All composite components are now available"
+  description="Review each component and its recommended use cases."
+  actionLabel="View components"
+  actionHref="#components"
+  actionIcon="icon-[lucide--arrow-down]"
   dismissible="true"
   dismissLabel="Announcement Bar"
 /&gt;</code></pre>
@@ -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."
-  icon="icon-[lucide--arrow-right]"
-  actionLabel="Compact example"
-  actionHref="#announcement-bar-demo"
+  badge="Release"
+  message="WRNexusJS UI updates are ready"
+  description="Explore the redesigned responsive components."
+  icon="icon-[lucide--rocket]"
+  actionLabel="Read changes"
+  actionHref="#release"
   dismissible="true"
   dismissLabel="Compact example"
   compact="true"
   size="sm"
-  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."
-  icon="icon-[lucide--trash-2]"
-  actionLabel="Advanced example"
-  actionHref="#announcement-bar-demo"
+  badge="Service alert"
+  message="Scheduled maintenance tonight"
+  description="Some services may be temporarily unavailable from 23:00 to 23:30."
+  icon="icon-[lucide--triangle-alert]"
+  actionLabel="View status"
+  actionHref="#status"
   dismissible="true"
   dismissLabel="Advanced example"
   size="lg"
-  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="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>
+        <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
+  @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">
diff --git a/examples/component-showcase/app/pages/components/auth-form.wrn b/examples/component-showcase/app/pages/components/auth-form.wrn
index b6173b1a..0ffdbb61 100644
--- a/examples/component-showcase/app/pages/components/auth-form.wrn
+++ b/examples/component-showcase/app/pages/components/auth-form.wrn
@@ -10,33 +10,33 @@ page AuthFormDetail {
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default auth form for a modern application."
   state playground_returnTo = ctx.url.searchParams.get("pg_returnTo") ?? ""
   state playground_schema = ctx.url.searchParams.get("pg_schema") ?? ""
-  state playground_showRemember = ctx.url.searchParams.get("pg_showRemember") ?? "true"
-  state playground_showName = ctx.url.searchParams.get("pg_showName") ?? "true"
+  state playground_showRemember = (ctx.url.searchParams.get("pg_showRemember") ?? "true") === "true"
+  state playground_showName = (ctx.url.searchParams.get("pg_showName") ?? "true") === "true"
   state playground_submitLabel = ctx.url.searchParams.get("pg_submitLabel") ?? "Auth Form"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Auth Form"
-    description = "Reusable authentication form for sign-in, registration, recovery, reset, and MFA."
+    description = "Reusable auth form component."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/forms">Forms</a><span aria-hidden="true">/</span><span>Auth Form</span>
+      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/core">Core</a><span aria-hidden="true">/</span><span>Auth Form</span>
     </nav>
     <header class="detail-hero">
       <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Forms component</span>
+        <span class="showcase-eyebrow">Core component</span>
         <h1>Auth Form</h1>
-        <p>Reusable authentication form for sign-in, registration, recovery, reset, and MFA.</p>
+        <p>Reusable auth form component.</p>
         <div class="detail-badges"><span>13 props</span><span>1 slots</span><span>5 events</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="AuthForm" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="AuthForm" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="submit,change,input,focus,blur">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Auth Form</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="AuthForm" size="{playground_size}" color="{playground_color}" mode="{playground_mode}" action="{playground_action}" method="{playground_method}" title="{playground_title}" description="{playground_description}" returnTo="{playground_returnTo}" schema="{playground_schema}" showRemember="{playground_showRemember}" showName="{playground_showName}" submitLabel="{playground_submitLabel}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><AuthForm size='{playground_size}' color='{playground_color}' mode='{playground_mode}' action='{playground_action}' method='{playground_method}' title='{playground_title}' description='{playground_description}' returnTo='{playground_returnTo}' schema='{playground_schema}' showRemember='{playground_showRemember}' showName='{playground_showName}' submitLabel='{playground_submitLabel}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;AuthForm
@@ -47,10 +47,11 @@ page AuthFormDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-auth-form-size"><span><strong>size</strong><small>string</small></span><select id="playground-auth-form-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-auth-form-color"><span><strong>color</strong><small>string</small></span><select id="playground-auth-form-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-auth-form-mode"><span><strong>mode</strong><small>string</small></span><select id="playground-auth-form-mode" name="pg_mode"><option value="sign-in" selected>sign-in</option><option value="register">register</option><option value="recover">recover</option><option value="reset">reset</option><option value="mfa">mfa</option></select></label><label class="playground-field" for="playground-auth-form-action"><span><strong>action</strong><small>string</small></span><input id="playground-auth-form-action" name="pg_action" type="text" value="#auth-form-demo" /></label><label class="playground-field" for="playground-auth-form-method"><span><strong>method</strong><small>string</small></span><select id="playground-auth-form-method" name="pg_method"><option value="post" selected>post</option><option value="get">get</option></select></label><label class="playground-field" for="playground-auth-form-title"><span><strong>title</strong><small>string</small></span><input id="playground-auth-form-title" name="pg_title" type="text" value="Auth Form example" /></label><label class="playground-field" for="playground-auth-form-description"><span><strong>description</strong><small>string</small></span><input id="playground-auth-form-description" name="pg_description" type="text" value="A polished default auth form for a modern application." /></label><label class="playground-field" for="playground-auth-form-returnTo"><span><strong>return To</strong><small>string</small></span><input id="playground-auth-form-returnTo" name="pg_returnTo" type="text" value="" /></label><label class="playground-field" for="playground-auth-form-schema"><span><strong>schema</strong><small>string</small></span><input id="playground-auth-form-schema" name="pg_schema" type="text" value="" /></label><label class="playground-toggle" for="playground-auth-form-showRemember"><span><strong>show Remember</strong><small>boolean</small></span><input id="playground-auth-form-showRemember" name="pg_showRemember" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-auth-form-showName"><span><strong>show Name</strong><small>boolean</small></span><input id="playground-auth-form-showName" name="pg_showName" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-auth-form-submitLabel"><span><strong>submit Label</strong><small>string</small></span><input id="playground-auth-form-submitLabel" name="pg_submitLabel" type="text" value="Auth Form" /></label><label class="playground-field" for="playground-auth-form-class"><span><strong>class</strong><small>string</small></span><input id="playground-auth-form-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-auth-form-size"><span><strong>size</strong><small>string</small></span><select id="playground-auth-form-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-auth-form-color"><span><strong>color</strong><small>string</small></span><select id="playground-auth-form-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-auth-form-mode"><span><strong>mode</strong><small>string</small></span><input id="playground-auth-form-mode" name="pg_mode" type="text" value="sign-in" /></label><label class="playground-field" for="playground-auth-form-action"><span><strong>action</strong><small>string</small></span><input id="playground-auth-form-action" name="pg_action" type="text" value="#auth-form-demo" /></label><label class="playground-field" for="playground-auth-form-method"><span><strong>method</strong><small>string</small></span><select id="playground-auth-form-method" name="pg_method"><option value="post" selected>post</option><option value="get">get</option></select></label><label class="playground-field" for="playground-auth-form-title"><span><strong>title</strong><small>string</small></span><input id="playground-auth-form-title" name="pg_title" type="text" value="Auth Form example" /></label><label class="playground-field" for="playground-auth-form-description"><span><strong>description</strong><small>string</small></span><input id="playground-auth-form-description" name="pg_description" type="text" value="A polished default auth form for a modern application." /></label><label class="playground-field" for="playground-auth-form-returnTo"><span><strong>return To</strong><small>string</small></span><input id="playground-auth-form-returnTo" name="pg_returnTo" type="text" value="" /></label><label class="playground-field" for="playground-auth-form-schema"><span><strong>schema</strong><small>string</small></span><input id="playground-auth-form-schema" name="pg_schema" type="text" value="" /></label><label class="playground-toggle" for="playground-auth-form-showRemember"><span><strong>show Remember</strong><small>boolean</small></span><input id="playground-auth-form-showRemember" name="pg_showRemember" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-auth-form-showName"><span><strong>show Name</strong><small>boolean</small></span><input id="playground-auth-form-showName" name="pg_showName" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-auth-form-submitLabel"><span><strong>submit Label</strong><small>string</small></span><input id="playground-auth-form-submitLabel" name="pg_submitLabel" type="text" value="Auth Form" /></label><label class="playground-field" for="playground-auth-form-class"><span><strong>class</strong><small>string</small></span><input id="playground-auth-form-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -65,7 +66,8 @@ page AuthFormDetail {
         <div class="demo-workbench">
           <div id="auth-form-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AuthForm" size="default" action="#auth-form-demo" title="Auth Form example" description="A polished default auth form for a modern application." showRemember="true" showName="true" submitLabel="Auth Form" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><AuthForm size="default" action="#auth-form-demo" title="Auth Form example" description="A polished default auth form for a modern application." showRemember="true" showName="true" submitLabel="Auth Form" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -86,7 +88,8 @@ page AuthFormDetail {
         <div class="demo-workbench">
           <div id="auth-form-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AuthForm" size="sm" action="#auth-form-demo" title="Compact Auth Form" description="A compact configuration for dashboards and dense product surfaces." showRemember="true" showName="true" submitLabel="Compact example" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><AuthForm size="sm" action="#auth-form-demo" title="Compact Auth Form" description="A compact configuration for dashboards and dense product surfaces." showRemember="true" showName="true" submitLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -108,7 +111,8 @@ page AuthFormDetail {
         <div class="demo-workbench">
           <div id="auth-form-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AuthForm" size="lg" action="#auth-form-demo" title="Advanced Auth Form" description="A richer configuration demonstrating additional content and hierarchy." showRemember="true" showName="true" submitLabel="Advanced example" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><AuthForm size="lg" action="#auth-form-demo" title="Advanced Auth Form" description="A richer configuration demonstrating additional content and hierarchy." showRemember="true" showName="true" submitLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -122,11 +126,33 @@ page AuthFormDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@submit</code><span>Fires when the component submits its value.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@focus</code><span>Fires when the component receives focus.</span></div><div><code>@blur</code><span>Fires when focus leaves the component.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@submit</code><span>Fires when the component emits the submit event.</span></div><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div><div><code>@input</code><span>Fires as the editable value changes.</span></div><div><code>@focus</code><span>Fires when the interactive control receives focus.</span></div><div><code>@blur</code><span>Fires when focus leaves the interactive control.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;AuthForm
+  @submit='console.log(event.detail)'
+  @change='console.log(event.detail)'
+  @input='console.log(event.detail)'
+  @focus='console.log(event.detail)'
+  @blur='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"AuthForm\"], [data-component=\"AuthForm\"]")
 
-component.addEventListener('submit', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("submit", (event) =&gt; &#123;
+  console.log("submit", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("focus", (event) =&gt; &#123;
+  console.log("focus", event.detail)
+&#125;)
+
+component?.addEventListener("blur", (event) =&gt; &#123;
+  console.log("blur", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>mode</code></td><td>string</td><td><code>"sign-in"</code></td><td>No</td></tr><tr><td><code>action</code></td><td>string</td><td><code>"/api/auth/login"</code></td><td>No</td></tr><tr><td><code>method</code></td><td>string</td><td><code>"post"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Sign in"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>returnTo</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>schema</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>showRemember</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showName</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>submitLabel</code></td><td>string</td><td><code>"Continue"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
@@ -135,7 +161,7 @@ component.addEventListener('submit', (event) =&gt; &#123;
     </div>
     <nav class="detail-pagination">
       <span></span>
-      <a href="/components/checkbox"><small>Next</small><strong>Checkbox →</strong></a>
+      <a href="/components/auth-split-layout"><small>Next</small><strong>Auth Split Layout →</strong></a>
     </nav>
   }
 }
diff --git a/examples/component-showcase/app/pages/components/auth-split-layout.wrn b/examples/component-showcase/app/pages/components/auth-split-layout.wrn
index fd6fd1cc..6ab87e16 100644
--- a/examples/component-showcase/app/pages/components/auth-split-layout.wrn
+++ b/examples/component-showcase/app/pages/components/auth-split-layout.wrn
@@ -7,31 +7,31 @@ page AuthSplitLayoutDetail {
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Auth Split Layout example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default auth split layout for a modern application."
   state playground_brand = ctx.url.searchParams.get("pg_brand") ?? "Police Management System"
-  state playground_features = ctx.url.searchParams.get("pg_features") ?? "[\n  {\n    \"label\": \"Team members\",\n    \"values\": [\n      \"5\",\n      \"Unlimited\",\n      \"Unlimited\"\n    ]\n  },\n  {\n    \"label\": \"Support\",\n    \"values\": [\n      \"Email\",\n      \"Priority\",\n      \"Dedicated\"\n    ]\n  },\n  {\n    \"label\": \"Audit history\",\n    \"values\": [\n      \"7 days\",\n      \"90 days\",\n      \"Custom\"\n    ]\n  }\n]"
+  state playground_features = JSON.parse(ctx.url.searchParams.get("pg_features") ?? "[{\"label\":\"Team members\",\"values\":[\"5\",\"Unlimited\",\"Unlimited\"]},{\"label\":\"Support\",\"values\":[\"Email\",\"Priority\",\"Dedicated\"]},{\"label\":\"Audit history\",\"values\":[\"7 days\",\"90 days\",\"Custom\"]}]")
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Auth Split Layout"
-    description = "Responsive 50/50 authentication layout with content and form regions."
+    description = "Reusable auth split layout component."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/layout">Layout</a><span aria-hidden="true">/</span><span>Auth Split Layout</span>
+      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/core">Core</a><span aria-hidden="true">/</span><span>Auth Split Layout</span>
     </nav>
     <header class="detail-hero">
       <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Layout component</span>
+        <span class="showcase-eyebrow">Core component</span>
         <h1>Auth Split Layout</h1>
-        <p>Responsive 50/50 authentication layout with content and form regions.</p>
+        <p>Reusable auth split layout component.</p>
         <div class="detail-badges"><span>8 props</span><span>2 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="AuthSplitLayout" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="AuthSplitLayout" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Auth Split Layout</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="AuthSplitLayout" size="{playground_size}" color="{playground_color}" eyebrow="{playground_eyebrow}" title="{playground_title}" description="{playground_description}" brand="{playground_brand}" features="{playground_features}" class="{playground_class}"><div slot="aside-extra" class="showcase-slot">aside-extra slot</div><div slot="form" class="showcase-slot">form slot</div></div></div>
+          <div class="playground-preview-source" data-playground-preview><AuthSplitLayout size='{playground_size}' color='{playground_color}' eyebrow='{playground_eyebrow}' title='{playground_title}' description='{playground_description}' brand='{playground_brand}' features='{playground_features}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;AuthSplitLayout
@@ -63,10 +63,16 @@ page AuthSplitLayoutDetail {
       ]
     &#125;
   ]'&gt;
-  &lt;!-- Add aside-extra, form slot content here --&gt;
+  &lt;div data-slot="aside-extra"&gt;
+    &lt;div class="showcase-slot"&gt;aside-extra slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="form"&gt;
+    &lt;div class="showcase-slot"&gt;form slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/AuthSplitLayout&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -110,7 +116,8 @@ page AuthSplitLayoutDetail {
         <div class="demo-workbench">
           <div id="auth-split-layout-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AuthSplitLayout" size="default" title="Auth Split Layout example" description="A polished default auth split layout for a modern application." features="[{&quot;label&quot;:&quot;Team members&quot;,&quot;values&quot;:[&quot;5&quot;,&quot;Unlimited&quot;,&quot;Unlimited&quot;]},{&quot;label&quot;:&quot;Support&quot;,&quot;values&quot;:[&quot;Email&quot;,&quot;Priority&quot;,&quot;Dedicated&quot;]},{&quot;label&quot;:&quot;Audit history&quot;,&quot;values&quot;:[&quot;7 days&quot;,&quot;90 days&quot;,&quot;Custom&quot;]}]" class="showcase-instance showcase-instance--1"><div slot="aside-extra" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>aside-extra slot</span></div><div slot="form" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>form slot</span></div></div></div>
+            
+            <div class="demo-render"><AuthSplitLayout size="default" title="Auth Split Layout example" description="A polished default auth split layout for a modern application." features='[{"label":"Team members","values":["5","Unlimited","Unlimited"]},{"label":"Support","values":["Email","Priority","Dedicated"]},{"label":"Audit history","values":["7 days","90 days","Custom"]}]' class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -143,7 +150,12 @@ page AuthSplitLayoutDetail {
       ]
     &#125;
   ]'&gt;
-  &lt;!-- Add aside-extra, form slot content here --&gt;
+  &lt;div data-slot="aside-extra"&gt;
+    &lt;div class="showcase-slot"&gt;aside-extra slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="form"&gt;
+    &lt;div class="showcase-slot"&gt;form slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/AuthSplitLayout&gt;</code></pre>
           </section>
         </div>
@@ -156,7 +168,8 @@ page AuthSplitLayoutDetail {
         <div class="demo-workbench">
           <div id="auth-split-layout-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AuthSplitLayout" size="sm" title="Compact Auth Split Layout" description="A compact configuration for dashboards and dense product surfaces." features="[{&quot;label&quot;:&quot;Team members&quot;,&quot;values&quot;:[&quot;5&quot;,&quot;Unlimited&quot;,&quot;Unlimited&quot;]},{&quot;label&quot;:&quot;Support&quot;,&quot;values&quot;:[&quot;Email&quot;,&quot;Priority&quot;,&quot;Dedicated&quot;]},{&quot;label&quot;:&quot;Audit history&quot;,&quot;values&quot;:[&quot;7 days&quot;,&quot;90 days&quot;,&quot;Custom&quot;]}]" class="showcase-instance showcase-instance--2"><div slot="aside-extra" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>aside-extra slot</span></div><div slot="form" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>form slot</span></div></div></div>
+            
+            <div class="demo-render"><AuthSplitLayout size="sm" title="Compact Auth Split Layout" description="A compact configuration for dashboards and dense product surfaces." features='[{"label":"Team members","values":["5","Unlimited","Unlimited"]},{"label":"Support","values":["Email","Priority","Dedicated"]},{"label":"Audit history","values":["7 days","90 days","Custom"]}]' class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -190,7 +203,12 @@ page AuthSplitLayoutDetail {
       ]
     &#125;
   ]'&gt;
-  &lt;!-- Add aside-extra, form slot content here --&gt;
+  &lt;div data-slot="aside-extra"&gt;
+    &lt;div class="showcase-slot"&gt;aside-extra slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="form"&gt;
+    &lt;div class="showcase-slot"&gt;form slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/AuthSplitLayout&gt;</code></pre>
           </section>
         </div>
@@ -203,7 +221,8 @@ page AuthSplitLayoutDetail {
         <div class="demo-workbench">
           <div id="auth-split-layout-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AuthSplitLayout" size="lg" title="Advanced Auth Split Layout" description="A richer configuration demonstrating additional content and hierarchy." features="[{&quot;label&quot;:&quot;Team members&quot;,&quot;values&quot;:[&quot;5&quot;,&quot;Unlimited&quot;,&quot;Unlimited&quot;]},{&quot;label&quot;:&quot;Support&quot;,&quot;values&quot;:[&quot;Email&quot;,&quot;Priority&quot;,&quot;Dedicated&quot;]},{&quot;label&quot;:&quot;Audit history&quot;,&quot;values&quot;:[&quot;7 days&quot;,&quot;90 days&quot;,&quot;Custom&quot;]}]" class="showcase-instance showcase-instance--3"><div slot="aside-extra" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>aside-extra slot</span></div><div slot="form" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>form slot</span></div></div></div>
+            
+            <div class="demo-render"><AuthSplitLayout size="lg" title="Advanced Auth Split Layout" description="A richer configuration demonstrating additional content and hierarchy." features='[{"label":"Team members","values":["5","Unlimited","Unlimited"]},{"label":"Support","values":["Email","Priority","Dedicated"]},{"label":"Audit history","values":["7 days","90 days","Custom"]}]' class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -237,21 +256,26 @@ page AuthSplitLayoutDetail {
       ]
     &#125;
   ]'&gt;
-  &lt;!-- Add aside-extra, form slot content here --&gt;
+  &lt;div data-slot="aside-extra"&gt;
+    &lt;div class="showcase-slot"&gt;aside-extra slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="form"&gt;
+    &lt;div class="showcase-slot"&gt;form slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/AuthSplitLayout&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
+        
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>eyebrow</code></td><td>string</td><td><code>"Secure identity"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Welcome back"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>brand</code></td><td>string</td><td><code>"Police Management System"</code></td><td>No</td></tr><tr><td><code>features</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#auth-split-layout-demo-1">Production default</a><a href="#auth-split-layout-demo-2">Compact application</a><a href="#auth-split-layout-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#auth-split-layout-demo-1">Production default</a><a href="#auth-split-layout-demo-2">Compact application</a><a href="#auth-split-layout-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
-      <span></span>
-      <a href="/components/columns"><small>Next</small><strong>Columns →</strong></a>
+      <a href="/components/auth-form"><small>Previous</small><strong>← Auth Form</strong></a>
+      <a href="/components/portal-dashboard"><small>Next</small><strong>Portal Dashboard →</strong></a>
     </nav>
   }
 }
diff --git a/examples/component-showcase/app/pages/components/avatar-group.wrn b/examples/component-showcase/app/pages/components/avatar-group.wrn
index c3a2360f..faf216cb 100644
--- a/examples/component-showcase/app/pages/components/avatar-group.wrn
+++ b/examples/component-showcase/app/pages/components/avatar-group.wrn
@@ -1,18 +1,18 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page AvatarGroupDetail {
   layout = "showcase"
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"src\": \"/avatar-example.svg\",\n    \"name\": \"Mark Wanner\",\n    \"alt\": \"Mark Wanner\"\n  },\n  {\n    \"src\": \"/avatar-example-2.svg\",\n    \"name\": \"Maria Guan\",\n    \"alt\": \"Maria Guan\"\n  },\n  {\n    \"src\": \"/avatar-example-3.svg\",\n    \"name\": \"Amil Evara\",\n    \"alt\": \"Amil Evara\"\n  },\n  {\n    \"initials\": \"EE\",\n    \"name\": \"Ebele Egbuna\",\n    \"color\": \"info\"\n  }\n]"
-  state playground_size = ctx.url.searchParams.get("pg_size") ?? "lg"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"avatar-group-0-1\",\"key\":\"avatar-group-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#avatar-group-demo\",\"actionHref\":\"#avatar-group-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"avatar-group-0-2\",\"key\":\"avatar-group-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#avatar-group-demo\",\"actionHref\":\"#avatar-group-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
+  state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid"
   state playground_shape = ctx.url.searchParams.get("pg_shape") ?? "circle"
   state playground_layout = ctx.url.searchParams.get("pg_layout") ?? "stack"
-  state playground_maxVisible = ctx.url.searchParams.get("pg_maxVisible") ?? "4"
-  state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "3"
+  state playground_maxVisible = Number(ctx.url.searchParams.get("pg_maxVisible") ?? "4")
+  state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "3")
   state playground_borderColor = ctx.url.searchParams.get("pg_borderColor") ?? ""
-  state playground_showTooltips = ctx.url.searchParams.get("pg_showTooltips") ?? "true"
-  state playground_overflowLabel = ctx.url.searchParams.get("pg_overflowLabel") ?? "Show remaining members"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
+  state playground_showTooltips = (ctx.url.searchParams.get("pg_showTooltips") ?? "true") === "true"
+  state playground_overflowLabel = ctx.url.searchParams.get("pg_overflowLabel") ?? "Avatar Group"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Avatar Group"
     description = "Theme-aware, responsive avatar group component."
@@ -30,66 +30,239 @@ page AvatarGroupDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="AvatarGroup" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="AvatarGroup" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="overflow">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Avatar Group</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="AvatarGroup" items="{playground_items}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" shape="{playground_shape}" layout="{playground_layout}" maxVisible="{playground_maxVisible}" columns="{playground_columns}" borderColor="{playground_borderColor}" showTooltips="{playground_showTooltips}" overflowLabel="{playground_overflowLabel}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><AvatarGroup items='{playground_items}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' shape='{playground_shape}' layout='{playground_layout}' maxVisible='{playground_maxVisible}' columns='{playground_columns}' borderColor='{playground_borderColor}' showTooltips='{playground_showTooltips}' overflowLabel='{playground_overflowLabel}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;AvatarGroup
   items='[
     &#123;
-      "src": "/avatar-example.svg",
-      "name": "Mark Wanner",
-      "alt": "Mark Wanner"
+      "id": "avatar-group-0-1",
+      "key": "avatar-group-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "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",
-      "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"
+      "id": "avatar-group-0-2",
+      "key": "avatar-group-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
     &#125;
   ]'
-  size="lg"
+  overflowLabel="Avatar Group"
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>12 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
           <div class="playground-fields"><label class="playground-field" for="playground-avatar-group-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-avatar-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
-    "src": "/avatar-example.svg",
-    "name": "Mark Wanner",
-    "alt": "Mark Wanner"
+    "id": "avatar-group-0-1",
+    "key": "avatar-group-0-1",
+    "value": "primary",
+    "label": "Primary workflow",
+    "title": "Primary workflow",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "A configurable sample message.",
+    "href": "#avatar-group-demo",
+    "actionHref": "#avatar-group-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": true,
+    "selected": true,
+    "checked": true,
+    "disabled": false,
+    "outgoing": false,
+    "open": true,
+    "number": 1,
+    "count": 16,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 1",
+    "items": [
+      {
+        "label": "Nested option A",
+        "value": "nested-a"
+      },
+      {
+        "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",
-    "name": "Maria Guan",
-    "alt": "Maria Guan"
-  },
-  {
-    "src": "/avatar-example-3.svg",
-    "name": "Amil Evara",
-    "alt": "Amil Evara"
-  },
-  {
-    "initials": "EE",
-    "name": "Ebele Egbuna",
-    "color": "info"
+    "id": "avatar-group-0-2",
+    "key": "avatar-group-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#avatar-group-demo",
+    "actionHref": "#avatar-group-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": false,
+    "selected": false,
+    "checked": false,
+    "disabled": false,
+    "outgoing": true,
+    "open": true,
+    "number": 2,
+    "count": 32,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 2",
+    "items": [
+      {
+        "label": "Nested option A",
+        "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",
-      "name": "Mark Wanner",
-      "alt": "Mark Wanner"
+      "id": "avatar-group-0-1",
+      "key": "avatar-group-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "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",
-      "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"
+      "id": "avatar-group-0-2",
+      "key": "avatar-group-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
     &#125;
   ]'
-  size="lg"
+  overflowLabel="Avatar Group"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Layout</span><h2>Grid layout</h2><p>Arrange members in a grid with equal spacing and a clear overflow count.</p></div>
+          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="avatar-group-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AvatarGroup" items="[{&quot;src&quot;:&quot;/avatar-example.svg&quot;,&quot;name&quot;:&quot;Mark Wanner&quot;,&quot;alt&quot;:&quot;Mark Wanner&quot;},{&quot;src&quot;:&quot;/avatar-example-2.svg&quot;,&quot;name&quot;:&quot;Maria Guan&quot;,&quot;alt&quot;:&quot;Maria Guan&quot;},{&quot;src&quot;:&quot;/avatar-example-3.svg&quot;,&quot;name&quot;:&quot;Amil Evara&quot;,&quot;alt&quot;:&quot;Amil Evara&quot;},{&quot;initials&quot;:&quot;EE&quot;,&quot;name&quot;:&quot;Ebele Egbuna&quot;,&quot;color&quot;:&quot;info&quot;},{&quot;initials&quot;:&quot;CL&quot;,&quot;name&quot;:&quot;Chris Lynch&quot;,&quot;color&quot;:&quot;success&quot;},{&quot;initials&quot;:&quot;NS&quot;,&quot;name&quot;:&quot;Nora Singh&quot;,&quot;color&quot;:&quot;warning&quot;},{&quot;initials&quot;:&quot;JR&quot;,&quot;name&quot;:&quot;Jon Rivera&quot;,&quot;color&quot;:&quot;danger&quot;},{&quot;initials&quot;:&quot;AK&quot;,&quot;name&quot;:&quot;Amina Khan&quot;,&quot;color&quot;:&quot;secondary&quot;}]" size="md" color="primary" variant="solid" shape="circle" layout="grid" maxVisible="7" columns="3"></div></div>
+            
+            <div class="demo-render"><AvatarGroup items='[{"id":"avatar-group-1-1","key":"avatar-group-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#avatar-group-demo","actionHref":"#avatar-group-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"avatar-group-1-2","key":"avatar-group-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#avatar-group-demo","actionHref":"#avatar-group-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' size="sm" variant="secondary" maxVisible="4" columns="3" showTooltips="true" overflowLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Grid layout usage">
+          <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;AvatarGroup
   items='[
     &#123;
-      "src": "/avatar-example.svg",
-      "name": "Mark Wanner",
-      "alt": "Mark Wanner"
+      "id": "avatar-group-1-1",
+      "key": "avatar-group-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "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",
-      "name": "Maria Guan",
-      "alt": "Maria Guan"
-    &#125;,
-    &#123;
-      "src": "/avatar-example-3.svg",
-      "name": "Amil Evara",
-      "alt": "Amil Evara"
-    &#125;,
-    &#123;
-      "initials": "EE",
-      "name": "Ebele Egbuna",
-      "color": "info"
-    &#125;,
-    &#123;
-      "initials": "CL",
-      "name": "Chris Lynch",
-      "color": "success"
-    &#125;,
-    &#123;
-      "initials": "NS",
-      "name": "Nora Singh",
-      "color": "warning"
-    &#125;,
-    &#123;
-      "initials": "JR",
-      "name": "Jon Rivera",
-      "color": "danger"
-    &#125;,
-    &#123;
-      "initials": "AK",
-      "name": "Amina Khan",
-      "color": "secondary"
+      "id": "avatar-group-1-2",
+      "key": "avatar-group-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "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"
-  maxVisible="7"
+  size="sm"
+  variant="secondary"
+  overflowLabel="Compact example"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Border</span><h2>Custom border color</h2><p>Change the ring color so stacked groups remain distinct on different surfaces.</p></div>
+          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="avatar-group-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AvatarGroup" items="[{&quot;src&quot;:&quot;/avatar-example.svg&quot;,&quot;name&quot;:&quot;Mark Wanner&quot;,&quot;alt&quot;:&quot;Mark Wanner&quot;},{&quot;src&quot;:&quot;/avatar-example-2.svg&quot;,&quot;name&quot;:&quot;Maria Guan&quot;,&quot;alt&quot;:&quot;Maria Guan&quot;},{&quot;src&quot;:&quot;/avatar-example-3.svg&quot;,&quot;name&quot;:&quot;Amil Evara&quot;,&quot;alt&quot;:&quot;Amil Evara&quot;},{&quot;initials&quot;:&quot;EE&quot;,&quot;name&quot;:&quot;Ebele Egbuna&quot;,&quot;color&quot;:&quot;info&quot;}]" size="md" color="primary" variant="solid" shape="circle" layout="stack" maxVisible="4" borderColor="#2583ff"></div></div>
+            
+            <div class="demo-render"><AvatarGroup items='[{"id":"avatar-group-2-1","key":"avatar-group-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#avatar-group-demo","actionHref":"#avatar-group-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"avatar-group-2-2","key":"avatar-group-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#avatar-group-demo","actionHref":"#avatar-group-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' size="lg" variant="success" maxVisible="4" columns="3" showTooltips="true" overflowLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Custom border color usage">
+          <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;AvatarGroup
   items='[
     &#123;
-      "src": "/avatar-example.svg",
-      "name": "Mark Wanner",
-      "alt": "Mark Wanner"
+      "id": "avatar-group-2-1",
+      "key": "avatar-group-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "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",
-      "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;
-  ]'
-  borderColor="#2583ff"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Tooltip</span><h2>Member tooltips</h2><p>Reveal each member's name on pointer hover or keyboard focus.</p></div>
-          <span class="demo-case-number">04</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-group-demo-4" class="demo-canvas demo-canvas--4">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AvatarGroup" items="[{&quot;src&quot;:&quot;/avatar-example.svg&quot;,&quot;name&quot;:&quot;Mark Wanner&quot;,&quot;alt&quot;:&quot;Mark Wanner&quot;},{&quot;src&quot;:&quot;/avatar-example-2.svg&quot;,&quot;name&quot;:&quot;Maria Guan&quot;,&quot;alt&quot;:&quot;Maria Guan&quot;},{&quot;src&quot;:&quot;/avatar-example-3.svg&quot;,&quot;name&quot;:&quot;Amil Evara&quot;,&quot;alt&quot;:&quot;Amil Evara&quot;},{&quot;initials&quot;:&quot;EE&quot;,&quot;name&quot;:&quot;Ebele Egbuna&quot;,&quot;color&quot;:&quot;info&quot;}]" size="md" color="primary" variant="solid" shape="circle" layout="stack" maxVisible="4" showTooltips="true"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Member tooltips usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;AvatarGroup
-  items='[
-    &#123;
-      "src": "/avatar-example.svg",
-      "name": "Mark Wanner",
-      "alt": "Mark Wanner"
-    &#125;,
-    &#123;
-      "src": "/avatar-example-2.svg",
-      "name": "Maria Guan",
-      "alt": "Maria Guan"
-    &#125;,
-    &#123;
-      "src": "/avatar-example-3.svg",
-      "name": "Amil Evara",
-      "alt": "Amil Evara"
-    &#125;,
-    &#123;
-      "initials": "EE",
-      "name": "Ebele Egbuna",
-      "color": "info"
-    &#125;
-  ]'
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Overflow</span><h2>Dropdown overflow</h2><p>Open the overflow counter to inspect members hidden by the visible limit.</p></div>
-          <span class="demo-case-number">05</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-group-demo-5" class="demo-canvas demo-canvas--5">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="AvatarGroup" items="[{&quot;src&quot;:&quot;/avatar-example.svg&quot;,&quot;name&quot;:&quot;Mark Wanner&quot;,&quot;alt&quot;:&quot;Mark Wanner&quot;},{&quot;src&quot;:&quot;/avatar-example-2.svg&quot;,&quot;name&quot;:&quot;Maria Guan&quot;,&quot;alt&quot;:&quot;Maria Guan&quot;},{&quot;src&quot;:&quot;/avatar-example-3.svg&quot;,&quot;name&quot;:&quot;Amil Evara&quot;,&quot;alt&quot;:&quot;Amil Evara&quot;},{&quot;initials&quot;:&quot;EE&quot;,&quot;name&quot;:&quot;Ebele Egbuna&quot;,&quot;color&quot;:&quot;info&quot;},{&quot;initials&quot;:&quot;CL&quot;,&quot;name&quot;:&quot;Chris Lynch&quot;,&quot;color&quot;:&quot;success&quot;},{&quot;initials&quot;:&quot;NS&quot;,&quot;name&quot;:&quot;Nora Singh&quot;,&quot;color&quot;:&quot;warning&quot;},{&quot;initials&quot;:&quot;JR&quot;,&quot;name&quot;:&quot;Jon Rivera&quot;,&quot;color&quot;:&quot;danger&quot;},{&quot;initials&quot;:&quot;AK&quot;,&quot;name&quot;:&quot;Amina Khan&quot;,&quot;color&quot;:&quot;secondary&quot;}]" size="md" color="primary" variant="solid" shape="circle" layout="stack" maxVisible="4" showTooltips="true"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Dropdown overflow usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;AvatarGroup
-  items='[
-    &#123;
-      "src": "/avatar-example.svg",
-      "name": "Mark Wanner",
-      "alt": "Mark Wanner"
-    &#125;,
-    &#123;
-      "src": "/avatar-example-2.svg",
-      "name": "Maria Guan",
-      "alt": "Maria Guan"
-    &#125;,
-    &#123;
-      "src": "/avatar-example-3.svg",
-      "name": "Amil Evara",
-      "alt": "Amil Evara"
-    &#125;,
-    &#123;
-      "initials": "EE",
-      "name": "Ebele Egbuna",
-      "color": "info"
-    &#125;,
-    &#123;
-      "initials": "CL",
-      "name": "Chris Lynch",
-      "color": "success"
-    &#125;,
-    &#123;
-      "initials": "NS",
-      "name": "Nora Singh",
-      "color": "warning"
-    &#125;,
-    &#123;
-      "initials": "JR",
-      "name": "Jon Rivera",
-      "color": "danger"
-    &#125;,
-    &#123;
-      "initials": "AK",
-      "name": "Amina Khan",
-      "color": "secondary"
+      "id": "avatar-group-2-2",
+      "key": "avatar-group-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#avatar-group-demo",
+      "actionHref": "#avatar-group-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
     &#125;
   ]'
+  size="lg"
+  variant="success"
+  overflowLabel="Advanced example"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@overflow</code><span>Fires when the component emits the overflow event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@overflow</code><span>Fires when the component emits the overflow event.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;AvatarGroup
+  @overflow='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"AvatarGroup\"], [data-component=\"AvatarGroup\"]")
 
-component.addEventListener('overflow', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("overflow", (event) =&gt; &#123;
+  console.log("overflow", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"solid"</code></td><td>No</td></tr><tr><td><code>shape</code></td><td>string</td><td><code>"circle"</code></td><td>No</td></tr><tr><td><code>layout</code></td><td>string</td><td><code>"stack"</code></td><td>No</td></tr><tr><td><code>maxVisible</code></td><td>number</td><td><code>4</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>3</code></td><td>No</td></tr><tr><td><code>borderColor</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>showTooltips</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>overflowLabel</code></td><td>string</td><td><code>"Show remaining members"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#avatar-group-demo-1">Overlapping stack</a><a href="#avatar-group-demo-2">Grid layout</a><a href="#avatar-group-demo-3">Custom border color</a><a href="#avatar-group-demo-4">Member tooltips</a><a href="#avatar-group-demo-5">Dropdown overflow</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#avatar-group-demo-1">Production default</a><a href="#avatar-group-demo-2">Compact application</a><a href="#avatar-group-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/avatar.wrn b/examples/component-showcase/app/pages/components/avatar.wrn
index a6ef1b9e..5e831fe5 100644
--- a/examples/component-showcase/app/pages/components/avatar.wrn
+++ b/examples/component-showcase/app/pages/components/avatar.wrn
@@ -1,24 +1,24 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page AvatarDetail {
   layout = "showcase"
-  state playground_src = ctx.url.searchParams.get("pg_src") ?? "/avatar-example.svg"
-  state playground_alt = ctx.url.searchParams.get("pg_alt") ?? "Example profile portrait"
+  state playground_src = ctx.url.searchParams.get("pg_src") ?? ""
+  state playground_alt = ctx.url.searchParams.get("pg_alt") ?? ""
   state playground_initials = ctx.url.searchParams.get("pg_initials") ?? ""
-  state playground_size = ctx.url.searchParams.get("pg_size") ?? "xs"
+  state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid"
   state playground_shape = ctx.url.searchParams.get("pg_shape") ?? "circle"
   state playground_status = ctx.url.searchParams.get("pg_status") ?? ""
-  state playground_statusLabel = ctx.url.searchParams.get("pg_statusLabel") ?? ""
+  state playground_statusLabel = ctx.url.searchParams.get("pg_statusLabel") ?? "Avatar"
   state playground_statusPosition = ctx.url.searchParams.get("pg_statusPosition") ?? "bottom"
   state playground_badge = ctx.url.searchParams.get("pg_badge") ?? ""
   state playground_badgeIcon = ctx.url.searchParams.get("pg_badgeIcon") ?? ""
-  state playground_badgeLabel = ctx.url.searchParams.get("pg_badgeLabel") ?? ""
+  state playground_badgeLabel = ctx.url.searchParams.get("pg_badgeLabel") ?? "Avatar"
   state playground_tooltip = ctx.url.searchParams.get("pg_tooltip") ?? ""
   state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
+  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default avatar for a modern application."
   state playground_loading = ctx.url.searchParams.get("pg_loading") ?? "lazy"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Avatar"
     description = "Theme-aware, responsive avatar component."
@@ -36,25 +36,26 @@ page AvatarDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Avatar" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Avatar" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="load,error,click">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Avatar</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="Avatar" src="{playground_src}" alt="{playground_alt}" initials="{playground_initials}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" shape="{playground_shape}" status="{playground_status}" statusLabel="{playground_statusLabel}" statusPosition="{playground_statusPosition}" badge="{playground_badge}" badgeIcon="{playground_badgeIcon}" badgeLabel="{playground_badgeLabel}" tooltip="{playground_tooltip}" name="{playground_name}" description="{playground_description}" loading="{playground_loading}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Avatar src='{playground_src}' alt='{playground_alt}' initials='{playground_initials}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' shape='{playground_shape}' status='{playground_status}' statusLabel='{playground_statusLabel}' statusPosition='{playground_statusPosition}' badge='{playground_badge}' badgeIcon='{playground_badgeIcon}' badgeLabel='{playground_badgeLabel}' tooltip='{playground_tooltip}' name='{playground_name}' description='{playground_description}' loading='{playground_loading}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Avatar
-  src="/avatar-example.svg"
-  alt="Example profile portrait"
-  size="xs"
+  statusLabel="Avatar"
+  badgeLabel="Avatar"
+  description="A polished default avatar for a modern application."
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>18 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-avatar-src"><span><strong>src</strong><small>string</small></span><input id="playground-avatar-src" name="pg_src" type="text" value="/avatar-example.svg" /></label><label class="playground-field" for="playground-avatar-alt"><span><strong>alt</strong><small>string</small></span><input id="playground-avatar-alt" name="pg_alt" type="text" value="Example profile portrait" /></label><label class="playground-field" for="playground-avatar-initials"><span><strong>initials</strong><small>string</small></span><input id="playground-avatar-initials" name="pg_initials" type="text" value="" /></label><label class="playground-field" for="playground-avatar-size"><span><strong>size</strong><small>string</small></span><select id="playground-avatar-size" name="pg_size"><option value="xs" selected>xs</option><option value="md">md</option><option value="default">default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-avatar-color"><span><strong>color</strong><small>string</small></span><select id="playground-avatar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-avatar-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-avatar-variant" name="pg_variant"><option value="solid" selected>solid</option><option value="default">default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-avatar-shape"><span><strong>shape</strong><small>string</small></span><input id="playground-avatar-shape" name="pg_shape" type="text" value="circle" /></label><label class="playground-field" for="playground-avatar-status"><span><strong>status</strong><small>string</small></span><input id="playground-avatar-status" name="pg_status" type="text" value="" /></label><label class="playground-field" for="playground-avatar-statusLabel"><span><strong>status Label</strong><small>string</small></span><input id="playground-avatar-statusLabel" name="pg_statusLabel" type="text" value="" /></label><label class="playground-field" for="playground-avatar-statusPosition"><span><strong>status Position</strong><small>string</small></span><input id="playground-avatar-statusPosition" name="pg_statusPosition" type="text" value="bottom" /></label><label class="playground-field" for="playground-avatar-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-avatar-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-avatar-badgeIcon"><span><strong>badge Icon</strong><small>string</small></span><input id="playground-avatar-badgeIcon" name="pg_badgeIcon" type="text" value="" /></label><label class="playground-field" for="playground-avatar-badgeLabel"><span><strong>badge Label</strong><small>string</small></span><input id="playground-avatar-badgeLabel" name="pg_badgeLabel" type="text" value="" /></label><label class="playground-field" for="playground-avatar-tooltip"><span><strong>tooltip</strong><small>string</small></span><input id="playground-avatar-tooltip" name="pg_tooltip" type="text" value="" /></label><label class="playground-field" for="playground-avatar-name"><span><strong>name</strong><small>string</small></span><input id="playground-avatar-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-avatar-description"><span><strong>description</strong><small>string</small></span><input id="playground-avatar-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-avatar-loading"><span><strong>loading</strong><small>string</small></span><input id="playground-avatar-loading" name="pg_loading" type="text" value="lazy" /></label><label class="playground-field" for="playground-avatar-class"><span><strong>class</strong><small>string</small></span><input id="playground-avatar-class" name="pg_class" type="text" value="" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-avatar-src"><span><strong>src</strong><small>string</small></span><input id="playground-avatar-src" name="pg_src" type="text" value="" /></label><label class="playground-field" for="playground-avatar-alt"><span><strong>alt</strong><small>string</small></span><input id="playground-avatar-alt" name="pg_alt" type="text" value="" /></label><label class="playground-field" for="playground-avatar-initials"><span><strong>initials</strong><small>string</small></span><input id="playground-avatar-initials" name="pg_initials" type="text" value="" /></label><label class="playground-field" for="playground-avatar-size"><span><strong>size</strong><small>string</small></span><select id="playground-avatar-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-avatar-color"><span><strong>color</strong><small>string</small></span><select id="playground-avatar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-avatar-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-avatar-variant" name="pg_variant" type="text" value="solid" /></label><label class="playground-field" for="playground-avatar-shape"><span><strong>shape</strong><small>string</small></span><select id="playground-avatar-shape" name="pg_shape"><option value="circle" selected>circle</option><option value="round">round</option><option value="rounded">rounded</option><option value="pill">pill</option></select></label><label class="playground-field" for="playground-avatar-status"><span><strong>status</strong><small>string</small></span><input id="playground-avatar-status" name="pg_status" type="text" value="" /></label><label class="playground-field" for="playground-avatar-statusLabel"><span><strong>status Label</strong><small>string</small></span><input id="playground-avatar-statusLabel" name="pg_statusLabel" type="text" value="Avatar" /></label><label class="playground-field" for="playground-avatar-statusPosition"><span><strong>status Position</strong><small>string</small></span><input id="playground-avatar-statusPosition" name="pg_statusPosition" type="text" value="bottom" /></label><label class="playground-field" for="playground-avatar-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-avatar-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-avatar-badgeIcon"><span><strong>badge Icon</strong><small>string</small></span><input id="playground-avatar-badgeIcon" name="pg_badgeIcon" type="text" value="" /></label><label class="playground-field" for="playground-avatar-badgeLabel"><span><strong>badge Label</strong><small>string</small></span><input id="playground-avatar-badgeLabel" name="pg_badgeLabel" type="text" value="Avatar" /></label><label class="playground-field" for="playground-avatar-tooltip"><span><strong>tooltip</strong><small>string</small></span><input id="playground-avatar-tooltip" name="pg_tooltip" type="text" value="" /></label><label class="playground-field" for="playground-avatar-name"><span><strong>name</strong><small>string</small></span><input id="playground-avatar-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-avatar-description"><span><strong>description</strong><small>string</small></span><input id="playground-avatar-description" name="pg_description" type="text" value="A polished default avatar for a modern application." /></label><label class="playground-field" for="playground-avatar-loading"><span><strong>loading</strong><small>string</small></span><input id="playground-avatar-loading" name="pg_loading" type="text" value="lazy" /></label><label class="playground-field" for="playground-avatar-class"><span><strong>class</strong><small>string</small></span><input id="playground-avatar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -63,371 +64,92 @@ page AvatarDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Size & shape</span><h2>Extra-small circular avatar</h2><p>Render one circular profile image at the documented size.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="avatar-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Example profile portrait" size="xs" color="primary" variant="solid" shape="circle"></div></div>
+            
+            <div class="demo-render"><Avatar size="md" variant="solid" statusLabel="Avatar" badgeLabel="Avatar" description="A polished default avatar for a modern application." class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Extra-small circular avatar usage">
+          <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Avatar
-  src="/avatar-example.svg"
-  alt="Example profile portrait"
-  size="xs"
+  statusLabel="Avatar"
+  badgeLabel="Avatar"
+  description="A polished default avatar for a modern application."
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Size & shape</span><h2>Small circular avatar</h2><p>Render one circular profile image at the documented size.</p></div>
+          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="avatar-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Example profile portrait" size="sm" color="primary" variant="solid" shape="circle"></div></div>
+            
+            <div class="demo-render"><Avatar size="sm" variant="secondary" statusLabel="Compact example" badgeLabel="Compact example" description="A compact configuration for dashboards and dense product surfaces." class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Small circular avatar usage">
+          <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Avatar
-  src="/avatar-example.svg"
-  alt="Example profile portrait"
   size="sm"
+  variant="secondary"
+  statusLabel="Compact example"
+  badgeLabel="Compact example"
+  description="A compact configuration for dashboards and dense product surfaces."
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Size & shape</span><h2>Medium circular avatar</h2><p>Render one circular profile image at the documented size.</p></div>
+          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="avatar-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Example profile portrait" size="md" color="primary" variant="solid" shape="circle"></div></div>
+            
+            <div class="demo-render"><Avatar size="lg" variant="success" statusLabel="Advanced example" badgeLabel="Advanced example" description="A richer configuration demonstrating additional content and hierarchy." class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Medium circular avatar usage">
+          <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Avatar
-  src="/avatar-example.svg"
-  alt="Example profile portrait"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Size & shape</span><h2>Large circular avatar</h2><p>Render one circular profile image at the documented size.</p></div>
-          <span class="demo-case-number">04</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-4" class="demo-canvas demo-canvas--4">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Example profile portrait" size="lg" color="primary" variant="solid" shape="circle"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Large circular avatar usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Avatar
-  src="/avatar-example.svg"
-  alt="Example profile portrait"
   size="lg"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Size & shape</span><h2>Extra-large circular avatar</h2><p>Render one circular profile image at the documented size.</p></div>
-          <span class="demo-case-number">05</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-5" class="demo-canvas demo-canvas--5">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Example profile portrait" size="xl" color="primary" variant="solid" shape="circle"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Extra-large circular avatar usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Avatar
-  src="/avatar-example.svg"
-  alt="Example profile portrait"
-  size="xl"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Size & shape</span><h2>Rounded avatars</h2><p>Apply softly rounded corners when a circle is not the right fit.</p></div>
-          <span class="demo-case-number">06</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-6" class="demo-canvas demo-canvas--6">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Example rounded profile portrait" size="lg" color="primary" variant="solid" shape="rounded"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Rounded avatars usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Avatar
-  src="/avatar-example.svg"
-  alt="Example rounded profile portrait"
-  size="lg"
-  shape="rounded"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Status</span><h2>Circular avatars with top status</h2><p>Place a clear presence indicator at the requested avatar edge.</p></div>
-          <span class="demo-case-number">07</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-7" class="demo-canvas demo-canvas--7">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Avery Chen" size="lg" color="primary" variant="solid" shape="circle" status="online" statusLabel="Online" statusPosition="top"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Circular avatars with top status usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Avatar
-  src="/avatar-example.svg"
-  alt="Avery Chen"
-  size="lg"
-  status="online"
-  statusLabel="Online"
-  statusPosition="top"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Status</span><h2>Circular avatars with bottom status</h2><p>Place a clear presence indicator at the requested avatar edge.</p></div>
-          <span class="demo-case-number">08</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-8" class="demo-canvas demo-canvas--8">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Avery Chen" size="lg" color="primary" variant="solid" shape="circle" status="away" statusLabel="Away" statusPosition="bottom"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Circular avatars with bottom status usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Avatar
-  src="/avatar-example.svg"
-  alt="Avery Chen"
-  size="lg"
-  status="away"
-  statusLabel="Away"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Fallbacks</span><h2>Avatars with brand icons</h2><p>Overlay a service or platform icon to identify a linked account.</p></div>
-          <span class="demo-case-number">09</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-9" class="demo-canvas demo-canvas--9">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Linked profile" size="lg" color="primary" variant="solid" shape="circle" badgeIcon="icon-[lucide--message-square]" badgeLabel="Messaging account"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Avatars with brand icons usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Avatar
-  src="/avatar-example.svg"
-  alt="Linked profile"
-  size="lg"
-  badgeIcon="icon-[lucide--message-square]"
-  badgeLabel="Messaging account"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Fallbacks</span><h2>Placeholder icon</h2><p>Show a generic person icon when no profile image is available.</p></div>
-          <span class="demo-case-number">010</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-10" class="demo-canvas demo-canvas--10">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" alt="Anonymous profile" size="lg" color="primary" variant="soft" shape="circle"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Placeholder icon usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Avatar
-  alt="Anonymous profile"
-  size="lg"
-  variant="soft"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Fallbacks</span><h2>Placeholder initials</h2><p>Use initials as an accessible text fallback for a missing image.</p></div>
-          <span class="demo-case-number">011</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-11" class="demo-canvas demo-canvas--11">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" alt="Avery Chen" initials="AC" size="lg" color="primary" variant="solid" shape="circle"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Placeholder initials usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Avatar
-  alt="Avery Chen"
-  initials="AC"
-  size="lg"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Color variants</span><h2>Solid color variants</h2><p>Use the solid treatment across semantic avatar colors.</p></div>
-          <span class="demo-case-number">012</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-12" class="demo-canvas demo-canvas--12">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" alt="Avery Chen" initials="AC" size="lg" color="success" variant="solid" shape="circle"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Solid color variants usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Avatar
-  alt="Avery Chen"
-  initials="AC"
-  size="lg"
-  color="success"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Color variants</span><h2>Soft color variants</h2><p>Use the soft treatment across semantic avatar colors.</p></div>
-          <span class="demo-case-number">013</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-13" class="demo-canvas demo-canvas--13">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" alt="Avery Chen" initials="AC" size="lg" color="info" variant="soft" shape="circle"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Soft color variants usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Avatar
-  alt="Avery Chen"
-  initials="AC"
-  size="lg"
-  color="info"
-  variant="soft"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Color variants</span><h2>Outline color variants</h2><p>Use the outline treatment across semantic avatar colors.</p></div>
-          <span class="demo-case-number">014</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-14" class="demo-canvas demo-canvas--14">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" alt="Avery Chen" initials="AC" size="lg" color="danger" variant="outline" shape="circle"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Outline color variants usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Avatar
-  alt="Avery Chen"
-  initials="AC"
-  size="lg"
-  color="danger"
-  variant="outline"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Color variants</span><h2>White color variants</h2><p>Use the white treatment across semantic avatar colors.</p></div>
-          <span class="demo-case-number">015</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-15" class="demo-canvas demo-canvas--15">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" alt="Avery Chen" initials="AC" size="lg" color="primary" variant="white" shape="circle"></div></div>
-          </div>
-          <section class="demo-code" aria-label="White color variants usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Avatar
-  alt="Avery Chen"
-  initials="AC"
-  size="lg"
-  variant="white"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Composition</span><h2>Avatar with tooltip</h2><p>Reveal a name or extra context on hover and keyboard focus.</p></div>
-          <span class="demo-case-number">016</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-16" class="demo-canvas demo-canvas--16">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Avery Chen" size="lg" color="primary" variant="solid" shape="circle" status="online" tooltip="Avery Chen · Online" name="Avery Chen"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Avatar with tooltip usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Avatar
-  src="/avatar-example.svg"
-  alt="Avery Chen"
-  size="lg"
-  status="online"
-  tooltip="Avery Chen · Online"
-  name="Avery Chen"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Composition</span><h2>Media object</h2><p>Combine an avatar with supporting text for profile and activity rows.</p></div>
-          <span class="demo-case-number">017</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="avatar-demo-17" class="demo-canvas demo-canvas--17">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Avatar" src="/avatar-example.svg" alt="Mark Wanner" size="lg" color="primary" variant="solid" shape="circle" name="Mark Wanner" description="mark@example.com"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Media object usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Avatar
-  src="/avatar-example.svg"
-  alt="Mark Wanner"
-  size="lg"
-  name="Mark Wanner"
-  description="mark@example.com"
+  variant="success"
+  statusLabel="Advanced example"
+  badgeLabel="Advanced example"
+  description="A richer configuration demonstrating additional content and hierarchy."
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@load</code><span>Fires when component data or media finishes loading.</span></div><div><code>@error</code><span>Fires when the component encounters an error.</span></div><div><code>@click</code><span>Fires when the component is activated by pointer or keyboard.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@load</code><span>Fires after remote or deferred content loads successfully.</span></div><div><code>@error</code><span>Fires when the component cannot complete an operation.</span></div><div><code>@click</code><span>Fires when the interactive surface is activated.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;Avatar
+  @load='console.log(event.detail)'
+  @error='console.log(event.detail)'
+  @click='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"Avatar\"], [data-component=\"Avatar\"]")
 
-component.addEventListener('load', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("load", (event) =&gt; &#123;
+  console.log("load", event.detail)
+&#125;)
+
+component?.addEventListener("error", (event) =&gt; &#123;
+  console.log("error", event.detail)
+&#125;)
+
+component?.addEventListener("click", (event) =&gt; &#123;
+  console.log("click", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>src</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>alt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>initials</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"solid"</code></td><td>No</td></tr><tr><td><code>shape</code></td><td>string</td><td><code>"circle"</code></td><td>No</td></tr><tr><td><code>status</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>statusLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>statusPosition</code></td><td>string</td><td><code>"bottom"</code></td><td>No</td></tr><tr><td><code>badge</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>badgeIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>badgeLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>tooltip</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>loading</code></td><td>string</td><td><code>"lazy"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#avatar-demo-1">Extra-small circular avatar</a><a href="#avatar-demo-2">Small circular avatar</a><a href="#avatar-demo-3">Medium circular avatar</a><a href="#avatar-demo-4">Large circular avatar</a><a href="#avatar-demo-5">Extra-large circular avatar</a><a href="#avatar-demo-6">Rounded avatars</a><a href="#avatar-demo-7">Circular avatars with top status</a><a href="#avatar-demo-8">Circular avatars with bottom status</a><a href="#avatar-demo-9">Avatars with brand icons</a><a href="#avatar-demo-10">Placeholder icon</a><a href="#avatar-demo-11">Placeholder initials</a><a href="#avatar-demo-12">Solid color variants</a><a href="#avatar-demo-13">Soft color variants</a><a href="#avatar-demo-14">Outline color variants</a><a href="#avatar-demo-15">White color variants</a><a href="#avatar-demo-16">Avatar with tooltip</a><a href="#avatar-demo-17">Media object</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#avatar-demo-1">Production default</a><a href="#avatar-demo-2">Compact application</a><a href="#avatar-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/back-to-top.wrn b/examples/component-showcase/app/pages/components/back-to-top.wrn
index ac8aa1ba..72b3a85d 100644
--- a/examples/component-showcase/app/pages/components/back-to-top.wrn
+++ b/examples/component-showcase/app/pages/components/back-to-top.wrn
@@ -1,21 +1,24 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page BackToTopDetail {
   layout = "showcase"
-  state playground_threshold = ctx.url.searchParams.get("pg_threshold") ?? "500"
+  state playground_threshold = Number(ctx.url.searchParams.get("pg_threshold") ?? "500")
   state playground_label = ctx.url.searchParams.get("pg_label") ?? "Back To Top"
   state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Back To Top 1 example"
   state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
   state playground_position = ctx.url.searchParams.get("pg_position") ?? "right"
   state playground_offset = ctx.url.searchParams.get("pg_offset") ?? "md"
   state playground_behavior = ctx.url.searchParams.get("pg_behavior") ?? "smooth"
-  state playground_showProgress = ctx.url.searchParams.get("pg_showProgress") ?? "true"
+  state playground_showProgress = (ctx.url.searchParams.get("pg_showProgress") ?? "true") === "true"
+  state playground_showLabel = (ctx.url.searchParams.get("pg_showLabel") ?? "true") === "true"
+  state playground_alwaysVisible = (ctx.url.searchParams.get("pg_alwaysVisible") ?? "true") === "true"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid"
+  state playground_shape = ctx.url.searchParams.get("pg_shape") ?? "round"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Back To Top"
-    description = "Accessible scroll-to-top control with visibility threshold."
+    description = "Provide a responsive floating control that returns long pages to the top and can show scroll progress."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -25,30 +28,32 @@ page BackToTopDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Navigation component</span>
         <h1>Back To Top</h1>
-        <p>Accessible scroll-to-top control with visibility threshold.</p>
-        <div class="detail-badges"><span>12 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <p>Provide a responsive floating control that returns long pages to the top and can show scroll progress.</p>
+        <div class="detail-badges"><span>15 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="BackToTop" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="BackToTop" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Back To Top</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="BackToTop" threshold="{playground_threshold}" label="{playground_label}" ariaLabel="{playground_ariaLabel}" icon="{playground_icon}" position="{playground_position}" offset="{playground_offset}" behavior="{playground_behavior}" showProgress="{playground_showProgress}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><BackToTop threshold='{playground_threshold}' label='{playground_label}' ariaLabel='{playground_ariaLabel}' icon='{playground_icon}' position='{playground_position}' offset='{playground_offset}' behavior='{playground_behavior}' showProgress='{playground_showProgress}' showLabel='{playground_showLabel}' alwaysVisible='{playground_alwaysVisible}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' shape='{playground_shape}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;BackToTop
   label="Back To Top"
   ariaLabel="Back To Top 1 example"
   showProgress="true"
+  showLabel="true"
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>12 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-back-to-top-threshold"><span><strong>threshold</strong><small>number</small></span><input id="playground-back-to-top-threshold" name="pg_threshold" type="number" value="500" /></label><label class="playground-field" for="playground-back-to-top-label"><span><strong>label</strong><small>string</small></span><input id="playground-back-to-top-label" name="pg_label" type="text" value="Back To Top" /></label><label class="playground-field" for="playground-back-to-top-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-back-to-top-ariaLabel" name="pg_ariaLabel" type="text" value="Back To Top 1 example" /></label><label class="playground-field" for="playground-back-to-top-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-back-to-top-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-back-to-top-position"><span><strong>position</strong><small>string</small></span><select id="playground-back-to-top-position" name="pg_position"><option value="right" selected>right</option><option value="top">top</option><option value="bottom">bottom</option><option value="left">left</option><option value="start">start</option><option value="end">end</option><option value="center">center</option></select></label><label class="playground-field" for="playground-back-to-top-offset"><span><strong>offset</strong><small>string</small></span><select id="playground-back-to-top-offset" name="pg_offset"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option></select></label><label class="playground-field" for="playground-back-to-top-behavior"><span><strong>behavior</strong><small>string</small></span><input id="playground-back-to-top-behavior" name="pg_behavior" type="text" value="smooth" /></label><label class="playground-toggle" for="playground-back-to-top-showProgress"><span><strong>show Progress</strong><small>boolean</small></span><input id="playground-back-to-top-showProgress" name="pg_showProgress" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-back-to-top-size"><span><strong>size</strong><small>string</small></span><select id="playground-back-to-top-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-back-to-top-color"><span><strong>color</strong><small>string</small></span><select id="playground-back-to-top-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-back-to-top-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-back-to-top-variant" name="pg_variant"><option value="solid" selected>solid</option><option value="default">default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option><option value="soft">soft</option></select></label><label class="playground-field" for="playground-back-to-top-class"><span><strong>class</strong><small>string</small></span><input id="playground-back-to-top-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <header><div><span>Component props</span><strong>15 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-back-to-top-threshold"><span><strong>threshold</strong><small>number</small></span><input id="playground-back-to-top-threshold" name="pg_threshold" type="number" value="500" /></label><label class="playground-field" for="playground-back-to-top-label"><span><strong>label</strong><small>string</small></span><input id="playground-back-to-top-label" name="pg_label" type="text" value="Back To Top" /></label><label class="playground-field" for="playground-back-to-top-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-back-to-top-ariaLabel" name="pg_ariaLabel" type="text" value="Back To Top 1 example" /></label><label class="playground-field" for="playground-back-to-top-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-back-to-top-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-back-to-top-position"><span><strong>position</strong><small>string</small></span><select id="playground-back-to-top-position" name="pg_position"><option value="right" selected>right</option><option value="left">left</option><option value="center">center</option><option value="top">top</option><option value="bottom">bottom</option><option value="start">start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-back-to-top-offset"><span><strong>offset</strong><small>string</small></span><select id="playground-back-to-top-offset" name="pg_offset"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option></select></label><label class="playground-field" for="playground-back-to-top-behavior"><span><strong>behavior</strong><small>string</small></span><select id="playground-back-to-top-behavior" name="pg_behavior"><option value="smooth" selected>smooth</option><option value="auto">auto</option></select></label><label class="playground-toggle" for="playground-back-to-top-showProgress"><span><strong>show Progress</strong><small>boolean</small></span><input id="playground-back-to-top-showProgress" name="pg_showProgress" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-back-to-top-showLabel"><span><strong>show Label</strong><small>boolean</small></span><input id="playground-back-to-top-showLabel" name="pg_showLabel" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-back-to-top-alwaysVisible"><span><strong>always Visible</strong><small>boolean</small></span><input id="playground-back-to-top-alwaysVisible" name="pg_alwaysVisible" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-back-to-top-size"><span><strong>size</strong><small>string</small></span><select id="playground-back-to-top-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-back-to-top-color"><span><strong>color</strong><small>string</small></span><select id="playground-back-to-top-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-back-to-top-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-back-to-top-variant" name="pg_variant"><option value="solid" selected>solid</option><option value="soft">soft</option><option value="outline">outline</option><option value="ghost">ghost</option><option value="minimal">minimal</option></select></label><label class="playground-field" for="playground-back-to-top-shape"><span><strong>shape</strong><small>string</small></span><select id="playground-back-to-top-shape" name="pg_shape"><option value="round" selected>round</option><option value="rounded">rounded</option><option value="pill">pill</option></select></label><label class="playground-field" for="playground-back-to-top-class"><span><strong>class</strong><small>string</small></span><input id="playground-back-to-top-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -57,75 +62,86 @@ page BackToTopDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Floating round control</h2><p>Return visitors to the top of a long page after the scroll threshold is reached.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="back-to-top-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="BackToTop" threshold="500" label="Back To Top" ariaLabel="Back To Top 1 example" icon="" showProgress="true" size="default" variant="solid" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><BackToTop threshold="500" label="Back To Top" ariaLabel="Back To Top 1 example" icon="" position="right" showProgress="true" showLabel="true" alwaysVisible="true" size="default" variant="solid" shape="round" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Floating round control usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;BackToTop
   label="Back To Top"
   ariaLabel="Back To Top 1 example"
   showProgress="true"
+  showLabel="true"
+  alwaysVisible="true"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
+          <div><span class="demo-case-eyebrow">Compact</span><h2>Pill control with label</h2><p>Show a visible text label when the action needs extra clarity.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="back-to-top-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="BackToTop" threshold="500" label="Compact example" ariaLabel="Back To Top 2 example" icon="icon-[lucide--arrow-right]" showProgress="true" size="sm" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><BackToTop threshold="500" label="Back to top" ariaLabel="Back To Top 2 example" icon="icon-[lucide--arrow-right]" position="right" showProgress="true" showLabel="true" alwaysVisible="true" size="sm" variant="soft" shape="pill" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Pill control with label usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;BackToTop
-  label="Compact example"
   ariaLabel="Back To Top 2 example"
   icon="icon-[lucide--arrow-right]"
   showProgress="true"
+  showLabel="true"
+  alwaysVisible="true"
   size="sm"
-  variant="secondary"
+  variant="soft"
+  shape="pill"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Progress-aware control</h2><p>Display page scroll progress around the floating control on long articles or directories.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="back-to-top-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="BackToTop" threshold="500" label="Advanced example" ariaLabel="Back To Top 3 example" icon="icon-[lucide--trash-2]" showProgress="true" size="lg" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><BackToTop threshold="500" label="Advanced example" ariaLabel="Back To Top 3 example" icon="icon-[lucide--trash-2]" position="left" offset="lg" showProgress="true" showLabel="true" alwaysVisible="true" size="lg" variant="outline" shape="round" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Progress-aware control usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;BackToTop
   label="Advanced example"
   ariaLabel="Back To Top 3 example"
   icon="icon-[lucide--trash-2]"
+  position="left"
+  offset="lg"
   showProgress="true"
+  showLabel="true"
+  alwaysVisible="true"
   size="lg"
-  variant="success"
+  variant="outline"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>threshold</code></td><td>number</td><td><code>500</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Back to top"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>"Scroll back to top"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--arrow-up]"</code></td><td>No</td></tr><tr><td><code>position</code></td><td>string</td><td><code>"right"</code></td><td>No</td></tr><tr><td><code>offset</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>behavior</code></td><td>string</td><td><code>"smooth"</code></td><td>No</td></tr><tr><td><code>showProgress</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"solid"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>threshold</code></td><td>number</td><td><code>500</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Back to top"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>"Scroll back to top"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--arrow-up]"</code></td><td>No</td></tr><tr><td><code>position</code></td><td>string</td><td><code>"right"</code></td><td>No</td></tr><tr><td><code>offset</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>behavior</code></td><td>string</td><td><code>"smooth"</code></td><td>No</td></tr><tr><td><code>showProgress</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showLabel</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>alwaysVisible</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"solid"</code></td><td>No</td></tr><tr><td><code>shape</code></td><td>string</td><td><code>"round"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#back-to-top-demo-1">Production default</a><a href="#back-to-top-demo-2">Compact application</a><a href="#back-to-top-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#back-to-top-demo-1">Floating round control</a><a href="#back-to-top-demo-2">Pill control with label</a><a href="#back-to-top-demo-3">Progress-aware control</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/badge.wrn b/examples/component-showcase/app/pages/components/badge.wrn
index 5a949028..ad29f208 100644
--- a/examples/component-showcase/app/pages/components/badge.wrn
+++ b/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_dotOnly = ctx.url.searchParams.get("pg_dotOnly") ?? "false"
-  state playground_dotLabel = ctx.url.searchParams.get("pg_dotLabel") ?? "Status"
-  state playground_animated = ctx.url.searchParams.get("pg_animated") ?? "false"
+  state playground_dot = (ctx.url.searchParams.get("pg_dot") ?? "false") === "true"
+  state playground_dotOnly = (ctx.url.searchParams.get("pg_dotOnly") ?? "false") === "true"
+  state playground_dotLabel = ctx.url.searchParams.get("pg_dotLabel") ?? "Badge"
+  state playground_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_dismissLabel = ctx.url.searchParams.get("pg_dismissLabel") ?? "Remove badge"
-  state playground_truncate = ctx.url.searchParams.get("pg_truncate") ?? "false"
+  state playground_dismissible = (ctx.url.searchParams.get("pg_dismissible") ?? "true") === "true"
+  state playground_dismissLabel = ctx.url.searchParams.get("pg_dismissLabel") ?? "Badge"
+  state playground_truncate = (ctx.url.searchParams.get("pg_truncate") ?? "false") === "true"
   state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "12rem"
-  state playground_anchorLabel = ctx.url.searchParams.get("pg_anchorLabel") ?? ""
+  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"
-  color="success"
+  dotLabel="Badge"
+  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" type="text" value="12rem" /></label><label class="playground-field" for="playground-badge-anchorLabel"><span><strong>anchor Label</strong><small>string</small></span><input id="playground-badge-anchorLabel" name="pg_anchorLabel" type="text" value="" /></label><label class="playground-field" for="playground-badge-anchorIcon"><span><strong>anchor Icon</strong><small>string</small></span><input id="playground-badge-anchorIcon" name="pg_anchorIcon" type="text" value="" /></label><label class="playground-field" for="playground-badge-placement"><span><strong>placement</strong><small>string</small></span><input id="playground-badge-placement" name="pg_placement" type="text" value="inline" /></label><label class="playground-field" for="playground-badge-anchorLabelText"><span><strong>anchor Label Text</strong><small>string</small></span><input id="playground-badge-anchorLabelText" name="pg_anchorLabelText" type="text" value="Badge anchor" /></label></div>
+          <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="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="wide">wide</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-field" for="playground-badge-anchorLabel"><span><strong>anchor Label</strong><small>string</small></span><input id="playground-badge-anchorLabel" name="pg_anchorLabel" type="text" value="Badge" /></label><label class="playground-field" for="playground-badge-anchorIcon"><span><strong>anchor Icon</strong><small>string</small></span><input id="playground-badge-anchorIcon" name="pg_anchorIcon" type="text" value="" /></label><label class="playground-field" for="playground-badge-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-badge-placement" name="pg_placement"><option value="inline" selected>inline</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-badge-anchorLabelText"><span><strong>anchor Label Text</strong><small>string</small></span><input id="playground-badge-anchorLabelText" name="pg_anchorLabelText" type="text" value="Badge anchor" /></label></div>
         </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"
-  color="success"
+  dotLabel="Badge"
+  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"
-  color="info"
-  variant="soft"
+  label="Compact example"
+  size="sm"
+  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"
-  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 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"
+  label="Advanced example"
+  size="lg"
+  variant="success"
+  icon="icon-[lucide--trash-2]"
+  dotLabel="Advanced example"
   dismissible="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 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"
+  dismissLabel="Advanced example"
+  anchorLabel="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>@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;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+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>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">
diff --git a/examples/component-showcase/app/pages/components/blockquote.wrn b/examples/component-showcase/app/pages/components/blockquote.wrn
index 595daabf..16bff446 100644
--- a/examples/component-showcase/app/pages/components/blockquote.wrn
+++ b/examples/component-showcase/app/pages/components/blockquote.wrn
@@ -3,17 +3,17 @@ page BlockquoteDetail {
   layout = "showcase"
   state playground_quote = ctx.url.searchParams.get("pg_quote") ?? "I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."
   state playground_citation = ctx.url.searchParams.get("pg_citation") ?? ""
-  state playground_citationTitle = ctx.url.searchParams.get("pg_citationTitle") ?? ""
+  state playground_citationTitle = ctx.url.searchParams.get("pg_citationTitle") ?? "Blockquote example"
   state playground_citationUrl = ctx.url.searchParams.get("pg_citationUrl") ?? ""
   state playground_avatarSrc = ctx.url.searchParams.get("pg_avatarSrc") ?? ""
   state playground_avatarAlt = ctx.url.searchParams.get("pg_avatarAlt") ?? ""
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_align = ctx.url.searchParams.get("pg_align") ?? "left"
+  state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
-  state playground_quoteMark = ctx.url.searchParams.get("pg_quoteMark") ?? "true"
-  state playground_italic = ctx.url.searchParams.get("pg_italic") ?? "true"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
+  state playground_quoteMark = (ctx.url.searchParams.get("pg_quoteMark") ?? "true") === "true"
+  state playground_italic = (ctx.url.searchParams.get("pg_italic") ?? "true") === "true"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Blockquote"
     description = "Theme-aware, responsive blockquote component."
@@ -31,21 +31,25 @@ page BlockquoteDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Blockquote" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Blockquote" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Blockquote</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="Blockquote" quote="{playground_quote}" citation="{playground_citation}" citationTitle="{playground_citationTitle}" citationUrl="{playground_citationUrl}" avatarSrc="{playground_avatarSrc}" avatarAlt="{playground_avatarAlt}" size="{playground_size}" color="{playground_color}" align="{playground_align}" variant="{playground_variant}" quoteMark="{playground_quoteMark}" italic="{playground_italic}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Blockquote quote='{playground_quote}' citation='{playground_citation}' citationTitle='{playground_citationTitle}' citationUrl='{playground_citationUrl}' avatarSrc='{playground_avatarSrc}' avatarAlt='{playground_avatarAlt}' size='{playground_size}' color='{playground_color}' align='{playground_align}' variant='{playground_variant}' quoteMark='{playground_quoteMark}' italic='{playground_italic}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
-            <pre><code data-playground-code>&lt;Blockquote /&gt;</code></pre>
+            <pre><code data-playground-code>&lt;Blockquote
+  citationTitle="Blockquote example"
+  align="start"
+/&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-blockquote-quote"><span><strong>quote</strong><small>string</small></span><input id="playground-blockquote-quote" name="pg_quote" type="text" value="I just wanted to say that I&#39;m very happy with my purchase so far. The documentation is outstanding - clear and detailed." /></label><label class="playground-field" for="playground-blockquote-citation"><span><strong>citation</strong><small>string</small></span><input id="playground-blockquote-citation" name="pg_citation" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-citationTitle"><span><strong>citation Title</strong><small>string</small></span><input id="playground-blockquote-citationTitle" name="pg_citationTitle" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-citationUrl"><span><strong>citation Url</strong><small>string</small></span><input id="playground-blockquote-citationUrl" name="pg_citationUrl" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-avatarSrc"><span><strong>avatar Src</strong><small>string</small></span><input id="playground-blockquote-avatarSrc" name="pg_avatarSrc" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-avatarAlt"><span><strong>avatar Alt</strong><small>string</small></span><input id="playground-blockquote-avatarAlt" name="pg_avatarAlt" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-size"><span><strong>size</strong><small>string</small></span><select id="playground-blockquote-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-blockquote-color"><span><strong>color</strong><small>string</small></span><select id="playground-blockquote-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-blockquote-align"><span><strong>align</strong><small>string</small></span><select id="playground-blockquote-align" name="pg_align"><option value="left" selected>left</option><option value="center">center</option><option value="right">right</option></select></label><label class="playground-field" for="playground-blockquote-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-blockquote-variant" name="pg_variant"><option value="default" selected>default</option><option value="bordered">bordered</option></select></label><label class="playground-toggle" for="playground-blockquote-quoteMark"><span><strong>quote Mark</strong><small>boolean</small></span><input id="playground-blockquote-quoteMark" name="pg_quoteMark" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-blockquote-italic"><span><strong>italic</strong><small>boolean</small></span><input id="playground-blockquote-italic" name="pg_italic" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-blockquote-class"><span><strong>class</strong><small>string</small></span><input id="playground-blockquote-class" name="pg_class" type="text" value="" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-blockquote-quote"><span><strong>quote</strong><small>string</small></span><input id="playground-blockquote-quote" name="pg_quote" type="text" value="I just wanted to say that I&#39;m very happy with my purchase so far. The documentation is outstanding - clear and detailed." /></label><label class="playground-field" for="playground-blockquote-citation"><span><strong>citation</strong><small>string</small></span><input id="playground-blockquote-citation" name="pg_citation" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-citationTitle"><span><strong>citation Title</strong><small>string</small></span><input id="playground-blockquote-citationTitle" name="pg_citationTitle" type="text" value="Blockquote example" /></label><label class="playground-field" for="playground-blockquote-citationUrl"><span><strong>citation Url</strong><small>string</small></span><input id="playground-blockquote-citationUrl" name="pg_citationUrl" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-avatarSrc"><span><strong>avatar Src</strong><small>string</small></span><input id="playground-blockquote-avatarSrc" name="pg_avatarSrc" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-avatarAlt"><span><strong>avatar Alt</strong><small>string</small></span><input id="playground-blockquote-avatarAlt" name="pg_avatarAlt" type="text" value="" /></label><label class="playground-field" for="playground-blockquote-size"><span><strong>size</strong><small>string</small></span><select id="playground-blockquote-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-blockquote-color"><span><strong>color</strong><small>string</small></span><select id="playground-blockquote-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-blockquote-align"><span><strong>align</strong><small>string</small></span><select id="playground-blockquote-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-blockquote-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-blockquote-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-toggle" for="playground-blockquote-quoteMark"><span><strong>quote Mark</strong><small>boolean</small></span><input id="playground-blockquote-quoteMark" name="pg_quoteMark" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-blockquote-italic"><span><strong>italic</strong><small>boolean</small></span><input id="playground-blockquote-italic" name="pg_italic" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-blockquote-class"><span><strong>class</strong><small>string</small></span><input id="playground-blockquote-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -60,11 +64,15 @@ page BlockquoteDetail {
         <div class="demo-workbench">
           <div id="blockquote-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Blockquote" quote="I just wanted to say that I&#39;m very happy with my purchase so far. The documentation is outstanding - clear and detailed." size="md" color="primary" align="left" variant="default" quoteMark="true" italic="true"></div></div>
+            
+            <div class="demo-render"><Blockquote citationTitle="Blockquote example" size="md" align="start" variant="default" quoteMark="true" italic="true" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Blockquote /&gt;</code></pre>
+            <pre><code>&lt;Blockquote
+  citationTitle="Blockquote example"
+  align="start"
+/&gt;</code></pre>
           </section>
         </div>
       </article>
@@ -76,17 +84,16 @@ page BlockquoteDetail {
         <div class="demo-workbench">
           <div id="blockquote-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Blockquote" quote="Good design makes the complex understandable and the useful feel effortless." citation="Josh Grazioso" citationTitle="Product designer" size="sm" color="info" align="center" variant="default" quoteMark="true" italic="true"></div></div>
+            
+            <div class="demo-render"><Blockquote citationTitle="Compact Blockquote" size="sm" align="center" variant="secondary" quoteMark="true" italic="true" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Blockquote
-  quote="Good design makes the complex understandable and the useful feel effortless."
-  citation="Josh Grazioso"
-  citationTitle="Product designer"
+  citationTitle="Compact Blockquote"
   size="sm"
-  color="info"
   align="center"
+  variant="secondary"
 /&gt;</code></pre>
           </section>
         </div>
@@ -99,30 +106,25 @@ page BlockquoteDetail {
         <div class="demo-workbench">
           <div id="blockquote-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Blockquote" quote="The strongest product experiences are built when clarity, craft, and empathy reinforce one another." citation="Josh Grazioso" citationTitle="Source title" citationUrl="#blockquote-demo" avatarSrc="/avatar-example.svg" avatarAlt="Josh Grazioso" size="lg" color="success" align="left" variant="bordered" quoteMark="false" italic="true"></div></div>
+            
+            <div class="demo-render"><Blockquote citationTitle="Advanced Blockquote" size="lg" align="end" variant="success" quoteMark="true" italic="true" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Blockquote
-  quote="The strongest product experiences are built when clarity, craft, and empathy reinforce one another."
-  citation="Josh Grazioso"
-  citationTitle="Source title"
-  citationUrl="#blockquote-demo"
-  avatarSrc="/avatar-example.svg"
-  avatarAlt="Josh Grazioso"
+  citationTitle="Advanced Blockquote"
   size="lg"
-  color="success"
-  variant="bordered"
-  quoteMark="false"
+  align="end"
+  variant="success"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
+        
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>quote</code></td><td>string</td><td><code>"I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."</code></td><td>No</td></tr><tr><td><code>citation</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>citationTitle</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>citationUrl</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>avatarSrc</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>avatarAlt</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>quoteMark</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>italic</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#blockquote-demo-1">Production default</a><a href="#blockquote-demo-2">Compact application</a><a href="#blockquote-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#blockquote-demo-1">Production default</a><a href="#blockquote-demo-2">Compact application</a><a href="#blockquote-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/breadcrumb.wrn b/examples/component-showcase/app/pages/components/breadcrumb.wrn
index 82d195c9..d0357776 100644
--- a/examples/component-showcase/app/pages/components/breadcrumb.wrn
+++ b/examples/component-showcase/app/pages/components/breadcrumb.wrn
@@ -1,16 +1,21 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page BreadcrumbDetail {
   layout = "showcase"
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Breadcrumb"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"breadcrumb-0-1\",\"key\":\"breadcrumb-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#breadcrumb-demo\",\"actionHref\":\"#breadcrumb-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"breadcrumb-0-2\",\"key\":\"breadcrumb-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#breadcrumb-demo\",\"actionHref\":\"#breadcrumb-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
+  state playground_active = ctx.url.searchParams.get("pg_active") ?? ""
+  state playground_separator = ctx.url.searchParams.get("pg_separator") ?? "chevron"
+  state playground_showHome = (ctx.url.searchParams.get("pg_showHome") ?? "true") === "true"
+  state playground_homeLabel = ctx.url.searchParams.get("pg_homeLabel") ?? "Breadcrumb"
+  state playground_homeHref = ctx.url.searchParams.get("pg_homeHref") ?? "#breadcrumb-demo"
+  state playground_homeIcon = ctx.url.searchParams.get("pg_homeIcon") ?? "icon-[lucide--house]"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Breadcrumb"
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"breadcrumb-0-1\",\n    \"key\": \"breadcrumb-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#breadcrumb-demo\",\n    \"actionHref\": \"#breadcrumb-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"breadcrumb-0-2\",\n    \"key\": \"breadcrumb-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#breadcrumb-demo\",\n    \"actionHref\": \"#breadcrumb-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
-  state playground_active = ctx.url.searchParams.get("pg_active") ?? ""
-  state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal"
+  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "minimal"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Breadcrumb"
-    description = "Theme-aware, responsive breadcrumb component."
+    description = "Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -20,17 +25,17 @@ page BreadcrumbDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Navigation component</span>
         <h1>Breadcrumb</h1>
-        <p>Theme-aware, responsive breadcrumb component.</p>
-        <div class="detail-badges"><span>7 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <p>Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events.</p>
+        <div class="detail-badges"><span>12 props</span><span>0 slots</span><span>1 events</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Breadcrumb" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Breadcrumb" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="select">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Breadcrumb</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="Breadcrumb" size="{playground_size}" color="{playground_color}" label="{playground_label}" items="{playground_items}" active="{playground_active}" orientation="{playground_orientation}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Breadcrumb label='{playground_label}' items='{playground_items}' active='{playground_active}' separator='{playground_separator}' showHome='{playground_showHome}' homeLabel='{playground_homeLabel}' homeHref='{playground_homeHref}' homeIcon='{playground_homeIcon}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Breadcrumb
@@ -142,13 +147,17 @@ page BreadcrumbDetail {
       ]
     &#125;
   ]'
+  showHome="true"
+  homeLabel="Breadcrumb"
+  homeHref="#breadcrumb-demo"
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-breadcrumb-size"><span><strong>size</strong><small>string</small></span><select id="playground-breadcrumb-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-breadcrumb-color"><span><strong>color</strong><small>string</small></span><select id="playground-breadcrumb-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-breadcrumb-label"><span><strong>label</strong><small>string</small></span><input id="playground-breadcrumb-label" name="pg_label" type="text" value="Breadcrumb" /></label><label class="playground-field" for="playground-breadcrumb-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-breadcrumb-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+          <header><div><span>Component props</span><strong>12 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-breadcrumb-label"><span><strong>label</strong><small>string</small></span><input id="playground-breadcrumb-label" name="pg_label" type="text" value="Breadcrumb" /></label><label class="playground-field" for="playground-breadcrumb-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-breadcrumb-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
     "id": "breadcrumb-0-1",
     "key": "breadcrumb-0-1",
@@ -255,7 +264,7 @@ page BreadcrumbDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-breadcrumb-active"><span><strong>active</strong><small>string</small></span><input id="playground-breadcrumb-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-breadcrumb-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-breadcrumb-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-breadcrumb-class"><span><strong>class</strong><small>string</small></span><input id="playground-breadcrumb-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-breadcrumb-active"><span><strong>active</strong><small>string</small></span><input id="playground-breadcrumb-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-breadcrumb-separator"><span><strong>separator</strong><small>string</small></span><select id="playground-breadcrumb-separator" name="pg_separator"><option value="chevron" selected>chevron</option><option value="slash">slash</option><option value="dot">dot</option><option value="arrow">arrow</option></select></label><label class="playground-toggle" for="playground-breadcrumb-showHome"><span><strong>show Home</strong><small>boolean</small></span><input id="playground-breadcrumb-showHome" name="pg_showHome" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-breadcrumb-homeLabel"><span><strong>home Label</strong><small>string</small></span><input id="playground-breadcrumb-homeLabel" name="pg_homeLabel" type="text" value="Breadcrumb" /></label><label class="playground-field" for="playground-breadcrumb-homeHref"><span><strong>home Href</strong><small>string</small></span><input id="playground-breadcrumb-homeHref" name="pg_homeHref" type="text" value="#breadcrumb-demo" /></label><label class="playground-field" for="playground-breadcrumb-homeIcon"><span><strong>home Icon</strong><small>string</small></span><input id="playground-breadcrumb-homeIcon" name="pg_homeIcon" type="text" value="icon-[lucide--house]" /></label><label class="playground-field" for="playground-breadcrumb-size"><span><strong>size</strong><small>string</small></span><select id="playground-breadcrumb-size" name="pg_size"><option value="default" selected>default</option><option value="small">small</option><option value="medium">medium</option><option value="large">large</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-breadcrumb-color"><span><strong>color</strong><small>string</small></span><select id="playground-breadcrumb-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-breadcrumb-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-breadcrumb-variant" name="pg_variant"><option value="minimal" selected>minimal</option><option value="soft">soft</option><option value="outline">outline</option><option value="contrast">contrast</option></select></label><label class="playground-field" for="playground-breadcrumb-class"><span><strong>class</strong><small>string</small></span><input id="playground-breadcrumb-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -264,397 +273,136 @@ page BreadcrumbDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Minimal page trail</h2><p>Use a restrained breadcrumb above standard page content.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="breadcrumb-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Breadcrumb" size="default" label="Breadcrumb" items="[{&quot;id&quot;:&quot;breadcrumb-0-1&quot;,&quot;key&quot;:&quot;breadcrumb-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#breadcrumb-demo&quot;,&quot;actionHref&quot;:&quot;#breadcrumb-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;breadcrumb-0-2&quot;,&quot;key&quot;:&quot;breadcrumb-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#breadcrumb-demo&quot;,&quot;actionHref&quot;:&quot;#breadcrumb-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Breadcrumb label="Breadcrumb" items='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' showHome="true" homeLabel="Breadcrumb" homeHref="#breadcrumb-demo" size="small" variant="minimal" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Minimal page trail usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Breadcrumb
   items='[
     &#123;
-      "id": "breadcrumb-0-1",
-      "key": "breadcrumb-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#breadcrumb-demo",
-      "actionHref": "#breadcrumb-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "Home",
+      "href": "/",
+      "icon": "icon-[lucide--house]"
     &#125;,
     &#123;
-      "id": "breadcrumb-0-2",
-      "key": "breadcrumb-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#breadcrumb-demo",
-      "actionHref": "#breadcrumb-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "Components",
+      "href": "/base"
+    &#125;,
+    &#123;
+      "label": "Page header",
+      "current": true
     &#125;
   ]'
+  showHome="true"
+  homeLabel="Breadcrumb"
+  homeHref="#breadcrumb-demo"
+  size="small"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
+          <div><span class="demo-case-eyebrow">Compact</span><h2>Soft navigation trail</h2><p>Add a soft surface when the breadcrumb needs more separation from surrounding content.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="breadcrumb-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Breadcrumb" size="sm" label="Compact example" items="[{&quot;id&quot;:&quot;breadcrumb-1-1&quot;,&quot;key&quot;:&quot;breadcrumb-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#breadcrumb-demo&quot;,&quot;actionHref&quot;:&quot;#breadcrumb-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;breadcrumb-1-2&quot;,&quot;key&quot;:&quot;breadcrumb-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#breadcrumb-demo&quot;,&quot;actionHref&quot;:&quot;#breadcrumb-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Breadcrumb label="Compact example" items='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' showHome="true" homeLabel="Compact example" homeHref="#breadcrumb-demo" size="medium" variant="soft" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Soft navigation trail usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Breadcrumb
-  size="sm"
   label="Compact example"
   items='[
     &#123;
-      "id": "breadcrumb-1-1",
-      "key": "breadcrumb-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#breadcrumb-demo",
-      "actionHref": "#breadcrumb-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "Home",
+      "href": "/",
+      "icon": "icon-[lucide--house]"
     &#125;,
     &#123;
-      "id": "breadcrumb-1-2",
-      "key": "breadcrumb-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#breadcrumb-demo",
-      "actionHref": "#breadcrumb-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "Components",
+      "href": "/base"
+    &#125;,
+    &#123;
+      "label": "Page header",
+      "current": true
     &#125;
   ]'
+  showHome="true"
+  homeLabel="Compact example"
+  homeHref="#breadcrumb-demo"
+  size="medium"
+  variant="soft"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Large directory breadcrumb</h2><p>Use a larger breadcrumb in directories, dashboards, and touch-first interfaces.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="breadcrumb-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Breadcrumb" size="lg" label="Advanced example" items="[{&quot;id&quot;:&quot;breadcrumb-2-1&quot;,&quot;key&quot;:&quot;breadcrumb-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#breadcrumb-demo&quot;,&quot;actionHref&quot;:&quot;#breadcrumb-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;breadcrumb-2-2&quot;,&quot;key&quot;:&quot;breadcrumb-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#breadcrumb-demo&quot;,&quot;actionHref&quot;:&quot;#breadcrumb-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Breadcrumb label="Advanced example" items='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' separator="slash" showHome="true" homeLabel="Advanced example" homeHref="#breadcrumb-demo" size="large" variant="outline" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Large directory breadcrumb usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Breadcrumb
-  size="lg"
   label="Advanced example"
   items='[
     &#123;
-      "id": "breadcrumb-2-1",
-      "key": "breadcrumb-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#breadcrumb-demo",
-      "actionHref": "#breadcrumb-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
+      "label": "Home",
+      "href": "/",
+      "icon": "icon-[lucide--house]"
     &#125;,
     &#123;
-      "id": "breadcrumb-2-2",
-      "key": "breadcrumb-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#breadcrumb-demo",
-      "actionHref": "#breadcrumb-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
+      "label": "Components",
+      "href": "/base"
+    &#125;,
+    &#123;
+      "label": "Page header",
+      "current": true
     &#125;
   ]'
+  separator="slash"
+  showHome="true"
+  homeLabel="Advanced example"
+  homeHref="#breadcrumb-demo"
+  size="large"
+  variant="outline"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@navigate</code><span>Fires when the component emits the navigate event.</span></div><div><code>@click</code><span>Fires when the component is activated by pointer or keyboard.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;Breadcrumb
+  @select='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"Breadcrumb\"], [data-component=\"Breadcrumb\"]")
 
-component.addEventListener('navigate', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Breadcrumb"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)</code></pre></section></div></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>label</code></td><td>string</td><td><code>"Breadcrumb"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>separator</code></td><td>string</td><td><code>"chevron"</code></td><td>No</td></tr><tr><td><code>showHome</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>homeLabel</code></td><td>string</td><td><code>"Home"</code></td><td>No</td></tr><tr><td><code>homeHref</code></td><td>string</td><td><code>"/"</code></td><td>No</td></tr><tr><td><code>homeIcon</code></td><td>string</td><td><code>"icon-[lucide--house]"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"minimal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#breadcrumb-demo-1">Production default</a><a href="#breadcrumb-demo-2">Compact application</a><a href="#breadcrumb-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#breadcrumb-demo-1">Minimal page trail</a><a href="#breadcrumb-demo-2">Soft navigation trail</a><a href="#breadcrumb-demo-3">Large directory breadcrumb</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
       <a href="/components/back-to-top"><small>Previous</small><strong>← Back To Top</strong></a>
-      <a href="/components/footer"><small>Next</small><strong>Footer →</strong></a>
+      <a href="/components/mega-menu"><small>Next</small><strong>Mega Menu →</strong></a>
     </nav>
   }
 }
diff --git a/examples/component-showcase/app/pages/components/button-group.wrn b/examples/component-showcase/app/pages/components/button-group.wrn
index a09827af..25a33484 100644
--- a/examples/component-showcase/app/pages/components/button-group.wrn
+++ b/examples/component-showcase/app/pages/components/button-group.wrn
@@ -1,19 +1,19 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page ButtonGroupDetail {
   layout = "showcase"
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"label\": \"Profile\",\n    \"value\": \"profile\"\n  },\n  {\n    \"label\": \"Settings\",\n    \"value\": \"settings\"\n  },\n  {\n    \"label\": \"Messages\",\n    \"value\": \"messages\"\n  }\n]"
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? "profile"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"button-group-0-1\",\"key\":\"button-group-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#button-group-demo\",\"actionHref\":\"#button-group-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"button-group-0-2\",\"key\":\"button-group-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#button-group-demo\",\"actionHref\":\"#button-group-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
+  state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "outline"
+  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal"
-  state playground_responsive = ctx.url.searchParams.get("pg_responsive") ?? "false"
-  state playground_attached = ctx.url.searchParams.get("pg_attached") ?? "true"
-  state playground_selectable = ctx.url.searchParams.get("pg_selectable") ?? "true"
-  state playground_toolbar = ctx.url.searchParams.get("pg_toolbar") ?? "false"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
-  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Button group"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
+  state playground_responsive = (ctx.url.searchParams.get("pg_responsive") ?? "false") === "true"
+  state playground_attached = (ctx.url.searchParams.get("pg_attached") ?? "true") === "true"
+  state playground_selectable = (ctx.url.searchParams.get("pg_selectable") ?? "false") === "true"
+  state playground_toolbar = (ctx.url.searchParams.get("pg_toolbar") ?? "false") === "true"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Button Group 1 example"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Button Group"
     description = "Theme-aware, responsive button group component."
@@ -31,52 +31,240 @@ page ButtonGroupDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="ButtonGroup" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="ButtonGroup" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="click,select,change">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Button Group</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="ButtonGroup" items="{playground_items}" value="{playground_value}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" orientation="{playground_orientation}" responsive="{playground_responsive}" attached="{playground_attached}" selectable="{playground_selectable}" toolbar="{playground_toolbar}" disabled="{playground_disabled}" ariaLabel="{playground_ariaLabel}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><ButtonGroup items='{playground_items}' value='{playground_value}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' orientation='{playground_orientation}' responsive='{playground_responsive}' attached='{playground_attached}' selectable='{playground_selectable}' toolbar='{playground_toolbar}' disabled='{playground_disabled}' ariaLabel='{playground_ariaLabel}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;ButtonGroup
   items='[
     &#123;
-      "label": "Profile",
-      "value": "profile"
+      "id": "button-group-0-1",
+      "key": "button-group-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "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",
-      "value": "settings"
-    &#125;,
-    &#123;
-      "label": "Messages",
-      "value": "messages"
+      "id": "button-group-0-2",
+      "key": "button-group-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
     &#125;
   ]'
-  value="profile"
-  variant="outline"
-  selectable="true"
+  value="sample-1"
+  ariaLabel="Button Group 1 example"
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
           <div class="playground-fields"><label class="playground-field" for="playground-button-group-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-button-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
-    "label": "Profile",
-    "value": "profile"
+    "id": "button-group-0-1",
+    "key": "button-group-0-1",
+    "value": "primary",
+    "label": "Primary workflow",
+    "title": "Primary workflow",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "A configurable sample message.",
+    "href": "#button-group-demo",
+    "actionHref": "#button-group-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": true,
+    "selected": true,
+    "checked": true,
+    "disabled": false,
+    "outgoing": false,
+    "open": true,
+    "number": 1,
+    "count": 16,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 1",
+    "items": [
+      {
+        "label": "Nested option A",
+        "value": "nested-a"
+      },
+      {
+        "label": "Nested option B",
+        "value": "nested-b"
+      }
+    ],
+    "links": [
+      {
+        "label": "Documentation",
+        "href": "#documentation"
+      },
+      {
+        "label": "API reference",
+        "href": "#api-reference"
+      }
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
   },
   {
-    "label": "Settings",
-    "value": "settings"
-  },
-  {
-    "label": "Messages",
-    "value": "messages"
+    "id": "button-group-0-2",
+    "key": "button-group-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#button-group-demo",
+    "actionHref": "#button-group-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": false,
+    "selected": false,
+    "checked": false,
+    "disabled": false,
+    "outgoing": true,
+    "open": true,
+    "number": 2,
+    "count": 32,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 2",
+    "items": [
+      {
+        "label": "Nested option A",
+        "value": "nested-a"
+      },
+      {
+        "label": "Nested option B",
+        "value": "nested-b"
+      }
+    ],
+    "links": [
+      {
+        "label": "Documentation",
+        "href": "#documentation"
+      },
+      {
+        "label": "API reference",
+        "href": "#api-reference"
+      }
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-button-group-value"><span><strong>value</strong><small>string</small></span><input id="playground-button-group-value" name="pg_value" type="text" value="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",
-      "value": "profile"
+      "id": "button-group-0-1",
+      "key": "button-group-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "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",
-      "value": "settings"
-    &#125;,
-    &#123;
-      "label": "Messages",
-      "value": "messages"
+      "id": "button-group-0-2",
+      "key": "button-group-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
     &#125;
   ]'
-  value="profile"
-  variant="outline"
-  selectable="true"
+  value="sample-1"
+  ariaLabel="Button Group 1 example"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Sizes</span><h2>Small</h2><p>Use small grouped buttons in dense toolbars, tables, and utility surfaces.</p></div>
+          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="button-group-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="ButtonGroup" items="[{&quot;label&quot;:&quot;Profile&quot;,&quot;value&quot;:&quot;profile&quot;},{&quot;label&quot;:&quot;Settings&quot;,&quot;value&quot;:&quot;settings&quot;},{&quot;label&quot;:&quot;Messages&quot;,&quot;value&quot;:&quot;messages&quot;}]" size="sm" color="primary" variant="outline" orientation="horizontal" attached="true"></div></div>
+            
+            <div class="demo-render"><ButtonGroup items='[{"id":"button-group-1-1","key":"button-group-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#button-group-demo","actionHref":"#button-group-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"button-group-1-2","key":"button-group-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#button-group-demo","actionHref":"#button-group-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' value="sample-2" size="sm" variant="secondary" responsive="false" attached="true" selectable="false" toolbar="false" disabled="false" ariaLabel="Button Group 2 example" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Small usage">
+          <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;ButtonGroup
   items='[
     &#123;
-      "label": "Profile",
-      "value": "profile"
+      "id": "button-group-1-1",
+      "key": "button-group-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "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",
-      "value": "settings"
-    &#125;,
-    &#123;
-      "label": "Messages",
-      "value": "messages"
+      "id": "button-group-1-2",
+      "key": "button-group-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
     &#125;
   ]'
+  value="sample-2"
   size="sm"
-  variant="outline"
+  variant="secondary"
+  ariaLabel="Button Group 2 example"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Sizes</span><h2>Medium</h2><p>Use the balanced medium size for most product interfaces.</p></div>
+          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="button-group-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="ButtonGroup" items="[{&quot;label&quot;:&quot;Profile&quot;,&quot;value&quot;:&quot;profile&quot;},{&quot;label&quot;:&quot;Settings&quot;,&quot;value&quot;:&quot;settings&quot;},{&quot;label&quot;:&quot;Messages&quot;,&quot;value&quot;:&quot;messages&quot;}]" size="md" color="primary" variant="outline" orientation="horizontal" attached="true"></div></div>
+            
+            <div class="demo-render"><ButtonGroup items='[{"id":"button-group-2-1","key":"button-group-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#button-group-demo","actionHref":"#button-group-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"button-group-2-2","key":"button-group-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#button-group-demo","actionHref":"#button-group-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' value="sample-3" size="lg" variant="success" responsive="false" attached="true" selectable="false" toolbar="false" disabled="false" ariaLabel="Button Group 3 example" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Medium usage">
+          <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;ButtonGroup
   items='[
     &#123;
-      "label": "Profile",
-      "value": "profile"
+      "id": "button-group-2-1",
+      "key": "button-group-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "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",
-      "value": "settings"
-    &#125;,
-    &#123;
-      "label": "Messages",
-      "value": "messages"
-    &#125;
-  ]'
-  variant="outline"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Sizes</span><h2>Large</h2><p>Use large grouped buttons for prominent actions and touch-focused layouts.</p></div>
-          <span class="demo-case-number">04</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="button-group-demo-4" class="demo-canvas demo-canvas--4">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="ButtonGroup" items="[{&quot;label&quot;:&quot;Profile&quot;,&quot;value&quot;:&quot;profile&quot;},{&quot;label&quot;:&quot;Settings&quot;,&quot;value&quot;:&quot;settings&quot;},{&quot;label&quot;:&quot;Messages&quot;,&quot;value&quot;:&quot;messages&quot;}]" size="lg" color="primary" variant="outline" orientation="horizontal" attached="true"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Large usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;ButtonGroup
-  items='[
-    &#123;
-      "label": "Profile",
-      "value": "profile"
-    &#125;,
-    &#123;
-      "label": "Settings",
-      "value": "settings"
-    &#125;,
-    &#123;
-      "label": "Messages",
-      "value": "messages"
+      "id": "button-group-2-2",
+      "key": "button-group-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#button-group-demo",
+      "actionHref": "#button-group-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
     &#125;
   ]'
+  value="sample-3"
   size="lg"
-  variant="outline"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Responsive stack</span><h2>Responsive stack</h2><p>Keep actions inline on larger screens and stack them on narrow viewports.</p></div>
-          <span class="demo-case-number">05</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="button-group-demo-5" class="demo-canvas demo-canvas--5">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="ButtonGroup" items="[{&quot;label&quot;:&quot;Save draft&quot;,&quot;value&quot;:&quot;draft&quot;},{&quot;label&quot;:&quot;Preview&quot;,&quot;value&quot;:&quot;preview&quot;},{&quot;label&quot;:&quot;Publish&quot;,&quot;value&quot;:&quot;publish&quot;}]" size="md" color="primary" variant="outline" orientation="horizontal" responsive="true" attached="true"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Responsive stack usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;ButtonGroup
-  items='[
-    &#123;
-      "label": "Save draft",
-      "value": "draft"
-    &#125;,
-    &#123;
-      "label": "Preview",
-      "value": "preview"
-    &#125;,
-    &#123;
-      "label": "Publish",
-      "value": "publish"
-    &#125;
-  ]'
-  variant="outline"
-  responsive="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Orientation</span><h2>Vertical stack</h2><p>Stack connected actions vertically while preserving joined borders.</p></div>
-          <span class="demo-case-number">06</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="button-group-demo-6" class="demo-canvas demo-canvas--6">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="ButtonGroup" items="[{&quot;label&quot;:&quot;Account&quot;,&quot;value&quot;:&quot;account&quot;},{&quot;label&quot;:&quot;Security&quot;,&quot;value&quot;:&quot;security&quot;},{&quot;label&quot;:&quot;Notifications&quot;,&quot;value&quot;:&quot;notifications&quot;}]" size="md" color="primary" variant="outline" orientation="vertical" attached="true"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Vertical stack usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;ButtonGroup
-  items='[
-    &#123;
-      "label": "Account",
-      "value": "account"
-    &#125;,
-    &#123;
-      "label": "Security",
-      "value": "security"
-    &#125;,
-    &#123;
-      "label": "Notifications",
-      "value": "notifications"
-    &#125;
-  ]'
-  variant="outline"
-  orientation="vertical"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Toolbar</span><h2>Button toolbar</h2><p>Expose a labeled toolbar with selectable formatting actions.</p></div>
-          <span class="demo-case-number">07</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="button-group-demo-7" class="demo-canvas demo-canvas--7">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="ButtonGroup" items="[{&quot;label&quot;:&quot;Bold&quot;,&quot;value&quot;:&quot;bold&quot;,&quot;icon&quot;:&quot;icon-[lucide--bold]&quot;},{&quot;label&quot;:&quot;Italic&quot;,&quot;value&quot;:&quot;italic&quot;,&quot;icon&quot;:&quot;icon-[lucide--italic]&quot;},{&quot;label&quot;:&quot;Underline&quot;,&quot;value&quot;:&quot;underline&quot;,&quot;icon&quot;:&quot;icon-[lucide--underline]&quot;}]" value="bold" size="md" color="primary" variant="outline" orientation="horizontal" attached="true" selectable="true" toolbar="true" ariaLabel="Text formatting"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Button toolbar usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;ButtonGroup
-  items='[
-    &#123;
-      "label": "Bold",
-      "value": "bold",
-      "icon": "icon-[lucide--bold]"
-    &#125;,
-    &#123;
-      "label": "Italic",
-      "value": "italic",
-      "icon": "icon-[lucide--italic]"
-    &#125;,
-    &#123;
-      "label": "Underline",
-      "value": "underline",
-      "icon": "icon-[lucide--underline]"
-    &#125;
-  ]'
-  value="bold"
-  variant="outline"
-  selectable="true"
-  toolbar="true"
-  ariaLabel="Text formatting"
+  variant="success"
+  ariaLabel="Button Group 3 example"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@click</code><span>Fires when the component is activated by pointer or keyboard.</span></div><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@click</code><span>Fires when the interactive surface is activated.</span></div><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;ButtonGroup
+  @click='console.log(event.detail)'
+  @select='console.log(event.detail)'
+  @change='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"ButtonGroup\"], [data-component=\"ButtonGroup\"]")
 
-component.addEventListener('click', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("click", (event) =&gt; &#123;
+  console.log("click", event.detail)
+&#125;)
+
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>responsive</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>attached</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>selectable</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>toolbar</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>"Button group"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><span class="detail-toc-group">Basic usage</span><a href="#button-group-demo-1">Example</a><span class="detail-toc-group">Sizes</span><a href="#button-group-demo-2">Small</a><a href="#button-group-demo-3">Medium</a><a href="#button-group-demo-4">Large</a><a href="#button-group-demo-5">Responsive stack</a><a href="#button-group-demo-6">Vertical stack</a><a href="#button-group-demo-7">Button toolbar</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#button-group-demo-1">Production default</a><a href="#button-group-demo-2">Compact application</a><a href="#button-group-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/button.wrn b/examples/component-showcase/app/pages/components/button.wrn
index 23038156..73a4477b 100644
--- a/examples/component-showcase/app/pages/components/button.wrn
+++ b/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_loading = ctx.url.searchParams.get("pg_loading") ?? "false"
-  state playground_pill = ctx.url.searchParams.get("pg_pill") ?? "false"
-  state playground_fullWidth = ctx.url.searchParams.get("pg_fullWidth") ?? "false"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  state playground_loading = (ctx.url.searchParams.get("pg_loading") ?? "false") === "true"
+  state playground_pill = (ctx.url.searchParams.get("pg_pill") ?? "false") === "true"
+  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 value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-button-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-button-ariaLabel" name="pg_ariaLabel" type="text" value="" /></label><label class="playground-field" for="playground-button-ariaPressed"><span><strong>aria Pressed</strong><small>string</small></span><input id="playground-button-ariaPressed" name="pg_ariaPressed" type="text" value="" /></label><label class="playground-field" for="playground-button-ariaExpanded"><span><strong>aria Expanded</strong><small>string</small></span><input id="playground-button-ariaExpanded" name="pg_ariaExpanded" type="text" value="" /></label><label class="playground-field" for="playground-button-ariaControls"><span><strong>aria Controls</strong><small>string</small></span><input id="playground-button-ariaControls" name="pg_ariaControls" type="text" value="" /></label><label class="playground-field" for="playground-button-title"><span><strong>title</strong><small>string</small></span><input id="playground-button-title" name="pg_title" type="text" value="" /></label><label class="playground-toggle" for="playground-button-autofocus"><span><strong>autofocus</strong><small>boolean</small></span><input id="playground-button-autofocus" name="pg_autofocus" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-button-controlClass"><span><strong>control Class</strong><small>string</small></span><input id="playground-button-controlClass" name="pg_controlClass" type="text" value="" /></label><label class="playground-field" for="playground-button-class"><span><strong>class</strong><small>string</small></span><input id="playground-button-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <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><strong>aria Label</strong><small>string</small></span><input id="playground-button-ariaLabel" name="pg_ariaLabel" type="text" value="" /></label><label class="playground-field" for="playground-button-ariaPressed"><span><strong>aria Pressed</strong><small>string</small></span><input id="playground-button-ariaPressed" name="pg_ariaPressed" type="text" value="" /></label><label class="playground-field" for="playground-button-ariaExpanded"><span><strong>aria Expanded</strong><small>string</small></span><input id="playground-button-ariaExpanded" name="pg_ariaExpanded" type="text" value="" /></label><label class="playground-field" for="playground-button-ariaControls"><span><strong>aria Controls</strong><small>string</small></span><input id="playground-button-ariaControls" name="pg_ariaControls" type="text" value="" /></label><label class="playground-field" for="playground-button-title"><span><strong>title</strong><small>string</small></span><input id="playground-button-title" name="pg_title" type="text" value="" /></label><label class="playground-toggle" for="playground-button-autofocus"><span><strong>autofocus</strong><small>boolean</small></span><input id="playground-button-autofocus" name="pg_autofocus" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-button-controlClass"><span><strong>control Class</strong><small>string</small></span><input id="playground-button-controlClass" name="pg_controlClass" type="text" value="" /></label><label class="playground-field" for="playground-button-class"><span><strong>class</strong><small>string</small></span><input id="playground-button-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </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;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("click", (event) =&gt; &#123;
+  console.log("click", 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>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">
diff --git a/examples/component-showcase/app/pages/components/card.wrn b/examples/component-showcase/app/pages/components/card.wrn
index d2b57aed..7e3e8dd0 100644
--- a/examples/component-showcase/app/pages/components/card.wrn
+++ b/examples/component-showcase/app/pages/components/card.wrn
@@ -1,40 +1,40 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page CardDetail {
   layout = "showcase"
-  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Card title"
-  state playground_subtitle = ctx.url.searchParams.get("pg_subtitle") ?? ""
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? "Some quick example text to build on the card title and make up the bulk of the card's content."
+  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Card example"
+  state playground_subtitle = ctx.url.searchParams.get("pg_subtitle") ?? "Card example"
+  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default card for a modern application."
   state playground_header = ctx.url.searchParams.get("pg_header") ?? ""
   state playground_footer = ctx.url.searchParams.get("pg_footer") ?? ""
-  state playground_imageSrc = ctx.url.searchParams.get("pg_imageSrc") ?? "/card-landscape.svg"
-  state playground_imageAlt = ctx.url.searchParams.get("pg_imageAlt") ?? "Abstract blue glass shapes"
+  state playground_imageSrc = ctx.url.searchParams.get("pg_imageSrc") ?? ""
+  state playground_imageAlt = ctx.url.searchParams.get("pg_imageAlt") ?? ""
   state playground_imagePosition = ctx.url.searchParams.get("pg_imagePosition") ?? "top"
-  state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Go somewhere"
+  state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Card"
   state playground_actionHref = ctx.url.searchParams.get("pg_actionHref") ?? "#card-demo"
-  state playground_headerActions = ctx.url.searchParams.get("pg_headerActions") ?? ""
-  state playground_navigation = ctx.url.searchParams.get("pg_navigation") ?? ""
+  state playground_headerActions = JSON.parse(ctx.url.searchParams.get("pg_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\"]}]")
+  state playground_navigation = JSON.parse(ctx.url.searchParams.get("pg_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\"]}]")
   state playground_activeNav = ctx.url.searchParams.get("pg_activeNav") ?? ""
-  state playground_mobileNavigation = ctx.url.searchParams.get("pg_mobileNavigation") ?? "false"
-  state playground_alertTitle = ctx.url.searchParams.get("pg_alertTitle") ?? ""
-  state playground_alertDescription = ctx.url.searchParams.get("pg_alertDescription") ?? ""
-  state playground_empty = ctx.url.searchParams.get("pg_empty") ?? "false"
-  state playground_emptyTitle = ctx.url.searchParams.get("pg_emptyTitle") ?? "No data to show"
+  state playground_mobileNavigation = (ctx.url.searchParams.get("pg_mobileNavigation") ?? "false") === "true"
+  state playground_alertTitle = ctx.url.searchParams.get("pg_alertTitle") ?? "Card example"
+  state playground_alertDescription = ctx.url.searchParams.get("pg_alertDescription") ?? "A polished default card for a modern application."
+  state playground_empty = (ctx.url.searchParams.get("pg_empty") ?? "false") === "true"
+  state playground_emptyTitle = ctx.url.searchParams.get("pg_emptyTitle") ?? "Card example"
   state playground_emptyIcon = ctx.url.searchParams.get("pg_emptyIcon") ?? "icon-[lucide--inbox]"
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? ""
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_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 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\"]}]")
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_layout = ctx.url.searchParams.get("pg_layout") ?? "vertical"
-  state playground_align = ctx.url.searchParams.get("pg_align") ?? "left"
+  state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
   state playground_hover = ctx.url.searchParams.get("pg_hover") ?? "none"
-  state playground_scrollable = ctx.url.searchParams.get("pg_scrollable") ?? "false"
+  state playground_scrollable = (ctx.url.searchParams.get("pg_scrollable") ?? "false") === "true"
   state playground_maxHeight = ctx.url.searchParams.get("pg_maxHeight") ?? "18rem"
-  state playground_dismissible = ctx.url.searchParams.get("pg_dismissible") ?? "false"
-  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? ""
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
+  state playground_dismissible = (ctx.url.searchParams.get("pg_dismissible") ?? "true") === "true"
+  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Card 1 example"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Card"
-    description = "Theme-aware, responsive card component."
+    description = "Group related content in a responsive themed surface with title, description, content, and supporting slots."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -44,32 +44,684 @@ page CardDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Base component</span>
         <h1>Card</h1>
-        <p>Theme-aware, responsive card component.</p>
+        <p>Group related content in a responsive themed surface with title, description, content, and supporting slots.</p>
         <div class="detail-badges"><span>31 props</span><span>1 slots</span><span>6 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="Card" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Card" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="click,action,navigate,dismiss,load,error">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure 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="Card" title="{playground_title}" subtitle="{playground_subtitle}" description="{playground_description}" header="{playground_header}" footer="{playground_footer}" imageSrc="{playground_imageSrc}" imageAlt="{playground_imageAlt}" imagePosition="{playground_imagePosition}" actionLabel="{playground_actionLabel}" actionHref="{playground_actionHref}" headerActions="{playground_headerActions}" navigation="{playground_navigation}" activeNav="{playground_activeNav}" mobileNavigation="{playground_mobileNavigation}" alertTitle="{playground_alertTitle}" alertDescription="{playground_alertDescription}" empty="{playground_empty}" emptyTitle="{playground_emptyTitle}" emptyIcon="{playground_emptyIcon}" items="{playground_items}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" layout="{playground_layout}" align="{playground_align}" hover="{playground_hover}" scrollable="{playground_scrollable}" maxHeight="{playground_maxHeight}" dismissible="{playground_dismissible}" ariaLabel="{playground_ariaLabel}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Card title='{playground_title}' subtitle='{playground_subtitle}' description='{playground_description}' header='{playground_header}' footer='{playground_footer}' imageSrc='{playground_imageSrc}' imageAlt='{playground_imageAlt}' imagePosition='{playground_imagePosition}' actionLabel='{playground_actionLabel}' actionHref='{playground_actionHref}' headerActions='{playground_headerActions}' navigation='{playground_navigation}' activeNav='{playground_activeNav}' mobileNavigation='{playground_mobileNavigation}' alertTitle='{playground_alertTitle}' alertDescription='{playground_alertDescription}' empty='{playground_empty}' emptyTitle='{playground_emptyTitle}' emptyIcon='{playground_emptyIcon}' items='{playground_items}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' layout='{playground_layout}' align='{playground_align}' hover='{playground_hover}' scrollable='{playground_scrollable}' maxHeight='{playground_maxHeight}' dismissible='{playground_dismissible}' ariaLabel='{playground_ariaLabel}' class='{playground_class}'><p class="showcase-card-copy">Supporting content belongs inside the default slot.</p></Card></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;Card
-  description="Some quick example text to build on the card title and make up the bulk of the card's content."
-  imageSrc="/card-landscape.svg"
-  imageAlt="Abstract blue glass shapes"
-  actionLabel="Go somewhere"
+  title="Card example"
+  subtitle="Card example"
+  description="A polished default card for a modern application."
+  actionLabel="Card"
   actionHref="#card-demo"
+  headerActions='[
+    &#123;
+      "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": [
+        &#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": "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": [
+        &#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;
+  ]'
+  navigation='[
+    &#123;
+      "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": [
+        &#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": "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": [
+        &#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;
+  ]'
+  alertTitle="Card example"
+  alertDescription="A polished default card for a modern application."
+  emptyTitle="Card example"
+  items='[
+    &#123;
+      "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": [
+        &#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": "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": [
+        &#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"
+  dismissible="true"
+  ariaLabel="Card 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>31 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-card-title"><span><strong>title</strong><small>string</small></span><input id="playground-card-title" name="pg_title" type="text" value="Card title" /></label><label class="playground-field" for="playground-card-subtitle"><span><strong>subtitle</strong><small>string</small></span><input id="playground-card-subtitle" name="pg_subtitle" type="text" value="" /></label><label class="playground-field" for="playground-card-description"><span><strong>description</strong><small>string</small></span><input id="playground-card-description" name="pg_description" type="text" value="Some quick example text to build on the card title and make up the bulk of the card&#39;s content." /></label><label class="playground-field" for="playground-card-header"><span><strong>header</strong><small>string</small></span><input id="playground-card-header" name="pg_header" type="text" value="" /></label><label class="playground-field" for="playground-card-footer"><span><strong>footer</strong><small>string</small></span><input id="playground-card-footer" name="pg_footer" type="text" value="" /></label><label class="playground-field" for="playground-card-imageSrc"><span><strong>image Src</strong><small>string</small></span><input id="playground-card-imageSrc" name="pg_imageSrc" type="text" value="/card-landscape.svg" /></label><label class="playground-field" for="playground-card-imageAlt"><span><strong>image Alt</strong><small>string</small></span><input id="playground-card-imageAlt" name="pg_imageAlt" type="text" value="Abstract blue glass shapes" /></label><label class="playground-field" for="playground-card-imagePosition"><span><strong>image Position</strong><small>string</small></span><select id="playground-card-imagePosition" name="pg_imagePosition"><option value="top" selected>top</option><option value="overlay">overlay</option><option value="left">left</option><option value="bottom">bottom</option><option value="right">right</option></select></label><label class="playground-field" for="playground-card-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-card-actionLabel" name="pg_actionLabel" type="text" value="Go somewhere" /></label><label class="playground-field" for="playground-card-actionHref"><span><strong>action Href</strong><small>string</small></span><input id="playground-card-actionHref" name="pg_actionHref" type="text" value="#card-demo" /></label><label class="playground-field" for="playground-card-headerActions"><span><strong>header Actions</strong><small>string</small></span><textarea id="playground-card-headerActions" name="pg_headerActions" rows="5" spellcheck="false" data-playground-json></textarea><em data-playground-error></em></label><label class="playground-field" for="playground-card-navigation"><span><strong>navigation</strong><small>string</small></span><textarea id="playground-card-navigation" name="pg_navigation" rows="5" spellcheck="false" data-playground-json></textarea><em data-playground-error></em></label><label class="playground-field" for="playground-card-activeNav"><span><strong>active Nav</strong><small>string</small></span><input id="playground-card-activeNav" name="pg_activeNav" type="text" value="" /></label><label class="playground-toggle" for="playground-card-mobileNavigation"><span><strong>mobile Navigation</strong><small>boolean</small></span><input id="playground-card-mobileNavigation" name="pg_mobileNavigation" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-card-alertTitle"><span><strong>alert Title</strong><small>string</small></span><input id="playground-card-alertTitle" name="pg_alertTitle" type="text" value="" /></label><label class="playground-field" for="playground-card-alertDescription"><span><strong>alert Description</strong><small>string</small></span><input id="playground-card-alertDescription" name="pg_alertDescription" type="text" value="" /></label><label class="playground-toggle" for="playground-card-empty"><span><strong>empty</strong><small>boolean</small></span><input id="playground-card-empty" name="pg_empty" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-card-emptyTitle"><span><strong>empty Title</strong><small>string</small></span><input id="playground-card-emptyTitle" name="pg_emptyTitle" type="text" value="No data to show" /></label><label class="playground-field" for="playground-card-emptyIcon"><span><strong>empty Icon</strong><small>string</small></span><input id="playground-card-emptyIcon" name="pg_emptyIcon" type="text" value="icon-[lucide--inbox]" /></label><label class="playground-field" for="playground-card-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-card-items" name="pg_items" rows="5" spellcheck="false" data-playground-json></textarea><em data-playground-error></em></label><label class="playground-field" for="playground-card-size"><span><strong>size</strong><small>string</small></span><select id="playground-card-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-card-color"><span><strong>color</strong><small>string</small></span><select id="playground-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-card-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-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></select></label><label class="playground-field" for="playground-card-layout"><span><strong>layout</strong><small>string</small></span><input id="playground-card-layout" name="pg_layout" type="text" value="vertical" /></label><label class="playground-field" for="playground-card-align"><span><strong>align</strong><small>string</small></span><select id="playground-card-align" name="pg_align"><option value="left" selected>left</option><option value="start">start</option><option value="center">center</option><option value="end">end</option></select></label><label class="playground-field" for="playground-card-hover"><span><strong>hover</strong><small>string</small></span><input id="playground-card-hover" name="pg_hover" type="text" value="none" /></label><label class="playground-toggle" for="playground-card-scrollable"><span><strong>scrollable</strong><small>boolean</small></span><input id="playground-card-scrollable" name="pg_scrollable" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-card-maxHeight"><span><strong>max Height</strong><small>string</small></span><input id="playground-card-maxHeight" name="pg_maxHeight" type="text" value="18rem" /></label><label class="playground-toggle" for="playground-card-dismissible"><span><strong>dismissible</strong><small>boolean</small></span><input id="playground-card-dismissible" name="pg_dismissible" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-card-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-card-ariaLabel" name="pg_ariaLabel" type="text" value="" /></label><label class="playground-field" for="playground-card-class"><span><strong>class</strong><small>string</small></span><input id="playground-card-class" name="pg_class" type="text" value="" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-card-title"><span><strong>title</strong><small>string</small></span><input id="playground-card-title" name="pg_title" type="text" value="Card example" /></label><label class="playground-field" for="playground-card-subtitle"><span><strong>subtitle</strong><small>string</small></span><input id="playground-card-subtitle" name="pg_subtitle" type="text" value="Card example" /></label><label class="playground-field" for="playground-card-description"><span><strong>description</strong><small>string</small></span><input id="playground-card-description" name="pg_description" type="text" value="A polished default card for a modern application." /></label><label class="playground-field" for="playground-card-header"><span><strong>header</strong><small>string</small></span><input id="playground-card-header" name="pg_header" type="text" value="" /></label><label class="playground-field" for="playground-card-footer"><span><strong>footer</strong><small>string</small></span><input id="playground-card-footer" name="pg_footer" type="text" value="" /></label><label class="playground-field" for="playground-card-imageSrc"><span><strong>image Src</strong><small>string</small></span><input id="playground-card-imageSrc" name="pg_imageSrc" type="text" value="" /></label><label class="playground-field" for="playground-card-imageAlt"><span><strong>image Alt</strong><small>string</small></span><input id="playground-card-imageAlt" name="pg_imageAlt" type="text" value="" /></label><label class="playground-field" for="playground-card-imagePosition"><span><strong>image Position</strong><small>string</small></span><select id="playground-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-card-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-card-actionLabel" name="pg_actionLabel" type="text" value="Card" /></label><label class="playground-field" for="playground-card-actionHref"><span><strong>action Href</strong><small>string</small></span><input id="playground-card-actionHref" name="pg_actionHref" type="text" value="#card-demo" /></label><label class="playground-field" for="playground-card-headerActions"><span><strong>header Actions</strong><small>string</small></span><textarea id="playground-card-headerActions" name="pg_headerActions" rows="5" spellcheck="false" data-playground-json>[
+  {
+    "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"
+    ]
+  }
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-card-navigation"><span><strong>navigation</strong><small>string</small></span><textarea id="playground-card-navigation" name="pg_navigation" rows="5" spellcheck="false" data-playground-json>[
+  {
+    "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"
+    ]
+  }
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-card-activeNav"><span><strong>active Nav</strong><small>string</small></span><input id="playground-card-activeNav" name="pg_activeNav" type="text" value="" /></label><label class="playground-toggle" for="playground-card-mobileNavigation"><span><strong>mobile Navigation</strong><small>boolean</small></span><input id="playground-card-mobileNavigation" name="pg_mobileNavigation" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-card-alertTitle"><span><strong>alert Title</strong><small>string</small></span><input id="playground-card-alertTitle" name="pg_alertTitle" type="text" value="Card example" /></label><label class="playground-field" for="playground-card-alertDescription"><span><strong>alert Description</strong><small>string</small></span><input id="playground-card-alertDescription" name="pg_alertDescription" type="text" value="A polished default card for a modern application." /></label><label class="playground-toggle" for="playground-card-empty"><span><strong>empty</strong><small>boolean</small></span><input id="playground-card-empty" name="pg_empty" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-card-emptyTitle"><span><strong>empty Title</strong><small>string</small></span><input id="playground-card-emptyTitle" name="pg_emptyTitle" type="text" value="Card example" /></label><label class="playground-field" for="playground-card-emptyIcon"><span><strong>empty Icon</strong><small>string</small></span><input id="playground-card-emptyIcon" name="pg_emptyIcon" type="text" value="icon-[lucide--inbox]" /></label><label class="playground-field" for="playground-card-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-card-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+  {
+    "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"
+    ]
+  }
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-card-size"><span><strong>size</strong><small>string</small></span><select id="playground-card-size" name="pg_size"><option value="md" selected>md</option><option value="compact">compact</option><option value="default">default</option><option value="spacious">spacious</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-card-color"><span><strong>color</strong><small>string</small></span><select id="playground-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-card-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-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-card-layout"><span><strong>layout</strong><small>string</small></span><select id="playground-card-layout" name="pg_layout"><option value="vertical" selected>vertical</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-card-align"><span><strong>align</strong><small>string</small></span><select id="playground-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-card-hover"><span><strong>hover</strong><small>string</small></span><input id="playground-card-hover" name="pg_hover" type="text" value="none" /></label><label class="playground-toggle" for="playground-card-scrollable"><span><strong>scrollable</strong><small>boolean</small></span><input id="playground-card-scrollable" name="pg_scrollable" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-card-maxHeight"><span><strong>max Height</strong><small>string</small></span><input id="playground-card-maxHeight" name="pg_maxHeight" type="text" value="18rem" /></label><label class="playground-toggle" for="playground-card-dismissible"><span><strong>dismissible</strong><small>boolean</small></span><input id="playground-card-dismissible" name="pg_dismissible" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-card-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-card-ariaLabel" name="pg_ariaLabel" type="text" value="Card 1 example" /></label><label class="playground-field" for="playground-card-class"><span><strong>class</strong><small>string</small></span><input id="playground-card-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -78,572 +730,1106 @@ page CardDetail {
         <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 card</h2><p>Use a basic card with media, text content, and a supporting action.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Structured content card</h2><p>Group a title, description, content, and supporting actions.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="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="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="demo-render"><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 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"]}]' size="md" variant="default" align="start" scrollable="false" dismissible="true" ariaLabel="Card 1 example" class="showcase-instance showcase-instance--1"><p class="showcase-card-copy">Supporting content belongs inside the default slot.</p></Card></div>
           </div>
-          <section class="demo-code" aria-label="Default card usage">
+          <section class="demo-code" aria-label="Structured content 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;Card
-  description="Some quick example text to build on the card title and make up the bulk of the card's content."
-  imageSrc="/card-landscape.svg"
-  imageAlt="Abstract blue glass shapes"
-  actionLabel="Go somewhere"
+  title="Citizen service"
+  subtitle="Card example"
+  description="Access a trusted online service."
+  actionLabel="Card"
   actionHref="#card-demo"
-/&gt;</code></pre>
+  headerActions='[
+    &#123;
+      "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": [
+        &#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": "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": [
+        &#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;
+  ]'
+  navigation='[
+    &#123;
+      "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": [
+        &#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": "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": [
+        &#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;
+  ]'
+  alertTitle="Card example"
+  alertDescription="A polished default card for a modern application."
+  emptyTitle="Card example"
+  items='[
+    &#123;
+      "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": [
+        &#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": "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": [
+        &#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"
+  dismissible="true"
+  ariaLabel="Card 1 example"&gt;
+  &lt;p class="showcase-card-copy"&gt;Supporting content belongs inside the default slot.&lt;/p&gt;
+&lt;/Card&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Content</span><h2>Body</h2><p>Use the card body for the main content area.</p></div>
+          <div><span class="demo-case-eyebrow">Compact</span><h2>Compact dashboard card</h2><p>Use reduced spacing for metrics, filters, and operational information.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="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="Card" title="" description="Some quick example text to build on the card title and make up the bulk of the card&#39;s content." actionLabel="" actionHref="#card-demo" size="md" color="primary"></div></div>
+            
+            <div class="demo-render"><Card title="Open requests" subtitle="Compact Card" description="Requests waiting for assignment." actionLabel="Compact example" actionHref="#card-demo" headerActions='[{"id":"card-1-1","key":"card-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":"#card-demo","actionHref":"#card-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":"card-1-2","key":"card-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#card-demo","actionHref":"#card-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"]}]' navigation='[{"id":"card-1-1","key":"card-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":"#card-demo","actionHref":"#card-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":"card-1-2","key":"card-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#card-demo","actionHref":"#card-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"]}]' mobileNavigation="false" alertTitle="Compact Card" alertDescription="A compact configuration for dashboards and dense product surfaces." empty="false" emptyTitle="Compact Card" items='[{"id":"card-1-1","key":"card-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":"#card-demo","actionHref":"#card-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":"card-1-2","key":"card-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#card-demo","actionHref":"#card-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="compact" variant="soft" align="center" scrollable="false" dismissible="true" ariaLabel="Card 2 example" class="showcase-instance showcase-instance--2"><strong class="showcase-card-value">38</strong></Card></div>
           </div>
-          <section class="demo-code" aria-label="Body usage">
+          <section class="demo-code" aria-label="Compact dashboard 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;Card
-  description="Some quick example text to build on the card title and make up the bulk of the card's content."
+  title="Open requests"
+  subtitle="Compact Card"
+  description="Requests waiting for assignment."
+  actionLabel="Compact example"
   actionHref="#card-demo"
-/&gt;</code></pre>
+  headerActions='[
+    &#123;
+      "id": "card-1-1",
+      "key": "card-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": "#card-demo",
+      "actionHref": "#card-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": "card-1-2",
+      "key": "card-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#card-demo",
+      "actionHref": "#card-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;
+  ]'
+  navigation='[
+    &#123;
+      "id": "card-1-1",
+      "key": "card-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": "#card-demo",
+      "actionHref": "#card-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": "card-1-2",
+      "key": "card-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#card-demo",
+      "actionHref": "#card-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;
+  ]'
+  alertTitle="Compact Card"
+  alertDescription="A compact configuration for dashboards and dense product surfaces."
+  emptyTitle="Compact Card"
+  items='[
+    &#123;
+      "id": "card-1-1",
+      "key": "card-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": "#card-demo",
+      "actionHref": "#card-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": "card-1-2",
+      "key": "card-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#card-demo",
+      "actionHref": "#card-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;
+  ]'
+  size="compact"
+  variant="soft"
+  align="center"
+  dismissible="true"
+  ariaLabel="Card 2 example"&gt;
+  &lt;strong class="showcase-card-value"&gt;38&lt;/strong&gt;
+&lt;/Card&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Content</span><h2>Simple card</h2><p>Use a body-only card when no separate header or footer is needed.</p></div>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Raised interactive card</h2><p>Use a stronger visual treatment for featured content.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="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="Card" title="Card title" subtitle="Card subtitle" description="Some quick example text to build on the card title and make up the bulk of the card&#39;s content." actionLabel="Card link" actionHref="#card-demo" size="md" color="primary"></div></div>
+            
+            <div class="demo-render"><Card title="Featured guide" subtitle="Advanced Card" description="A complete guide to public safety and emergency readiness." actionLabel="Advanced example" actionHref="#card-demo" headerActions='[{"id":"card-2-1","key":"card-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":"#card-demo","actionHref":"#card-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":"card-2-2","key":"card-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":"#card-demo","actionHref":"#card-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"]}]' navigation='[{"id":"card-2-1","key":"card-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":"#card-demo","actionHref":"#card-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":"card-2-2","key":"card-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":"#card-demo","actionHref":"#card-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"]}]' mobileNavigation="false" alertTitle="Advanced Card" alertDescription="A richer configuration demonstrating additional content and hierarchy." empty="false" emptyTitle="Advanced Card" items='[{"id":"card-2-1","key":"card-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":"#card-demo","actionHref":"#card-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":"card-2-2","key":"card-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":"#card-demo","actionHref":"#card-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="spacious" variant="raised" align="end" scrollable="false" dismissible="true" ariaLabel="Card 3 example" class="showcase-instance showcase-instance--3"><a href="#guide" class="showcase-action">Read guide</a></Card></div>
           </div>
-          <section class="demo-code" aria-label="Simple card usage">
+          <section class="demo-code" aria-label="Raised interactive 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;Card
-  subtitle="Card subtitle"
-  description="Some quick example text to build on the card title and make up the bulk of the card's content."
-  actionLabel="Card link"
-  actionHref="#card-demo"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Structure</span><h2>Header and footer</h2><p>Add a header, footer, or both when the card needs clearer structure.</p></div>
-          <span class="demo-case-number">04</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="card-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="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." header="Featured" footer="Last updated 5 mins ago" actionLabel="Card link" actionHref="#card-demo" size="md" color="primary"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Header and footer usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Card
-  description="Some quick example text to build on the card title and make up the bulk of the card's content."
-  header="Featured"
-  footer="Last updated 5 mins ago"
-  actionLabel="Card link"
-  actionHref="#card-demo"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Structure</span><h2>Footer only</h2><p>Separate secondary actions or summary details from the card body.</p></div>
-          <span class="demo-case-number">05</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="card-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="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." footer="Last updated 5 mins ago" actionLabel="Card link" actionHref="#card-demo" size="md" color="primary"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Footer 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;Card
-  description="Some quick example text to build on the card title and make up the bulk of the card's content."
-  footer="Last updated 5 mins ago"
-  actionLabel="Card link"
-  actionHref="#card-demo"
-/&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 a compact card size for denser lists and side panels.</p></div>
-          <span class="demo-case-number">06</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="card-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="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." actionLabel="Card link" actionHref="#card-demo" size="sm" color="primary"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Small usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Card
-  description="Some quick example text to build on the card title and make up the bulk of the card's content."
-  actionLabel="Card link"
-  actionHref="#card-demo"
-  size="sm"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Sizes</span><h2>Default</h2><p>Use the default card size for most content blocks.</p></div>
-          <span class="demo-case-number">07</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="card-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="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." actionLabel="Card link" actionHref="#card-demo" size="md" color="primary"></div></div>
-          </div>
-          <section class="demo-code" aria-label="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;Card
-  description="Some quick example text to build on the card title and make up the bulk of the card's content."
-  actionLabel="Card link"
-  actionHref="#card-demo"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Sizes</span><h2>Large</h2><p>Increase card spacing when content needs more breathing room.</p></div>
-          <span class="demo-case-number">08</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="card-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="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." actionLabel="Card link" actionHref="#card-demo" size="lg" color="primary"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Large usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Card
-  description="Some quick example text to build on the card title and make up the bulk of the card's content."
-  actionLabel="Card link"
-  actionHref="#card-demo"
-  size="lg"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Navigation</span><h2>Navigation</h2><p>Add navigation in the card header for quick section switching.</p></div>
-          <span class="demo-case-number">09</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="card-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="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." actionLabel="Card link" actionHref="#card-demo" navigation="[{&quot;label&quot;:&quot;My Account&quot;,&quot;value&quot;:&quot;account&quot;},{&quot;label&quot;:&quot;Company&quot;,&quot;value&quot;:&quot;company&quot;},{&quot;label&quot;:&quot;Team Members&quot;,&quot;value&quot;:&quot;team&quot;}]" activeNav="account" size="md" color="primary" align="center"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Navigation usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Card
-  description="Some quick example text to build on the card title and make up the bulk of the card's content."
-  actionLabel="Card link"
-  actionHref="#card-demo"
-  navigation='[
-    &#123;
-      "label": "My Account",
-      "value": "account"
-    &#125;,
-    &#123;
-      "label": "Company",
-      "value": "company"
-    &#125;,
-    &#123;
-      "label": "Team Members",
-      "value": "team"
-    &#125;
-  ]'
-  activeNav="account"
-  align="center"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Navigation</span><h2>Navigation with select on mobile</h2><p>Replace tabs with a select control when horizontal space is limited.</p></div>
-          <span class="demo-case-number">010</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="card-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="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." actionLabel="Card link" actionHref="#card-demo" navigation="[{&quot;label&quot;:&quot;My Account&quot;,&quot;value&quot;:&quot;account&quot;},{&quot;label&quot;:&quot;Company&quot;,&quot;value&quot;:&quot;company&quot;},{&quot;label&quot;:&quot;Team Members&quot;,&quot;value&quot;:&quot;team&quot;},{&quot;label&quot;:&quot;Billing&quot;,&quot;value&quot;:&quot;billing&quot;}]" activeNav="account" mobileNavigation="true" size="md" color="primary" align="center"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Navigation with select on mobile usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Card
-  description="Some quick example text to build on the card title and make up the bulk of the card's content."
-  actionLabel="Card link"
-  actionHref="#card-demo"
-  navigation='[
-    &#123;
-      "label": "My Account",
-      "value": "account"
-    &#125;,
-    &#123;
-      "label": "Company",
-      "value": "company"
-    &#125;,
-    &#123;
-      "label": "Team Members",
-      "value": "team"
-    &#125;,
-    &#123;
-      "label": "Billing",
-      "value": "billing"
-    &#125;
-  ]'
-  activeNav="account"
-  mobileNavigation="true"
-  align="center"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Images</span><h2>Top image</h2><p>Place an image at the top for a classic media-card layout.</p></div>
-          <span class="demo-case-number">011</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="card-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="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." footer="Last updated 5 mins ago" imageSrc="/card-landscape.svg" imageAlt="Abstract blue glass shapes" actionLabel="Card link" actionHref="#card-demo" size="md" color="primary"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Top 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;Card
-  description="Some quick example text to build on the card title and make up the bulk of the card's content."
-  footer="Last updated 5 mins ago"
-  imageSrc="/card-landscape.svg"
-  imageAlt="Abstract blue glass shapes"
-  actionLabel="Card link"
-  actionHref="#card-demo"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Images</span><h2>Bottom image</h2><p>Let content lead before media displayed at the bottom.</p></div>
-          <span class="demo-case-number">012</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="card-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="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." footer="Last updated 5 mins ago" imageSrc="/card-landscape.svg" imageAlt="Abstract blue glass shapes" imagePosition="bottom" actionLabel="Card link" actionHref="#card-demo" size="md" color="primary"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Bottom 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;Card
-  description="Some quick example text to build on the card title and make up the bulk of the card's content."
-  footer="Last updated 5 mins ago"
-  imageSrc="/card-landscape.svg"
-  imageAlt="Abstract blue glass shapes"
-  imagePosition="bottom"
-  actionLabel="Card link"
-  actionHref="#card-demo"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Images</span><h2>Image overlays</h2><p>Use the image as a background and layer card content on top.</p></div>
-          <span class="demo-case-number">013</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="card-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="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." footer="Last updated 5 mins ago" imageSrc="/card-landscape.svg" imageAlt="Abstract blue glass shapes" imagePosition="overlay" actionLabel="" actionHref="#card-demo" size="md" color="primary"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Image overlays usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Card
-  description="Some quick example text to build on the card title and make up the bulk of the card's content."
-  footer="Last updated 5 mins ago"
-  imageSrc="/card-landscape.svg"
-  imageAlt="Abstract blue glass shapes"
-  imagePosition="overlay"
-  actionHref="#card-demo"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Animations</span><h2>Image scaling animation on hover</h2><p>Scale card media on hover without changing the card layout.</p></div>
-          <span class="demo-case-number">014</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="card-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="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="" actionHref="#card-demo" size="md" color="primary" hover="image"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Image scaling animation on hover usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Card
-  description="Some quick example text to build on the card title and make up the bulk of the card's content."
-  imageSrc="/card-landscape.svg"
-  imageAlt="Abstract blue glass shapes"
-  actionHref="#card-demo"
-  hover="image"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Animations</span><h2>Transition on hover</h2><p>Animate elevation and position to strengthen the interactive surface.</p></div>
-          <span class="demo-case-number">015</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="card-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="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="" actionHref="#card-demo" size="md" color="primary" hover="raise"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Transition on hover usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Card
-  description="Some quick example text to build on the card title and make up the bulk of the card's content."
-  imageSrc="/card-landscape.svg"
-  imageAlt="Abstract blue glass shapes"
-  actionHref="#card-demo"
-  hover="raise"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Card layout</span><h2>Horizontal</h2><p>Place image and content side by side on larger screens.</p></div>
-          <span class="demo-case-number">016</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="card-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="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." footer="Last updated 5 mins ago" imageSrc="/card-landscape.svg" imageAlt="Abstract blue glass shapes" actionLabel="" actionHref="#card-demo" size="md" color="primary" layout="horizontal"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Horizontal usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Card
-  description="Some quick example text to build on the card title and make up the bulk of the card's content."
-  footer="Last updated 5 mins ago"
-  imageSrc="/card-landscape.svg"
-  imageAlt="Abstract blue glass shapes"
-  actionHref="#card-demo"
-  layout="horizontal"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Card layout</span><h2>Card group</h2><p>Render attached equal-height cards that stack responsively.</p></div>
-          <span class="demo-case-number">017</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="card-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="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." actionLabel="" actionHref="#card-demo" items="[{&quot;imageSrc&quot;:&quot;/card-landscape.svg&quot;,&quot;title&quot;:&quot;Card title&quot;,&quot;description&quot;:&quot;Some quick example text to build on the card title and make up the bulk of the card&#39;s content.&quot;,&quot;footer&quot;:&quot;Updated 5 mins ago&quot;},{&quot;imageSrc&quot;:&quot;/card-landscape.svg&quot;,&quot;title&quot;:&quot;Card title&quot;,&quot;description&quot;:&quot;This card has supporting text below as a natural lead-in.&quot;,&quot;footer&quot;:&quot;Updated 5 mins ago&quot;},{&quot;imageSrc&quot;:&quot;/card-landscape.svg&quot;,&quot;title&quot;:&quot;Card title&quot;,&quot;description&quot;:&quot;Some quick example text to build on the card title and make up the bulk of the card&#39;s content. This has even longer content to demonstrate equal height.&quot;,&quot;footer&quot;:&quot;Updated 5 mins ago&quot;}]" size="md" color="primary"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Card group usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Card
-  description="Some quick example text to build on the card title and make up the bulk of the card's content."
-  actionHref="#card-demo"
-  items='[
-    &#123;
-      "imageSrc": "/card-landscape.svg",
-      "title": "Card title",
-      "description": "Some quick example text to build on the card title and make up the bulk of the card\'s content.",
-      "footer": "Updated 5 mins ago"
-    &#125;,
-    &#123;
-      "imageSrc": "/card-landscape.svg",
-      "title": "Card title",
-      "description": "This card has supporting text below as a natural lead-in.",
-      "footer": "Updated 5 mins ago"
-    &#125;,
-    &#123;
-      "imageSrc": "/card-landscape.svg",
-      "title": "Card title",
-      "description": "Some quick example text to build on the card title and make up the bulk of the card\'s content. This has even longer content to demonstrate equal height.",
-      "footer": "Updated 5 mins ago"
-    &#125;
-  ]'
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Panels</span><h2>Top bordered card</h2><p>Add a colored top border for stronger category or status emphasis.</p></div>
-          <span class="demo-case-number">018</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="card-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="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." actionLabel="Card link" actionHref="#card-demo" size="md" color="primary" variant="top-border"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Top bordered 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;Card
-  description="Some quick example text to build on the card title and make up the bulk of the card's content."
-  actionLabel="Card link"
-  actionHref="#card-demo"
-  variant="top-border"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Panels</span><h2>Card actions</h2><p>Place compact utility actions in a structured card header.</p></div>
-          <span class="demo-case-number">019</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="card-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="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." header="Card actions" actionLabel="Card link" actionHref="#card-demo" headerActions="[{&quot;label&quot;:&quot;Refresh&quot;,&quot;ariaLabel&quot;:&quot;Refresh card&quot;,&quot;icon&quot;:&quot;icon-[lucide--refresh-cw]&quot;},{&quot;label&quot;:&quot;Expand&quot;,&quot;ariaLabel&quot;:&quot;Expand card&quot;,&quot;icon&quot;:&quot;icon-[lucide--maximize-2]&quot;}]" size="md" color="primary" dismissible="true"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Card 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;Card
-  description="Some quick example text to build on the card title and make up the bulk of the card's content."
-  header="Card actions"
-  actionLabel="Card link"
+  title="Featured guide"
+  subtitle="Advanced Card"
+  description="A complete guide to public safety and emergency readiness."
+  actionLabel="Advanced example"
   actionHref="#card-demo"
   headerActions='[
     &#123;
-      "label": "Refresh",
-      "ariaLabel": "Refresh card",
-      "icon": "icon-[lucide--refresh-cw]"
+      "id": "card-2-1",
+      "key": "card-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": "#card-demo",
+      "actionHref": "#card-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": "Expand",
-      "ariaLabel": "Expand card",
-      "icon": "icon-[lucide--maximize-2]"
+      "id": "card-2-2",
+      "key": "card-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": "#card-demo",
+      "actionHref": "#card-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;
   ]'
+  navigation='[
+    &#123;
+      "id": "card-2-1",
+      "key": "card-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": "#card-demo",
+      "actionHref": "#card-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": "card-2-2",
+      "key": "card-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": "#card-demo",
+      "actionHref": "#card-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;
+  ]'
+  alertTitle="Advanced Card"
+  alertDescription="A richer configuration demonstrating additional content and hierarchy."
+  emptyTitle="Advanced Card"
+  items='[
+    &#123;
+      "id": "card-2-1",
+      "key": "card-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": "#card-demo",
+      "actionHref": "#card-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": "card-2-2",
+      "key": "card-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": "#card-demo",
+      "actionHref": "#card-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    &#125;
+  ]'
+  size="spacious"
+  variant="raised"
+  align="end"
   dismissible="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Panels</span><h2>Card with alert</h2><p>Embed an alert inside a card to surface important feedback.</p></div>
-          <span class="demo-case-number">020</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="card-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="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." header="Featured" actionLabel="Card link" actionHref="#card-demo" alertTitle="Attention needed!" alertDescription="This is an alert box." size="md" color="primary"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Card with 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;Card
-  description="Some quick example text to build on the card title and make up the bulk of the card's content."
-  header="Featured"
-  actionLabel="Card link"
-  actionHref="#card-demo"
-  alertTitle="Attention needed!"
-  alertDescription="This is an alert box."
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Panels</span><h2>Centered body content</h2><p>Center content for confirmation states and compact summaries.</p></div>
-          <span class="demo-case-number">021</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="card-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="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." actionLabel="Card link" actionHref="#card-demo" size="md" color="primary" align="center"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Centered body content usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Card
-  description="Some quick example text to build on the card title and make up the bulk of the card's content."
-  actionLabel="Card link"
-  actionHref="#card-demo"
-  align="center"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Panels</span><h2>Empty state</h2><p>Communicate that no data is available with an accessible empty state.</p></div>
-          <span class="demo-case-number">022</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="card-demo-22" class="demo-canvas demo-canvas--22">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Card" title="" description="" actionLabel="" actionHref="#card-demo" empty="true" size="md" color="primary"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Empty state usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Card
-  actionHref="#card-demo"
-  empty="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Panels</span><h2>Scrollable body</h2><p>Contain long content inside a fixed-height scrolling card body.</p></div>
-          <span class="demo-case-number">023</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="card-demo-23" class="demo-canvas demo-canvas--23">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><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. Some quick example text to build on the card title and make up the bulk of the card&#39;s content. Some quick example text to build on the card title and make up the bulk of the card&#39;s content. Some quick example text to build on the card title and make up the bulk of the card&#39;s content. Some quick example text to build on the card title and make up the bulk of the card&#39;s content." actionLabel="" actionHref="#card-demo" size="md" color="primary" scrollable="true" maxHeight="16rem"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Scrollable body usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Card
-  description="Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content."
-  actionHref="#card-demo"
-  scrollable="true"
-  maxHeight="16rem"
-/&gt;</code></pre>
+  ariaLabel="Card 3 example"&gt;
+  &lt;a href="#guide" class="showcase-action"&gt;Read guide&lt;/a&gt;
+&lt;/Card&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>@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><code>@dismiss</code><span>Fires when the component emits the dismiss event.</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>@click</code><span>Fires when the interactive surface is activated.</span></div><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><code>@dismiss</code><span>Fires after the announcement or feedback surface is dismissed.</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;Card
+  @click='console.log(event.detail)'
+  @action='console.log(event.detail)'
+  @navigate='console.log(event.detail)'
+  @dismiss='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=\"Card\"], [data-component=\"Card\"]")
 
-component.addEventListener('click', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("click", (event) =&gt; &#123;
+  console.log("click", event.detail)
+&#125;)
+
+component?.addEventListener("action", (event) =&gt; &#123;
+  console.log("action", event.detail)
+&#125;)
+
+component?.addEventListener("navigate", (event) =&gt; &#123;
+  console.log("navigate", event.detail)
+&#125;)
+
+component?.addEventListener("dismiss", (event) =&gt; &#123;
+  console.log("dismiss", 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>title</code></td><td>string</td><td><code>"Card title"</code></td><td>No</td></tr><tr><td><code>subtitle</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>header</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>footer</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>imageSrc</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>imageAlt</code></td><td>string</td><td><code>""</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>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>headerActions</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>navigation</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>activeNav</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>mobileNavigation</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>alertTitle</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>alertDescription</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>empty</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>emptyTitle</code></td><td>string</td><td><code>"No data to show"</code></td><td>No</td></tr><tr><td><code>emptyIcon</code></td><td>string</td><td><code>"icon-[lucide--inbox]"</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>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>layout</code></td><td>string</td><td><code>"vertical"</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>"none"</code></td><td>No</td></tr><tr><td><code>scrollable</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>maxHeight</code></td><td>string</td><td><code>"18rem"</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>ariaLabel</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><span class="detail-toc-group">Basic usage</span><a href="#card-demo-1">Default card</a><span class="detail-toc-group">Content</span><a href="#card-demo-2">Body</a><a href="#card-demo-3">Simple card</a><span class="detail-toc-group">Structure</span><a href="#card-demo-4">Header and footer</a><a href="#card-demo-5">Footer only</a><span class="detail-toc-group">Sizes</span><a href="#card-demo-6">Small</a><a href="#card-demo-7">Default</a><a href="#card-demo-8">Large</a><span class="detail-toc-group">Navigation</span><a href="#card-demo-9">Navigation</a><a href="#card-demo-10">Navigation with select on mobile</a><span class="detail-toc-group">Images</span><a href="#card-demo-11">Top image</a><a href="#card-demo-12">Bottom image</a><a href="#card-demo-13">Image overlays</a><span class="detail-toc-group">Animations</span><a href="#card-demo-14">Image scaling animation on hover</a><a href="#card-demo-15">Transition on hover</a><span class="detail-toc-group">Card layout</span><a href="#card-demo-16">Horizontal</a><a href="#card-demo-17">Card group</a><span class="detail-toc-group">Panels</span><a href="#card-demo-18">Top bordered card</a><a href="#card-demo-19">Card actions</a><a href="#card-demo-20">Card with alert</a><a href="#card-demo-21">Centered body content</a><a href="#card-demo-22">Empty state</a><a href="#card-demo-23">Scrollable body</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="#card-demo-1">Structured content card</a><a href="#card-demo-2">Compact dashboard card</a><a href="#card-demo-3">Raised interactive card</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/carousel.wrn b/examples/component-showcase/app/pages/components/carousel.wrn
index a653a6d8..626cd11d 100644
--- a/examples/component-showcase/app/pages/components/carousel.wrn
+++ b/examples/component-showcase/app/pages/components/carousel.wrn
@@ -3,26 +3,26 @@ page CarouselDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_title = ctx.url.searchParams.get("pg_title") ?? ""
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"label\": \"First slide\",\n    \"title\": \"First slide\",\n    \"description\": \"Introduce the collection with a concise, focused message.\"\n  },\n  {\n    \"label\": \"Second slide\",\n    \"title\": \"Second slide\",\n    \"description\": \"Move through content using buttons, pagination, keyboard, or touch.\"\n  },\n  {\n    \"label\": \"Third slide\",\n    \"title\": \"Third slide\",\n    \"description\": \"Every interaction exposes useful public lifecycle and navigation events.\"\n  },\n  {\n    \"label\": \"Fourth slide\",\n    \"title\": \"Fourth slide\",\n    \"description\": \"Flexible for larger collections.\"\n  },\n  {\n    \"label\": \"Fifth slide\",\n    \"title\": \"Fifth slide\",\n    \"description\": \"Responsive at every viewport.\"\n  },\n  {\n    \"label\": \"Sixth slide\",\n    \"title\": \"Sixth slide\",\n    \"description\": \"Built with accessible semantics.\"\n  }\n]"
-  state playground_activeIndex = ctx.url.searchParams.get("pg_activeIndex") ?? "0"
-  state playground_slidesPerView = ctx.url.searchParams.get("pg_slidesPerView") ?? "1"
+  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Carousel example"
+  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default carousel for a modern application."
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"carousel-0-1\",\"key\":\"carousel-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#carousel-demo\",\"actionHref\":\"#carousel-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"carousel-0-2\",\"key\":\"carousel-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#carousel-demo\",\"actionHref\":\"#carousel-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
+  state playground_activeIndex = Number(ctx.url.searchParams.get("pg_activeIndex") ?? "0")
+  state playground_slidesPerView = Number(ctx.url.searchParams.get("pg_slidesPerView") ?? "1")
   state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "0.75rem"
-  state playground_showPagination = ctx.url.searchParams.get("pg_showPagination") ?? "false"
-  state playground_isAutoPlay = ctx.url.searchParams.get("pg_isAutoPlay") ?? "false"
-  state playground_autoplayInterval = ctx.url.searchParams.get("pg_autoplayInterval") ?? "4000"
-  state playground_isInfiniteLoop = ctx.url.searchParams.get("pg_isInfiniteLoop") ?? "false"
-  state playground_isRTL = ctx.url.searchParams.get("pg_isRTL") ?? "false"
-  state playground_isCentered = ctx.url.searchParams.get("pg_isCentered") ?? "false"
-  state playground_isDraggable = ctx.url.searchParams.get("pg_isDraggable") ?? "false"
-  state playground_isAutoHeight = ctx.url.searchParams.get("pg_isAutoHeight") ?? "false"
-  state playground_isSnap = ctx.url.searchParams.get("pg_isSnap") ?? "false"
-  state playground_showCounter = ctx.url.searchParams.get("pg_showCounter") ?? "false"
+  state playground_showPagination = (ctx.url.searchParams.get("pg_showPagination") ?? "true") === "true"
+  state playground_isAutoPlay = (ctx.url.searchParams.get("pg_isAutoPlay") ?? "false") === "true"
+  state playground_autoplayInterval = Number(ctx.url.searchParams.get("pg_autoplayInterval") ?? "4000")
+  state playground_isInfiniteLoop = (ctx.url.searchParams.get("pg_isInfiniteLoop") ?? "false") === "true"
+  state playground_isRTL = (ctx.url.searchParams.get("pg_isRTL") ?? "false") === "true"
+  state playground_isCentered = (ctx.url.searchParams.get("pg_isCentered") ?? "false") === "true"
+  state playground_isDraggable = (ctx.url.searchParams.get("pg_isDraggable") ?? "false") === "true"
+  state playground_isAutoHeight = (ctx.url.searchParams.get("pg_isAutoHeight") ?? "false") === "true"
+  state playground_isSnap = (ctx.url.searchParams.get("pg_isSnap") ?? "false") === "true"
+  state playground_showCounter = (ctx.url.searchParams.get("pg_showCounter") ?? "true") === "true"
   state playground_thumbnails = ctx.url.searchParams.get("pg_thumbnails") ?? "none"
-  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Basic usage"
+  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Carousel 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 = "Carousel"
     description = "Theme-aware, responsive carousel component."
@@ -40,86 +40,243 @@ page CarouselDetail {
       </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="Carousel" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Carousel" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="initialize,change,previous,next,play,pause,reachStart,reachEnd,dragStart,dragEnd">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Carousel</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="Carousel" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" activeIndex="{playground_activeIndex}" slidesPerView="{playground_slidesPerView}" gap="{playground_gap}" showPagination="{playground_showPagination}" isAutoPlay="{playground_isAutoPlay}" autoplayInterval="{playground_autoplayInterval}" isInfiniteLoop="{playground_isInfiniteLoop}" isRTL="{playground_isRTL}" isCentered="{playground_isCentered}" isDraggable="{playground_isDraggable}" isAutoHeight="{playground_isAutoHeight}" isSnap="{playground_isSnap}" showCounter="{playground_showCounter}" thumbnails="{playground_thumbnails}" ariaLabel="{playground_ariaLabel}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Carousel size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' activeIndex='{playground_activeIndex}' slidesPerView='{playground_slidesPerView}' gap='{playground_gap}' showPagination='{playground_showPagination}' isAutoPlay='{playground_isAutoPlay}' autoplayInterval='{playground_autoplayInterval}' isInfiniteLoop='{playground_isInfiniteLoop}' isRTL='{playground_isRTL}' isCentered='{playground_isCentered}' isDraggable='{playground_isDraggable}' isAutoHeight='{playground_isAutoHeight}' isSnap='{playground_isSnap}' showCounter='{playground_showCounter}' thumbnails='{playground_thumbnails}' ariaLabel='{playground_ariaLabel}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Carousel
+  title="Carousel example"
+  description="A polished default carousel for a modern application."
   items='[
     &#123;
-      "label": "First slide",
-      "title": "First slide",
-      "description": "Introduce the collection with a concise, focused message."
+      "id": "carousel-0-1",
+      "key": "carousel-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#carousel-demo",
+      "actionHref": "#carousel-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
     &#125;,
     &#123;
-      "label": "Second slide",
-      "title": "Second slide",
-      "description": "Move through content using buttons, pagination, keyboard, or touch."
-    &#125;,
-    &#123;
-      "label": "Third slide",
-      "title": "Third slide",
-      "description": "Every interaction exposes useful public lifecycle and navigation events."
-    &#125;,
-    &#123;
-      "label": "Fourth slide",
-      "title": "Fourth slide",
-      "description": "Flexible for larger collections."
-    &#125;,
-    &#123;
-      "label": "Fifth slide",
-      "title": "Fifth slide",
-      "description": "Responsive at every viewport."
-    &#125;,
-    &#123;
-      "label": "Sixth slide",
-      "title": "Sixth slide",
-      "description": "Built with accessible semantics."
+      "id": "carousel-0-2",
+      "key": "carousel-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#carousel-demo",
+      "actionHref": "#carousel-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
     &#125;
   ]'
-  ariaLabel="Basic usage"
+  showPagination="true"
+  showCounter="true"
+  ariaLabel="Carousel 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>22 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-carousel-size"><span><strong>size</strong><small>string</small></span><select id="playground-carousel-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-carousel-color"><span><strong>color</strong><small>string</small></span><select id="playground-carousel-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-carousel-title"><span><strong>title</strong><small>string</small></span><input id="playground-carousel-title" name="pg_title" type="text" value="" /></label><label class="playground-field" for="playground-carousel-description"><span><strong>description</strong><small>string</small></span><input id="playground-carousel-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-carousel-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-carousel-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+          <div class="playground-fields"><label class="playground-field" for="playground-carousel-size"><span><strong>size</strong><small>string</small></span><select id="playground-carousel-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-carousel-color"><span><strong>color</strong><small>string</small></span><select id="playground-carousel-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-carousel-title"><span><strong>title</strong><small>string</small></span><input id="playground-carousel-title" name="pg_title" type="text" value="Carousel example" /></label><label class="playground-field" for="playground-carousel-description"><span><strong>description</strong><small>string</small></span><input id="playground-carousel-description" name="pg_description" type="text" value="A polished default carousel for a modern application." /></label><label class="playground-field" for="playground-carousel-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-carousel-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
-    "label": "First slide",
-    "title": "First slide",
-    "description": "Introduce the collection with a concise, focused message."
+    "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"
+    ]
   },
   {
-    "label": "Second slide",
-    "title": "Second slide",
-    "description": "Move through content using buttons, pagination, keyboard, or touch."
-  },
-  {
-    "label": "Third slide",
-    "title": "Third slide",
-    "description": "Every interaction exposes useful public lifecycle and navigation events."
-  },
-  {
-    "label": "Fourth slide",
-    "title": "Fourth slide",
-    "description": "Flexible for larger collections."
-  },
-  {
-    "label": "Fifth slide",
-    "title": "Fifth slide",
-    "description": "Responsive at every viewport."
-  },
-  {
-    "label": "Sixth slide",
-    "title": "Sixth slide",
-    "description": "Built with accessible semantics."
+    "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"
+    ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-carousel-activeIndex"><span><strong>active Index</strong><small>number</small></span><input id="playground-carousel-activeIndex" name="pg_activeIndex" type="number" value="0" /></label><label class="playground-field" for="playground-carousel-slidesPerView"><span><strong>slides Per View</strong><small>number</small></span><input id="playground-carousel-slidesPerView" name="pg_slidesPerView" type="number" value="1" /></label><label class="playground-field" for="playground-carousel-gap"><span><strong>gap</strong><small>string</small></span><input id="playground-carousel-gap" name="pg_gap" type="text" value="0.75rem" /></label><label class="playground-toggle" for="playground-carousel-showPagination"><span><strong>show Pagination</strong><small>boolean</small></span><input id="playground-carousel-showPagination" name="pg_showPagination" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isAutoPlay"><span><strong>is Auto Play</strong><small>boolean</small></span><input id="playground-carousel-isAutoPlay" name="pg_isAutoPlay" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-carousel-autoplayInterval"><span><strong>autoplay Interval</strong><small>number</small></span><input id="playground-carousel-autoplayInterval" name="pg_autoplayInterval" type="number" value="4000" /></label><label class="playground-toggle" for="playground-carousel-isInfiniteLoop"><span><strong>is Infinite Loop</strong><small>boolean</small></span><input id="playground-carousel-isInfiniteLoop" name="pg_isInfiniteLoop" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isRTL"><span><strong>is RTL</strong><small>boolean</small></span><input id="playground-carousel-isRTL" name="pg_isRTL" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isCentered"><span><strong>is Centered</strong><small>boolean</small></span><input id="playground-carousel-isCentered" name="pg_isCentered" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isDraggable"><span><strong>is Draggable</strong><small>boolean</small></span><input id="playground-carousel-isDraggable" name="pg_isDraggable" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isAutoHeight"><span><strong>is Auto Height</strong><small>boolean</small></span><input id="playground-carousel-isAutoHeight" name="pg_isAutoHeight" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isSnap"><span><strong>is Snap</strong><small>boolean</small></span><input id="playground-carousel-isSnap" name="pg_isSnap" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-showCounter"><span><strong>show Counter</strong><small>boolean</small></span><input id="playground-carousel-showCounter" name="pg_showCounter" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-carousel-thumbnails"><span><strong>thumbnails</strong><small>string</small></span><select id="playground-carousel-thumbnails" name="pg_thumbnails"><option value="none" selected>none</option><option value="vertical">vertical</option><option value="horizontal">horizontal</option></select></label><label class="playground-field" for="playground-carousel-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-carousel-ariaLabel" name="pg_ariaLabel" type="text" value="Basic usage" /></label><label class="playground-field" for="playground-carousel-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-carousel-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-carousel-class"><span><strong>class</strong><small>string</small></span><input id="playground-carousel-class" name="pg_class" type="text" value="" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-carousel-activeIndex"><span><strong>active Index</strong><small>number</small></span><input id="playground-carousel-activeIndex" name="pg_activeIndex" type="number" value="0" /></label><label class="playground-field" for="playground-carousel-slidesPerView"><span><strong>slides Per View</strong><small>number</small></span><input id="playground-carousel-slidesPerView" name="pg_slidesPerView" type="number" value="1" /></label><label class="playground-field" for="playground-carousel-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-carousel-gap" name="pg_gap"><option value="0.75rem" selected>0.75rem</option><option value="none">none</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="2xl">2xl</option></select></label><label class="playground-toggle" for="playground-carousel-showPagination"><span><strong>show Pagination</strong><small>boolean</small></span><input id="playground-carousel-showPagination" name="pg_showPagination" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isAutoPlay"><span><strong>is Auto Play</strong><small>boolean</small></span><input id="playground-carousel-isAutoPlay" name="pg_isAutoPlay" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-carousel-autoplayInterval"><span><strong>autoplay Interval</strong><small>number</small></span><input id="playground-carousel-autoplayInterval" name="pg_autoplayInterval" type="number" value="4000" /></label><label class="playground-toggle" for="playground-carousel-isInfiniteLoop"><span><strong>is Infinite Loop</strong><small>boolean</small></span><input id="playground-carousel-isInfiniteLoop" name="pg_isInfiniteLoop" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isRTL"><span><strong>is RTL</strong><small>boolean</small></span><input id="playground-carousel-isRTL" name="pg_isRTL" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isCentered"><span><strong>is Centered</strong><small>boolean</small></span><input id="playground-carousel-isCentered" name="pg_isCentered" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isDraggable"><span><strong>is Draggable</strong><small>boolean</small></span><input id="playground-carousel-isDraggable" name="pg_isDraggable" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isAutoHeight"><span><strong>is Auto Height</strong><small>boolean</small></span><input id="playground-carousel-isAutoHeight" name="pg_isAutoHeight" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isSnap"><span><strong>is Snap</strong><small>boolean</small></span><input id="playground-carousel-isSnap" name="pg_isSnap" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-showCounter"><span><strong>show Counter</strong><small>boolean</small></span><input id="playground-carousel-showCounter" name="pg_showCounter" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-carousel-thumbnails"><span><strong>thumbnails</strong><small>string</small></span><input id="playground-carousel-thumbnails" name="pg_thumbnails" type="text" value="none" /></label><label class="playground-field" for="playground-carousel-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-carousel-ariaLabel" name="pg_ariaLabel" type="text" value="Carousel 1 example" /></label><label class="playground-field" for="playground-carousel-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-carousel-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-carousel-class"><span><strong>class</strong><small>string</small></span><input id="playground-carousel-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -128,690 +285,457 @@ page CarouselDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Basic usage</span><h2>Basic usage</h2><p>Cycle through images or content slides with accessible previous and next controls.</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="carousel-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><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="demo-render"><Carousel size="default" title="Carousel example" description="A polished default carousel for a modern application." items='[{"id":"carousel-0-1","key":"carousel-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#carousel-demo","actionHref":"#carousel-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"carousel-0-2","key":"carousel-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#carousel-demo","actionHref":"#carousel-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' activeIndex="0" slidesPerView="1" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="false" isAutoHeight="false" isSnap="false" showCounter="true" ariaLabel="Carousel 1 example" variant="default" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Basic usage 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;Carousel
+  title="Carousel example"
+  description="A polished default carousel for a modern application."
   items='[
     &#123;
-      "label": "First slide",
-      "title": "First slide",
-      "description": "Introduce the collection with a concise, focused message."
+      "id": "carousel-0-1",
+      "key": "carousel-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#carousel-demo",
+      "actionHref": "#carousel-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
     &#125;,
     &#123;
-      "label": "Second slide",
-      "title": "Second slide",
-      "description": "Move through content using buttons, pagination, keyboard, or touch."
-    &#125;,
-    &#123;
-      "label": "Third slide",
-      "title": "Third slide",
-      "description": "Every interaction exposes useful public lifecycle and navigation events."
-    &#125;,
-    &#123;
-      "label": "Fourth slide",
-      "title": "Fourth slide",
-      "description": "Flexible for larger collections."
-    &#125;,
-    &#123;
-      "label": "Fifth slide",
-      "title": "Fifth slide",
-      "description": "Responsive at every viewport."
-    &#125;,
-    &#123;
-      "label": "Sixth slide",
-      "title": "Sixth slide",
-      "description": "Built with accessible semantics."
+      "id": "carousel-0-2",
+      "key": "carousel-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#carousel-demo",
+      "actionHref": "#carousel-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
     &#125;
   ]'
-  ariaLabel="Basic usage"
+  showPagination="true"
+  showCounter="true"
+  ariaLabel="Carousel 1 example"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Navigation</span><h2>Pagination</h2><p>Show the current slide and let users jump directly to any slide.</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="carousel-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><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;}]" showPagination="true" ariaLabel="Pagination"></div></div>
+            
+            <div class="demo-render"><Carousel size="sm" title="Compact Carousel" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"carousel-1-1","key":"carousel-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#carousel-demo","actionHref":"#carousel-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"carousel-1-2","key":"carousel-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#carousel-demo","actionHref":"#carousel-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' activeIndex="0" slidesPerView="1" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="false" isAutoHeight="false" isSnap="false" showCounter="true" ariaLabel="Carousel 2 example" variant="secondary" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Pagination 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;Carousel
+  size="sm"
+  title="Compact Carousel"
+  description="A compact configuration for dashboards and dense product surfaces."
   items='[
     &#123;
-      "label": "First slide",
-      "title": "First slide",
-      "description": "Introduce the collection with a concise, focused message."
+      "id": "carousel-1-1",
+      "key": "carousel-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#carousel-demo",
+      "actionHref": "#carousel-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        &#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": "Second slide",
-      "title": "Second slide",
-      "description": "Move through content using buttons, pagination, keyboard, or touch."
-    &#125;,
-    &#123;
-      "label": "Third slide",
-      "title": "Third slide",
-      "description": "Every interaction exposes useful public lifecycle and navigation events."
-    &#125;,
-    &#123;
-      "label": "Fourth slide",
-      "title": "Fourth slide",
-      "description": "Flexible for larger collections."
-    &#125;,
-    &#123;
-      "label": "Fifth slide",
-      "title": "Fifth slide",
-      "description": "Responsive at every viewport."
-    &#125;,
-    &#123;
-      "label": "Sixth slide",
-      "title": "Sixth slide",
-      "description": "Built with accessible semantics."
+      "id": "carousel-1-2",
+      "key": "carousel-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#carousel-demo",
+      "actionHref": "#carousel-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        &#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;
   ]'
   showPagination="true"
-  ariaLabel="Pagination"
+  showCounter="true"
+  ariaLabel="Carousel 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">Playback</span><h2>Autoplay</h2><p>Advance automatically, pausing while users hover or interact with the carousel.</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="carousel-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><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;}]" showPagination="true" isAutoPlay="true" autoplayInterval="2500" ariaLabel="Autoplay"></div></div>
+            
+            <div class="demo-render"><Carousel size="lg" title="Advanced Carousel" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"carousel-2-1","key":"carousel-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#carousel-demo","actionHref":"#carousel-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"carousel-2-2","key":"carousel-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#carousel-demo","actionHref":"#carousel-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' activeIndex="0" slidesPerView="1" showPagination="true" isAutoPlay="false" autoplayInterval="4000" isInfiniteLoop="false" isRTL="false" isCentered="false" isDraggable="false" isAutoHeight="false" isSnap="false" showCounter="true" ariaLabel="Carousel 3 example" variant="success" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Autoplay 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;Carousel
+  size="lg"
+  title="Advanced Carousel"
+  description="A richer configuration demonstrating additional content and hierarchy."
   items='[
     &#123;
-      "label": "First slide",
-      "title": "First slide",
-      "description": "Introduce the collection with a concise, focused message."
+      "id": "carousel-2-1",
+      "key": "carousel-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#carousel-demo",
+      "actionHref": "#carousel-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        &#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": "Second slide",
-      "title": "Second slide",
-      "description": "Move through content using buttons, pagination, keyboard, or touch."
-    &#125;,
-    &#123;
-      "label": "Third slide",
-      "title": "Third slide",
-      "description": "Every interaction exposes useful public lifecycle and navigation events."
-    &#125;,
-    &#123;
-      "label": "Fourth slide",
-      "title": "Fourth slide",
-      "description": "Flexible for larger collections."
-    &#125;,
-    &#123;
-      "label": "Fifth slide",
-      "title": "Fifth slide",
-      "description": "Responsive at every viewport."
-    &#125;,
-    &#123;
-      "label": "Sixth slide",
-      "title": "Sixth slide",
-      "description": "Built with accessible semantics."
+      "id": "carousel-2-2",
+      "key": "carousel-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#carousel-demo",
+      "actionHref": "#carousel-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        &#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;
   ]'
   showPagination="true"
-  isAutoPlay="true"
-  autoplayInterval="2500"
-  ariaLabel="Autoplay"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Playback</span><h2>Infinite loop</h2><p>Continue from the last slide back to the first without disabling controls.</p></div>
-          <span class="demo-case-number">04</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="carousel-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="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;}]" showPagination="true" isInfiniteLoop="true" ariaLabel="Infinite loop"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Infinite loop usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Carousel
-  items='[
-    &#123;
-      "label": "First slide",
-      "title": "First slide",
-      "description": "Introduce the collection with a concise, focused message."
-    &#125;,
-    &#123;
-      "label": "Second slide",
-      "title": "Second slide",
-      "description": "Move through content using buttons, pagination, keyboard, or touch."
-    &#125;,
-    &#123;
-      "label": "Third slide",
-      "title": "Third slide",
-      "description": "Every interaction exposes useful public lifecycle and navigation events."
-    &#125;,
-    &#123;
-      "label": "Fourth slide",
-      "title": "Fourth slide",
-      "description": "Flexible for larger collections."
-    &#125;,
-    &#123;
-      "label": "Fifth slide",
-      "title": "Fifth slide",
-      "description": "Responsive at every viewport."
-    &#125;,
-    &#123;
-      "label": "Sixth slide",
-      "title": "Sixth slide",
-      "description": "Built with accessible semantics."
-    &#125;
-  ]'
-  showPagination="true"
-  isInfiniteLoop="true"
-  ariaLabel="Infinite loop"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Direction</span><h2>RTL</h2><p>Reverse movement and controls for right-to-left interfaces.</p></div>
-          <span class="demo-case-number">05</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="carousel-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="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;}]" activeIndex="1" showPagination="true" isRTL="true" ariaLabel="RTL"></div></div>
-          </div>
-          <section class="demo-code" aria-label="RTL usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Carousel
-  items='[
-    &#123;
-      "label": "First slide",
-      "title": "First slide",
-      "description": "Introduce the collection with a concise, focused message."
-    &#125;,
-    &#123;
-      "label": "Second slide",
-      "title": "Second slide",
-      "description": "Move through content using buttons, pagination, keyboard, or touch."
-    &#125;,
-    &#123;
-      "label": "Third slide",
-      "title": "Third slide",
-      "description": "Every interaction exposes useful public lifecycle and navigation events."
-    &#125;,
-    &#123;
-      "label": "Fourth slide",
-      "title": "Fourth slide",
-      "description": "Flexible for larger collections."
-    &#125;,
-    &#123;
-      "label": "Fifth slide",
-      "title": "Fifth slide",
-      "description": "Responsive at every viewport."
-    &#125;,
-    &#123;
-      "label": "Sixth slide",
-      "title": "Sixth slide",
-      "description": "Built with accessible semantics."
-    &#125;
-  ]'
-  activeIndex="1"
-  showPagination="true"
-  isRTL="true"
-  ariaLabel="RTL"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Layout</span><h2>Multiple slides</h2><p>Keep several slides visible at once for products, articles, or media collections.</p></div>
-          <span class="demo-case-number">06</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="carousel-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="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;}]" activeIndex="3" slidesPerView="3" showPagination="true" ariaLabel="Multiple slides"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Multiple slides usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Carousel
-  items='[
-    &#123;
-      "label": "First slide",
-      "title": "First slide",
-      "description": "Introduce the collection with a concise, focused message."
-    &#125;,
-    &#123;
-      "label": "Second slide",
-      "title": "Second slide",
-      "description": "Move through content using buttons, pagination, keyboard, or touch."
-    &#125;,
-    &#123;
-      "label": "Third slide",
-      "title": "Third slide",
-      "description": "Every interaction exposes useful public lifecycle and navigation events."
-    &#125;,
-    &#123;
-      "label": "Fourth slide",
-      "title": "Fourth slide",
-      "description": "Flexible for larger collections."
-    &#125;,
-    &#123;
-      "label": "Fifth slide",
-      "title": "Fifth slide",
-      "description": "Responsive at every viewport."
-    &#125;,
-    &#123;
-      "label": "Sixth slide",
-      "title": "Sixth slide",
-      "description": "Built with accessible semantics."
-    &#125;
-  ]'
-  activeIndex="3"
-  slidesPerView="3"
-  showPagination="true"
-  ariaLabel="Multiple slides"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Layout</span><h2>Centered</h2><p>Keep a compact active slide centered while adjacent content remains visible.</p></div>
-          <span class="demo-case-number">07</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="carousel-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="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;}]" slidesPerView="2" showPagination="true" isCentered="true" ariaLabel="Centered"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Centered usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Carousel
-  items='[
-    &#123;
-      "label": "First slide",
-      "title": "First slide",
-      "description": "Introduce the collection with a concise, focused message."
-    &#125;,
-    &#123;
-      "label": "Second slide",
-      "title": "Second slide",
-      "description": "Move through content using buttons, pagination, keyboard, or touch."
-    &#125;,
-    &#123;
-      "label": "Third slide",
-      "title": "Third slide",
-      "description": "Every interaction exposes useful public lifecycle and navigation events."
-    &#125;,
-    &#123;
-      "label": "Fourth slide",
-      "title": "Fourth slide",
-      "description": "Flexible for larger collections."
-    &#125;,
-    &#123;
-      "label": "Fifth slide",
-      "title": "Fifth slide",
-      "description": "Responsive at every viewport."
-    &#125;,
-    &#123;
-      "label": "Sixth slide",
-      "title": "Sixth slide",
-      "description": "Built with accessible semantics."
-    &#125;
-  ]'
-  slidesPerView="2"
-  showPagination="true"
-  isCentered="true"
-  ariaLabel="Centered"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Pointer interaction</span><h2>Draggable</h2><p>Drag or swipe slides with a pointer while preserving keyboard controls.</p></div>
-          <span class="demo-case-number">08</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="carousel-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="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;}]" activeIndex="1" slidesPerView="3" showPagination="true" isDraggable="true" ariaLabel="Draggable"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Draggable usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Carousel
-  items='[
-    &#123;
-      "label": "First slide",
-      "title": "First slide",
-      "description": "Introduce the collection with a concise, focused message."
-    &#125;,
-    &#123;
-      "label": "Second slide",
-      "title": "Second slide",
-      "description": "Move through content using buttons, pagination, keyboard, or touch."
-    &#125;,
-    &#123;
-      "label": "Third slide",
-      "title": "Third slide",
-      "description": "Every interaction exposes useful public lifecycle and navigation events."
-    &#125;,
-    &#123;
-      "label": "Fourth slide",
-      "title": "Fourth slide",
-      "description": "Flexible for larger collections."
-    &#125;,
-    &#123;
-      "label": "Fifth slide",
-      "title": "Fifth slide",
-      "description": "Responsive at every viewport."
-    &#125;,
-    &#123;
-      "label": "Sixth slide",
-      "title": "Sixth slide",
-      "description": "Built with accessible semantics."
-    &#125;
-  ]'
-  activeIndex="1"
-  slidesPerView="3"
-  showPagination="true"
-  isDraggable="true"
-  ariaLabel="Draggable"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Layout</span><h2>Auto height</h2><p>Let each slide determine the carousel height for variable-length content.</p></div>
-          <span class="demo-case-number">09</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="carousel-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="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;}]" showPagination="true" isAutoHeight="true" ariaLabel="Auto height"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Auto height usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Carousel
-  items='[
-    &#123;
-      "label": "First slide",
-      "title": "First slide",
-      "description": "Introduce the collection with a concise, focused message."
-    &#125;,
-    &#123;
-      "label": "Second slide",
-      "title": "Second slide",
-      "description": "Move through content using buttons, pagination, keyboard, or touch."
-    &#125;,
-    &#123;
-      "label": "Third slide",
-      "title": "Third slide",
-      "description": "Every interaction exposes useful public lifecycle and navigation events."
-    &#125;,
-    &#123;
-      "label": "Fourth slide",
-      "title": "Fourth slide",
-      "description": "Flexible for larger collections."
-    &#125;,
-    &#123;
-      "label": "Fifth slide",
-      "title": "Fifth slide",
-      "description": "Responsive at every viewport."
-    &#125;,
-    &#123;
-      "label": "Sixth slide",
-      "title": "Sixth slide",
-      "description": "Built with accessible semantics."
-    &#125;
-  ]'
-  showPagination="true"
-  isAutoHeight="true"
-  ariaLabel="Auto height"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Scrolling</span><h2>Snap scrolling</h2><p>Use native horizontal scrolling with mandatory centered snap points.</p></div>
-          <span class="demo-case-number">010</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="carousel-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="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;}]" slidesPerView="2" showPagination="true" isSnap="true" ariaLabel="Snap scrolling"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Snap scrolling usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Carousel
-  items='[
-    &#123;
-      "label": "First slide",
-      "title": "First slide",
-      "description": "Introduce the collection with a concise, focused message."
-    &#125;,
-    &#123;
-      "label": "Second slide",
-      "title": "Second slide",
-      "description": "Move through content using buttons, pagination, keyboard, or touch."
-    &#125;,
-    &#123;
-      "label": "Third slide",
-      "title": "Third slide",
-      "description": "Every interaction exposes useful public lifecycle and navigation events."
-    &#125;,
-    &#123;
-      "label": "Fourth slide",
-      "title": "Fourth slide",
-      "description": "Flexible for larger collections."
-    &#125;,
-    &#123;
-      "label": "Fifth slide",
-      "title": "Fifth slide",
-      "description": "Responsive at every viewport."
-    &#125;,
-    &#123;
-      "label": "Sixth slide",
-      "title": "Sixth slide",
-      "description": "Built with accessible semantics."
-    &#125;
-  ]'
-  slidesPerView="2"
-  showPagination="true"
-  isSnap="true"
-  ariaLabel="Snap scrolling"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Status</span><h2>Slide counter</h2><p>Announce and display the current position and total slide count.</p></div>
-          <span class="demo-case-number">011</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="carousel-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="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;}]" showCounter="true" ariaLabel="Slide counter"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Slide counter usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Carousel
-  items='[
-    &#123;
-      "label": "First slide",
-      "title": "First slide",
-      "description": "Introduce the collection with a concise, focused message."
-    &#125;,
-    &#123;
-      "label": "Second slide",
-      "title": "Second slide",
-      "description": "Move through content using buttons, pagination, keyboard, or touch."
-    &#125;,
-    &#123;
-      "label": "Third slide",
-      "title": "Third slide",
-      "description": "Every interaction exposes useful public lifecycle and navigation events."
-    &#125;,
-    &#123;
-      "label": "Fourth slide",
-      "title": "Fourth slide",
-      "description": "Flexible for larger collections."
-    &#125;,
-    &#123;
-      "label": "Fifth slide",
-      "title": "Fifth slide",
-      "description": "Responsive at every viewport."
-    &#125;,
-    &#123;
-      "label": "Sixth slide",
-      "title": "Sixth slide",
-      "description": "Built with accessible semantics."
-    &#125;
-  ]'
   showCounter="true"
-  ariaLabel="Slide counter"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Thumbnails</span><h2>Thumbnails (horizontal)</h2><p>Use a horizontal thumbnail rail as an alternate set of slide controls.</p></div>
-          <span class="demo-case-number">012</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="carousel-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="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;}]" thumbnails="horizontal" ariaLabel="Thumbnails (horizontal)"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Thumbnails (horizontal) usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Carousel
-  items='[
-    &#123;
-      "label": "First slide",
-      "title": "First slide",
-      "description": "Introduce the collection with a concise, focused message."
-    &#125;,
-    &#123;
-      "label": "Second slide",
-      "title": "Second slide",
-      "description": "Move through content using buttons, pagination, keyboard, or touch."
-    &#125;,
-    &#123;
-      "label": "Third slide",
-      "title": "Third slide",
-      "description": "Every interaction exposes useful public lifecycle and navigation events."
-    &#125;,
-    &#123;
-      "label": "Fourth slide",
-      "title": "Fourth slide",
-      "description": "Flexible for larger collections."
-    &#125;,
-    &#123;
-      "label": "Fifth slide",
-      "title": "Fifth slide",
-      "description": "Responsive at every viewport."
-    &#125;,
-    &#123;
-      "label": "Sixth slide",
-      "title": "Sixth slide",
-      "description": "Built with accessible semantics."
-    &#125;
-  ]'
-  thumbnails="horizontal"
-  ariaLabel="Thumbnails (horizontal)"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Thumbnails</span><h2>Thumbnails (vertical)</h2><p>Place thumbnail navigation beside the carousel on layouts with more room.</p></div>
-          <span class="demo-case-number">013</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="carousel-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="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;}]" thumbnails="vertical" ariaLabel="Thumbnails (vertical)"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Thumbnails (vertical) usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Carousel
-  items='[
-    &#123;
-      "label": "First slide",
-      "title": "First slide",
-      "description": "Introduce the collection with a concise, focused message."
-    &#125;,
-    &#123;
-      "label": "Second slide",
-      "title": "Second slide",
-      "description": "Move through content using buttons, pagination, keyboard, or touch."
-    &#125;,
-    &#123;
-      "label": "Third slide",
-      "title": "Third slide",
-      "description": "Every interaction exposes useful public lifecycle and navigation events."
-    &#125;,
-    &#123;
-      "label": "Fourth slide",
-      "title": "Fourth slide",
-      "description": "Flexible for larger collections."
-    &#125;,
-    &#123;
-      "label": "Fifth slide",
-      "title": "Fifth slide",
-      "description": "Responsive at every viewport."
-    &#125;,
-    &#123;
-      "label": "Sixth slide",
-      "title": "Sixth slide",
-      "description": "Built with accessible semantics."
-    &#125;
-  ]'
-  thumbnails="vertical"
-  ariaLabel="Thumbnails (vertical)"
+  ariaLabel="Carousel 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>@initialize</code><span>Fires when the component emits the initialize event.</span></div><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><code>@play</code><span>Fires when the component emits the play event.</span></div><div><code>@pause</code><span>Fires when the component emits the pause event.</span></div><div><code>@reachStart</code><span>Fires when the component emits the reach Start event.</span></div><div><code>@reachEnd</code><span>Fires when the component emits the reach End event.</span></div><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><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>@initialize</code><span>Fires when the component emits the initialize event.</span></div><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><code>@play</code><span>Fires when the component emits the play event.</span></div><div><code>@pause</code><span>Fires when the component emits the pause event.</span></div><div><code>@reachStart</code><span>Fires when the component emits the reachStart event.</span></div><div><code>@reachEnd</code><span>Fires when the component emits the reachEnd event.</span></div><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><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;Carousel
+  @initialize='console.log(event.detail)'
+  @change='console.log(event.detail)'
+  @previous='console.log(event.detail)'
+  @next='console.log(event.detail)'
+  @play='console.log(event.detail)'
+  @pause='console.log(event.detail)'
+  @reachStart='console.log(event.detail)'
+  @reachEnd='console.log(event.detail)'
+  @dragStart='console.log(event.detail)'
+  @dragEnd='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=\"Carousel\"], [data-component=\"Carousel\"]")
 
-component.addEventListener('initialize', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("initialize", (event) =&gt; &#123;
+  console.log("initialize", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("previous", (event) =&gt; &#123;
+  console.log("previous", event.detail)
+&#125;)
+
+component?.addEventListener("next", (event) =&gt; &#123;
+  console.log("next", event.detail)
+&#125;)
+
+component?.addEventListener("play", (event) =&gt; &#123;
+  console.log("play", event.detail)
+&#125;)
+
+component?.addEventListener("pause", (event) =&gt; &#123;
+  console.log("pause", event.detail)
+&#125;)
+
+component?.addEventListener("reachStart", (event) =&gt; &#123;
+  console.log("reachStart", event.detail)
+&#125;)
+
+component?.addEventListener("reachEnd", (event) =&gt; &#123;
+  console.log("reachEnd", event.detail)
+&#125;)
+
+component?.addEventListener("dragStart", (event) =&gt; &#123;
+  console.log("dragStart", event.detail)
+&#125;)
+
+component?.addEventListener("dragEnd", (event) =&gt; &#123;
+  console.log("dragEnd", 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>activeIndex</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>slidesPerView</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"0.75rem"</code></td><td>No</td></tr><tr><td><code>showPagination</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isAutoPlay</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>autoplayInterval</code></td><td>number</td><td><code>4000</code></td><td>No</td></tr><tr><td><code>isInfiniteLoop</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isRTL</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isCentered</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isDraggable</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isAutoHeight</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>isSnap</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showCounter</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>thumbnails</code></td><td>string</td><td><code>"none"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>"Content carousel"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </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="#carousel-demo-1">Basic usage</a><a href="#carousel-demo-2">Pagination</a><span class="detail-toc-group">Playback</span><a href="#carousel-demo-3">Autoplay</a><a href="#carousel-demo-4">Infinite loop</a><span class="detail-toc-group">Direction</span><a href="#carousel-demo-5">RTL</a><span class="detail-toc-group">Layouts</span><a href="#carousel-demo-6">Multiple slides</a><a href="#carousel-demo-7">Centered</a><a href="#carousel-demo-8">Draggable</a><a href="#carousel-demo-9">Auto height</a><a href="#carousel-demo-10">Snap scrolling</a><span class="detail-toc-group">Status</span><a href="#carousel-demo-11">Slide counter</a><span class="detail-toc-group">Thumbnails</span><a href="#carousel-demo-12">Thumbnails (horizontal)</a><a href="#carousel-demo-13">Thumbnails (vertical)</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="#carousel-demo-1">Production default</a><a href="#carousel-demo-2">Compact application</a><a href="#carousel-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/chart.wrn b/examples/component-showcase/app/pages/components/chart.wrn
index c0bfde17..c841f5d5 100644
--- a/examples/component-showcase/app/pages/components/chart.wrn
+++ b/examples/component-showcase/app/pages/components/chart.wrn
@@ -5,7 +5,7 @@ page ChartDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Chart example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default chart for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"chart-0-1\",\n    \"key\": \"chart-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#chart-demo\",\n    \"actionHref\": \"#chart-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"chart-0-2\",\n    \"key\": \"chart-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#chart-demo\",\n    \"actionHref\": \"#chart-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"chart-0-1\",\"key\":\"chart-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#chart-demo\",\"actionHref\":\"#chart-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"chart-0-2\",\"key\":\"chart-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#chart-demo\",\"actionHref\":\"#chart-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -25,12 +25,12 @@ page ChartDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Chart" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Chart" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="select,dataPointClick,legendToggle">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Chart</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="Chart" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Chart size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Chart
@@ -147,6 +147,7 @@ page ChartDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -257,7 +258,7 @@ page ChartDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-chart-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-chart-class"><span><strong>class</strong><small>string</small></span><input id="playground-chart-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-chart-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-chart-class"><span><strong>class</strong><small>string</small></span><input id="playground-chart-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page ChartDetail {
         <div class="demo-workbench">
           <div id="chart-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Chart" size="default" title="Chart example" description="A polished default chart for a modern application." items="[{&quot;id&quot;:&quot;chart-0-1&quot;,&quot;key&quot;:&quot;chart-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#chart-demo&quot;,&quot;actionHref&quot;:&quot;#chart-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;chart-0-2&quot;,&quot;key&quot;:&quot;chart-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#chart-demo&quot;,&quot;actionHref&quot;:&quot;#chart-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Chart size="default" title="Chart example" description="A polished default chart for a modern application." items='[{"id":"chart-0-1","key":"chart-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#chart-demo","actionHref":"#chart-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"chart-0-2","key":"chart-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#chart-demo","actionHref":"#chart-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -399,7 +401,8 @@ page ChartDetail {
         <div class="demo-workbench">
           <div id="chart-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Chart" size="sm" title="Compact Chart" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;chart-1-1&quot;,&quot;key&quot;:&quot;chart-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#chart-demo&quot;,&quot;actionHref&quot;:&quot;#chart-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;chart-1-2&quot;,&quot;key&quot;:&quot;chart-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#chart-demo&quot;,&quot;actionHref&quot;:&quot;#chart-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Chart size="sm" title="Compact Chart" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"chart-1-1","key":"chart-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#chart-demo","actionHref":"#chart-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"chart-1-2","key":"chart-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#chart-demo","actionHref":"#chart-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="secondary" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -528,7 +531,8 @@ page ChartDetail {
         <div class="demo-workbench">
           <div id="chart-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Chart" size="lg" title="Advanced Chart" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;chart-2-1&quot;,&quot;key&quot;:&quot;chart-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#chart-demo&quot;,&quot;actionHref&quot;:&quot;#chart-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;chart-2-2&quot;,&quot;key&quot;:&quot;chart-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#chart-demo&quot;,&quot;actionHref&quot;:&quot;#chart-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Chart size="lg" title="Advanced Chart" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"chart-2-1","key":"chart-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#chart-demo","actionHref":"#chart-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"chart-2-2","key":"chart-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#chart-demo","actionHref":"#chart-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' variant="success" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -649,11 +653,23 @@ page ChartDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@dataPointClick</code><span>Fires when the component emits the data Point Click event.</span></div><div><code>@legendToggle</code><span>Fires when the component emits the legend Toggle event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div><div><code>@dataPointClick</code><span>Fires when the component emits the dataPointClick event.</span></div><div><code>@legendToggle</code><span>Fires when the component emits the legendToggle event.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;Chart
+  @select='console.log(event.detail)'
+  @dataPointClick='console.log(event.detail)'
+  @legendToggle='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"Chart\"], [data-component=\"Chart\"]")
 
-component.addEventListener('select', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)
+
+component?.addEventListener("dataPointClick", (event) =&gt; &#123;
+  console.log("dataPointClick", event.detail)
+&#125;)
+
+component?.addEventListener("legendToggle", (event) =&gt; &#123;
+  console.log("legendToggle", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Chart"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
diff --git a/examples/component-showcase/app/pages/components/chat-bubble.wrn b/examples/component-showcase/app/pages/components/chat-bubble.wrn
index 09dde247..c4014093 100644
--- a/examples/component-showcase/app/pages/components/chat-bubble.wrn
+++ b/examples/component-showcase/app/pages/components/chat-bubble.wrn
@@ -3,15 +3,15 @@ page ChatBubbleDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_title = ctx.url.searchParams.get("pg_title") ?? ""
-  state playground_description = ctx.url.searchParams.get("pg_description") ?? ""
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"question\",\n    \"direction\": \"incoming\",\n    \"author\": \"Support agent\",\n    \"title\": \"How can we help?\",\n    \"text\": \"You can ask questions like:\",\n    \"bullets\": [\n      \"What's WireJS UI?\",\n      \"How many component examples are there?\",\n      \"Is there a PRO version?\"\n    ]\n  },\n  {\n    \"id\": \"request\",\n    \"direction\": \"outgoing\",\n    \"author\": \"AZ\",\n    \"text\": \"what's wirejs ui?\"\n  },\n  {\n    \"id\": \"answer\",\n    \"direction\": \"incoming\",\n    \"author\": \"Support agent\",\n    \"text\": \"WireJS UI is an open-source set of reusable UI components built for responsive applications.\",\n    \"links\": [\n      {\n        \"label\": \"Installation guide\",\n        \"href\": \"/installation\"\n      },\n      {\n        \"label\": \"Framework guides\",\n        \"href\": \"/framework-guides\"\n      }\n    ]\n  }\n]"
-  state playground_oneSided = ctx.url.searchParams.get("pg_oneSided") ?? "false"
-  state playground_showAvatars = ctx.url.searchParams.get("pg_showAvatars") ?? "false"
-  state playground_showMetadata = ctx.url.searchParams.get("pg_showMetadata") ?? "false"
-  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Conversation"
+  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Chat Bubble example"
+  state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default chat bubble for a modern application."
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"chat-bubble-0-1\",\"key\":\"chat-bubble-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#chat-bubble-demo\",\"actionHref\":\"#chat-bubble-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"chat-bubble-0-2\",\"key\":\"chat-bubble-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#chat-bubble-demo\",\"actionHref\":\"#chat-bubble-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
+  state playground_oneSided = (ctx.url.searchParams.get("pg_oneSided") ?? "false") === "true"
+  state playground_showAvatars = (ctx.url.searchParams.get("pg_showAvatars") ?? "true") === "true"
+  state playground_showMetadata = (ctx.url.searchParams.get("pg_showMetadata") ?? "true") === "true"
+  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Chat Bubble 1 example"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Chat Bubble"
     description = "Theme-aware, responsive chat bubble component."
@@ -29,93 +29,243 @@ page ChatBubbleDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="ChatBubble" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="ChatBubble" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="action,messageClick,avatarClick,linkClick">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Chat Bubble</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="ChatBubble" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" oneSided="{playground_oneSided}" showAvatars="{playground_showAvatars}" showMetadata="{playground_showMetadata}" ariaLabel="{playground_ariaLabel}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><ChatBubble size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' oneSided='{playground_oneSided}' showAvatars='{playground_showAvatars}' showMetadata='{playground_showMetadata}' ariaLabel='{playground_ariaLabel}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;ChatBubble
+  title="Chat Bubble example"
+  description="A polished default chat bubble for a modern application."
   items='[
     &#123;
-      "id": "question",
-      "direction": "incoming",
-      "author": "Support agent",
-      "title": "How can we help?",
-      "text": "You can ask questions like:",
-      "bullets": [
-        "What\'s WireJS UI?",
-        "How many component examples are there?",
-        "Is there a PRO version?"
+      "id": "chat-bubble-0-1",
+      "key": "chat-bubble-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#chat-bubble-demo",
+      "actionHref": "#chat-bubble-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
       ]
     &#125;,
     &#123;
-      "id": "request",
-      "direction": "outgoing",
-      "author": "AZ",
-      "text": "what\'s wirejs ui?"
-    &#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": [
+      "id": "chat-bubble-0-2",
+      "key": "chat-bubble-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#chat-bubble-demo",
+      "actionHref": "#chat-bubble-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
         &#123;
-          "label": "Installation guide",
-          "href": "/installation"
+          "label": "Nested option A",
+          "value": "nested-a"
         &#125;,
         &#123;
-          "label": "Framework guides",
-          "href": "/framework-guides"
+          "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;
   ]'
+  showAvatars="true"
+  showMetadata="true"
+  ariaLabel="Chat Bubble 1 example"
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>11 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-chat-bubble-size"><span><strong>size</strong><small>string</small></span><select id="playground-chat-bubble-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-chat-bubble-color"><span><strong>color</strong><small>string</small></span><select id="playground-chat-bubble-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-chat-bubble-title"><span><strong>title</strong><small>string</small></span><input id="playground-chat-bubble-title" name="pg_title" type="text" value="" /></label><label class="playground-field" for="playground-chat-bubble-description"><span><strong>description</strong><small>string</small></span><input id="playground-chat-bubble-description" name="pg_description" type="text" value="" /></label><label class="playground-field" for="playground-chat-bubble-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-chat-bubble-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+          <div class="playground-fields"><label class="playground-field" for="playground-chat-bubble-size"><span><strong>size</strong><small>string</small></span><select id="playground-chat-bubble-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-chat-bubble-color"><span><strong>color</strong><small>string</small></span><select id="playground-chat-bubble-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-chat-bubble-title"><span><strong>title</strong><small>string</small></span><input id="playground-chat-bubble-title" name="pg_title" type="text" value="Chat Bubble example" /></label><label class="playground-field" for="playground-chat-bubble-description"><span><strong>description</strong><small>string</small></span><input id="playground-chat-bubble-description" name="pg_description" type="text" value="A polished default chat bubble for a modern application." /></label><label class="playground-field" for="playground-chat-bubble-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-chat-bubble-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
-    "id": "question",
-    "direction": "incoming",
-    "author": "Support agent",
-    "title": "How can we help?",
-    "text": "You can ask questions like:",
-    "bullets": [
-      "What's WireJS UI?",
-      "How many component examples are there?",
-      "Is there a PRO version?"
-    ]
-  },
-  {
-    "id": "request",
-    "direction": "outgoing",
-    "author": "AZ",
-    "text": "what's wirejs ui?"
-  },
-  {
-    "id": "answer",
-    "direction": "incoming",
-    "author": "Support agent",
-    "text": "WireJS UI is an open-source set of reusable UI components built for responsive applications.",
-    "links": [
+    "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": "Installation guide",
-        "href": "/installation"
+        "label": "Nested option A",
+        "value": "nested-a"
       },
       {
-        "label": "Framework guides",
-        "href": "/framework-guides"
+        "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"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-chat-bubble-oneSided"><span><strong>one Sided</strong><small>boolean</small></span><input id="playground-chat-bubble-oneSided" name="pg_oneSided" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showAvatars"><span><strong>show Avatars</strong><small>boolean</small></span><input id="playground-chat-bubble-showAvatars" name="pg_showAvatars" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showMetadata"><span><strong>show Metadata</strong><small>boolean</small></span><input id="playground-chat-bubble-showMetadata" name="pg_showMetadata" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-chat-bubble-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-chat-bubble-ariaLabel" name="pg_ariaLabel" type="text" value="Conversation" /></label><label class="playground-field" for="playground-chat-bubble-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-chat-bubble-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-chat-bubble-class"><span><strong>class</strong><small>string</small></span><input id="playground-chat-bubble-class" name="pg_class" type="text" value="" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-chat-bubble-oneSided"><span><strong>one Sided</strong><small>boolean</small></span><input id="playground-chat-bubble-oneSided" name="pg_oneSided" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showAvatars"><span><strong>show Avatars</strong><small>boolean</small></span><input id="playground-chat-bubble-showAvatars" name="pg_showAvatars" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showMetadata"><span><strong>show Metadata</strong><small>boolean</small></span><input id="playground-chat-bubble-showMetadata" name="pg_showMetadata" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-chat-bubble-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-chat-bubble-ariaLabel" name="pg_ariaLabel" type="text" value="Chat Bubble 1 example" /></label><label class="playground-field" for="playground-chat-bubble-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-chat-bubble-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-chat-bubble-class"><span><strong>class</strong><small>string</small></span><input id="playground-chat-bubble-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -124,261 +274,427 @@ page ChatBubbleDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Basic usage</span><h2>Conversation</h2><p>Show a basic two-sided conversation with incoming and outgoing messages.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="chat-bubble-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="ChatBubble" size="default" color="primary" title="" description="" items="[{&quot;id&quot;:&quot;question&quot;,&quot;direction&quot;:&quot;incoming&quot;,&quot;author&quot;:&quot;Support agent&quot;,&quot;title&quot;:&quot;How can we help?&quot;,&quot;text&quot;:&quot;You can ask questions like:&quot;,&quot;bullets&quot;:[&quot;What&#39;s WireJS UI?&quot;,&quot;How many component examples are there?&quot;,&quot;Is there a PRO version?&quot;]},{&quot;id&quot;:&quot;request&quot;,&quot;direction&quot;:&quot;outgoing&quot;,&quot;author&quot;:&quot;AZ&quot;,&quot;text&quot;:&quot;what&#39;s wirejs ui?&quot;},{&quot;id&quot;:&quot;answer&quot;,&quot;direction&quot;:&quot;incoming&quot;,&quot;author&quot;:&quot;Support agent&quot;,&quot;text&quot;:&quot;WireJS UI is an open-source set of reusable UI components built for responsive applications.&quot;,&quot;links&quot;:[{&quot;label&quot;:&quot;Installation guide&quot;,&quot;href&quot;:&quot;/installation&quot;},{&quot;label&quot;:&quot;Framework guides&quot;,&quot;href&quot;:&quot;/framework-guides&quot;}]}]" oneSided="false" showAvatars="false" showMetadata="false" ariaLabel="Conversation"></div></div>
+            
+            <div class="demo-render"><ChatBubble size="default" title="Chat Bubble example" description="A polished default chat bubble for a modern application." items='[{"id":"chat-bubble-0-1","key":"chat-bubble-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"chat-bubble-0-2","key":"chat-bubble-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' oneSided="false" showAvatars="true" showMetadata="true" ariaLabel="Chat Bubble 1 example" variant="default" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Conversation usage">
+          <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;ChatBubble
+  title="Chat Bubble example"
+  description="A polished default chat bubble for a modern application."
   items='[
     &#123;
-      "id": "question",
-      "direction": "incoming",
-      "author": "Support agent",
-      "title": "How can we help?",
-      "text": "You can ask questions like:",
-      "bullets": [
-        "What\'s WireJS UI?",
-        "How many component examples are there?",
-        "Is there a PRO version?"
+      "id": "chat-bubble-0-1",
+      "key": "chat-bubble-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#chat-bubble-demo",
+      "actionHref": "#chat-bubble-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
       ]
     &#125;,
     &#123;
-      "id": "request",
-      "direction": "outgoing",
-      "author": "AZ",
-      "text": "what\'s wirejs ui?"
-    &#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": [
+      "id": "chat-bubble-0-2",
+      "key": "chat-bubble-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#chat-bubble-demo",
+      "actionHref": "#chat-bubble-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
         &#123;
-          "label": "Installation guide",
-          "href": "/installation"
+          "label": "Nested option A",
+          "value": "nested-a"
         &#125;,
         &#123;
-          "label": "Framework guides",
-          "href": "/framework-guides"
+          "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;
   ]'
+  showAvatars="true"
+  showMetadata="true"
+  ariaLabel="Chat Bubble 1 example"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Layout</span><h2>One-sided</h2><p>Use one-sided bubbles for support transcripts or single-direction message feeds.</p></div>
+          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="chat-bubble-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="ChatBubble" size="default" color="primary" title="" description="" items="[{&quot;id&quot;:&quot;question&quot;,&quot;direction&quot;:&quot;incoming&quot;,&quot;author&quot;:&quot;Support agent&quot;,&quot;title&quot;:&quot;How can we help?&quot;,&quot;text&quot;:&quot;You can ask questions like:&quot;,&quot;bullets&quot;:[&quot;What&#39;s WireJS UI?&quot;,&quot;How many component examples are there?&quot;,&quot;Is there a PRO version?&quot;]},{&quot;id&quot;:&quot;request&quot;,&quot;direction&quot;:&quot;outgoing&quot;,&quot;author&quot;:&quot;AZ&quot;,&quot;text&quot;:&quot;what&#39;s wirejs ui?&quot;},{&quot;id&quot;:&quot;answer&quot;,&quot;direction&quot;:&quot;incoming&quot;,&quot;author&quot;:&quot;Support agent&quot;,&quot;text&quot;:&quot;WireJS UI is an open-source set of reusable UI components built for responsive applications.&quot;,&quot;links&quot;:[{&quot;label&quot;:&quot;Installation guide&quot;,&quot;href&quot;:&quot;/installation&quot;},{&quot;label&quot;:&quot;Framework guides&quot;,&quot;href&quot;:&quot;/framework-guides&quot;}]}]" oneSided="true" showAvatars="false" showMetadata="false" ariaLabel="One-sided"></div></div>
+            
+            <div class="demo-render"><ChatBubble size="sm" title="Compact Chat Bubble" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"chat-bubble-1-1","key":"chat-bubble-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"chat-bubble-1-2","key":"chat-bubble-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' oneSided="false" showAvatars="true" showMetadata="true" ariaLabel="Chat Bubble 2 example" variant="secondary" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="One-sided usage">
+          <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;ChatBubble
+  size="sm"
+  title="Compact Chat Bubble"
+  description="A compact configuration for dashboards and dense product surfaces."
   items='[
     &#123;
-      "id": "question",
-      "direction": "incoming",
-      "author": "Support agent",
-      "title": "How can we help?",
-      "text": "You can ask questions like:",
-      "bullets": [
-        "What\'s WireJS UI?",
-        "How many component examples are there?",
-        "Is there a PRO version?"
+      "id": "chat-bubble-1-1",
+      "key": "chat-bubble-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#chat-bubble-demo",
+      "actionHref": "#chat-bubble-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
       ]
     &#125;,
     &#123;
-      "id": "request",
-      "direction": "outgoing",
-      "author": "AZ",
-      "text": "what\'s wirejs ui?"
-    &#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": [
+      "id": "chat-bubble-1-2",
+      "key": "chat-bubble-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#chat-bubble-demo",
+      "actionHref": "#chat-bubble-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
         &#123;
-          "label": "Installation guide",
-          "href": "/installation"
+          "label": "Nested option A",
+          "value": "nested-a"
         &#125;,
         &#123;
-          "label": "Framework guides",
-          "href": "/framework-guides"
+          "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;
   ]'
-  oneSided="true"
-  ariaLabel="One-sided"
+  showAvatars="true"
+  showMetadata="true"
+  ariaLabel="Chat Bubble 2 example"
+  variant="secondary"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Identity</span><h2>Messages with avatars</h2><p>Add avatars when people need to identify message ownership at a glance.</p></div>
+          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="chat-bubble-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="ChatBubble" size="default" color="primary" title="" description="" items="[{&quot;id&quot;:&quot;question&quot;,&quot;direction&quot;:&quot;incoming&quot;,&quot;author&quot;:&quot;Support agent&quot;,&quot;title&quot;:&quot;How can we help?&quot;,&quot;text&quot;:&quot;You can ask questions like:&quot;,&quot;bullets&quot;:[&quot;What&#39;s WireJS UI?&quot;,&quot;How many component examples are there?&quot;,&quot;Is there a PRO version?&quot;],&quot;avatarSrc&quot;:&quot;/avatar-example.svg&quot;,&quot;avatarAlt&quot;:&quot;Support agent&quot;,&quot;avatarLabel&quot;:&quot;View support agent&quot;},{&quot;id&quot;:&quot;request&quot;,&quot;direction&quot;:&quot;outgoing&quot;,&quot;author&quot;:&quot;AZ&quot;,&quot;text&quot;:&quot;what&#39;s wirejs ui?&quot;,&quot;avatarFallback&quot;:&quot;AZ&quot;,&quot;avatarLabel&quot;:&quot;View AZ&quot;},{&quot;id&quot;:&quot;answer&quot;,&quot;direction&quot;:&quot;incoming&quot;,&quot;author&quot;:&quot;Support agent&quot;,&quot;text&quot;:&quot;WireJS UI is an open-source set of reusable UI components built for responsive applications.&quot;,&quot;links&quot;:[{&quot;label&quot;:&quot;Installation guide&quot;,&quot;href&quot;:&quot;/installation&quot;},{&quot;label&quot;:&quot;Framework guides&quot;,&quot;href&quot;:&quot;/framework-guides&quot;}],&quot;avatarSrc&quot;:&quot;/avatar-example.svg&quot;,&quot;avatarAlt&quot;:&quot;Support agent&quot;,&quot;avatarLabel&quot;:&quot;View support agent&quot;}]" oneSided="false" showAvatars="true" showMetadata="false" ariaLabel="Messages with avatars"></div></div>
+            
+            <div class="demo-render"><ChatBubble size="lg" title="Advanced Chat Bubble" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"chat-bubble-2-1","key":"chat-bubble-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"chat-bubble-2-2","key":"chat-bubble-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#chat-bubble-demo","actionHref":"#chat-bubble-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' oneSided="false" showAvatars="true" showMetadata="true" ariaLabel="Chat Bubble 3 example" variant="success" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Messages with avatars usage">
+          <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;ChatBubble
+  size="lg"
+  title="Advanced Chat Bubble"
+  description="A richer configuration demonstrating additional content and hierarchy."
   items='[
     &#123;
-      "id": "question",
-      "direction": "incoming",
-      "author": "Support agent",
-      "title": "How can we help?",
-      "text": "You can ask questions like:",
-      "bullets": [
-        "What\'s WireJS UI?",
-        "How many component examples are there?",
-        "Is there a PRO version?"
-      ],
-      "avatarSrc": "/avatar-example.svg",
-      "avatarAlt": "Support agent",
-      "avatarLabel": "View support agent"
-    &#125;,
-    &#123;
-      "id": "request",
-      "direction": "outgoing",
-      "author": "AZ",
-      "text": "what\'s wirejs ui?",
-      "avatarFallback": "AZ",
-      "avatarLabel": "View AZ"
-    &#125;,
-    &#123;
-      "id": "answer",
-      "direction": "incoming",
-      "author": "Support agent",
-      "text": "WireJS UI is an open-source set of reusable UI components built for responsive applications.",
-      "links": [
+      "id": "chat-bubble-2-1",
+      "key": "chat-bubble-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#chat-bubble-demo",
+      "actionHref": "#chat-bubble-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
         &#123;
-          "label": "Installation guide",
-          "href": "/installation"
+          "label": "Nested option A",
+          "value": "nested-a"
         &#125;,
         &#123;
-          "label": "Framework guides",
-          "href": "/framework-guides"
+          "label": "Nested option B",
+          "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",
-          "href": "/installation"
+          "label": "Documentation",
+          "href": "#documentation"
         &#125;,
         &#123;
-          "label": "Framework guides",
-          "href": "/framework-guides"
+          "label": "API reference",
+          "href": "#api-reference"
         &#125;
       ],
-      "avatarSrc": "/avatar-example.svg",
-      "avatarAlt": "Support agent",
-      "avatarLabel": "View support agent",
-      "status": "Not sent",
-      "statusIcon": "icon-[lucide--circle-alert]",
-      "statusTone": "danger",
-      "action": "retry",
-      "actionLabel": "Retry"
+      "values": [
+        "Included",
+        "Unlimited"
+      ]
+    &#125;,
+    &#123;
+      "id": "chat-bubble-2-2",
+      "key": "chat-bubble-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#chat-bubble-demo",
+      "actionHref": "#chat-bubble-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "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;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("action", (event) =&gt; &#123;
+  console.log("action", event.detail)
+&#125;)
+
+component?.addEventListener("messageClick", (event) =&gt; &#123;
+  console.log("messageClick", event.detail)
+&#125;)
+
+component?.addEventListener("avatarClick", (event) =&gt; &#123;
+  console.log("avatarClick", event.detail)
+&#125;)
+
+component?.addEventListener("linkClick", (event) =&gt; &#123;
+  console.log("linkClick", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>oneSided</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showAvatars</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showMetadata</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>"Conversation"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#chat-bubble-demo-1">Conversation</a><a href="#chat-bubble-demo-2">One-sided</a><a href="#chat-bubble-demo-3">Messages with avatars</a><a href="#chat-bubble-demo-4">Message metadata</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#chat-bubble-demo-1">Production default</a><a href="#chat-bubble-demo-2">Compact application</a><a href="#chat-bubble-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/checkbox.wrn b/examples/component-showcase/app/pages/components/checkbox.wrn
index c8d556dd..f8f6ef44 100644
--- a/examples/component-showcase/app/pages/components/checkbox.wrn
+++ b/examples/component-showcase/app/pages/components/checkbox.wrn
@@ -3,31 +3,31 @@ page CheckboxDetail {
   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") ?? "checkbox-1"
-  state playground_name = ctx.url.searchParams.get("pg_name") ?? "checkboxField"
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Accept notifications"
-  state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
-  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter checkbox"
+  state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
+  state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Checkbox"
+  state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true"
+  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
   state playground_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") ?? "terms"
-  state playground_values = ctx.url.searchParams.get("pg_values") ?? "[]"
-  state playground_options = ctx.url.searchParams.get("pg_options") ?? "[]"
-  state playground_checked = ctx.url.searchParams.get("pg_checked") ?? "true"
-  state playground_indeterminate = ctx.url.searchParams.get("pg_indeterminate") ?? "false"
+  state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
+  state playground_values = JSON.parse(ctx.url.searchParams.get("pg_values") ?? "[{\"id\":\"checkbox-0-1\",\"key\":\"checkbox-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#checkbox-demo\",\"actionHref\":\"#checkbox-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"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\":\"checkbox-0-2\",\"key\":\"checkbox-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#checkbox-demo\",\"actionHref\":\"#checkbox-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"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_options = JSON.parse(ctx.url.searchParams.get("pg_options") ?? "[{\"id\":\"checkbox-0-1\",\"key\":\"checkbox-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#checkbox-demo\",\"actionHref\":\"#checkbox-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"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\":\"checkbox-0-2\",\"key\":\"checkbox-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#checkbox-demo\",\"actionHref\":\"#checkbox-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"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_checked = (ctx.url.searchParams.get("pg_checked") ?? "false") === "true"
+  state playground_indeterminate = (ctx.url.searchParams.get("pg_indeterminate") ?? "false") === "true"
   state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "vertical"
-  state playground_card = ctx.url.searchParams.get("pg_card") ?? "false"
-  state playground_rightAligned = ctx.url.searchParams.get("pg_rightAligned") ?? "false"
-  state playground_list = ctx.url.searchParams.get("pg_list") ?? "false"
+  state playground_card = (ctx.url.searchParams.get("pg_card") ?? "false") === "true"
+  state playground_rightAligned = (ctx.url.searchParams.get("pg_rightAligned") ?? "false") === "true"
+  state playground_list = (ctx.url.searchParams.get("pg_list") ?? "false") === "true"
   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_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
+  state playground_inline = (ctx.url.searchParams.get("pg_inline") ?? "false") === "true"
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  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 = "Checkbox"
     description = "Theme-aware, responsive checkbox component."
@@ -45,30 +45,455 @@ page CheckboxDetail {
       </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="Checkbox" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Checkbox" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="input,change,focus,blur,invalid">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Checkbox</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="Checkbox" 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}" values="{playground_values}" options="{playground_options}" checked="{playground_checked}" indeterminate="{playground_indeterminate}" orientation="{playground_orientation}" card="{playground_card}" rightAligned="{playground_rightAligned}" list="{playground_list}" helperText="{playground_helperText}" cornerHint="{playground_cornerHint}" error="{playground_error}" inline="{playground_inline}" readonly="{playground_readonly}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Checkbox 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}' values='{playground_values}' options='{playground_options}' checked='{playground_checked}' indeterminate='{playground_indeterminate}' orientation='{playground_orientation}' card='{playground_card}' rightAligned='{playground_rightAligned}' list='{playground_list}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' inline='{playground_inline}' readonly='{playground_readonly}' disabled='{playground_disabled}' required='{playground_required}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Checkbox
-  id="checkbox-1"
-  name="checkboxField"
-  label="Accept notifications"
-  placeholder="Enter checkbox"
-  value="terms"
-  values='[]'
-  options='[]'
-  checked="true"
+  placeholder="Enter a sample value"
+  value="sample-1"
+  values='[
+    &#123;
+      "id": "checkbox-0-1",
+      "key": "checkbox-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#checkbox-demo",
+      "actionHref": "#checkbox-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "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": "checkbox-0-2",
+      "key": "checkbox-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#checkbox-demo",
+      "actionHref": "#checkbox-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "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;
+  ]'
+  options='[
+    &#123;
+      "id": "checkbox-0-1",
+      "key": "checkbox-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#checkbox-demo",
+      "actionHref": "#checkbox-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "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": "checkbox-0-2",
+      "key": "checkbox-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#checkbox-demo",
+      "actionHref": "#checkbox-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "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>27 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-checkbox-size"><span><strong>size</strong><small>string</small></span><select id="playground-checkbox-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-checkbox-color"><span><strong>color</strong><small>string</small></span><select id="playground-checkbox-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-checkbox-id"><span><strong>id</strong><small>string</small></span><input id="playground-checkbox-id" name="pg_id" type="text" value="checkbox-1" /></label><label class="playground-field" for="playground-checkbox-name"><span><strong>name</strong><small>string</small></span><input id="playground-checkbox-name" name="pg_name" type="text" value="checkboxField" /></label><label class="playground-field" for="playground-checkbox-label"><span><strong>label</strong><small>string</small></span><input id="playground-checkbox-label" name="pg_label" type="text" value="Accept notifications" /></label><label class="playground-toggle" for="playground-checkbox-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-checkbox-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-checkbox-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-checkbox-placeholder" name="pg_placeholder" type="text" value="Enter checkbox" /></label><label class="playground-field" for="playground-checkbox-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-checkbox-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-checkbox-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-checkbox-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-checkbox-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-checkbox-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-checkbox-value"><span><strong>value</strong><small>string</small></span><input id="playground-checkbox-value" name="pg_value" type="text" value="terms" /></label><label class="playground-field" for="playground-checkbox-values"><span><strong>values</strong><small>string</small></span><textarea id="playground-checkbox-values" name="pg_values" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-checkbox-options"><span><strong>options</strong><small>string</small></span><textarea id="playground-checkbox-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-checkbox-checked"><span><strong>checked</strong><small>boolean</small></span><input id="playground-checkbox-checked" name="pg_checked" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-indeterminate"><span><strong>indeterminate</strong><small>boolean</small></span><input id="playground-checkbox-indeterminate" name="pg_indeterminate" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-checkbox-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-checkbox-orientation" name="pg_orientation"><option value="vertical" selected>vertical</option><option value="horizontal">horizontal</option></select></label><label class="playground-toggle" for="playground-checkbox-card"><span><strong>card</strong><small>boolean</small></span><input id="playground-checkbox-card" name="pg_card" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-rightAligned"><span><strong>right Aligned</strong><small>boolean</small></span><input id="playground-checkbox-rightAligned" name="pg_rightAligned" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-list"><span><strong>list</strong><small>boolean</small></span><input id="playground-checkbox-list" name="pg_list" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-checkbox-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-checkbox-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-checkbox-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-checkbox-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-checkbox-error"><span><strong>error</strong><small>string</small></span><input id="playground-checkbox-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-checkbox-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-checkbox-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-checkbox-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-checkbox-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-checkbox-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-checkbox-class"><span><strong>class</strong><small>string</small></span><input id="playground-checkbox-class" name="pg_class" type="text" value="" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-checkbox-size"><span><strong>size</strong><small>string</small></span><select id="playground-checkbox-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-checkbox-color"><span><strong>color</strong><small>string</small></span><select id="playground-checkbox-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-checkbox-id"><span><strong>id</strong><small>string</small></span><input id="playground-checkbox-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-checkbox-name"><span><strong>name</strong><small>string</small></span><input id="playground-checkbox-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-checkbox-label"><span><strong>label</strong><small>string</small></span><input id="playground-checkbox-label" name="pg_label" type="text" value="Checkbox" /></label><label class="playground-toggle" for="playground-checkbox-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-checkbox-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-checkbox-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-checkbox-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-checkbox-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-checkbox-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-checkbox-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-checkbox-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-checkbox-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-checkbox-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-checkbox-value"><span><strong>value</strong><small>string</small></span><input id="playground-checkbox-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-checkbox-values"><span><strong>values</strong><small>string</small></span><textarea id="playground-checkbox-values" name="pg_values" rows="5" spellcheck="false" data-playground-json>[
+  {
+    "id": "checkbox-0-1",
+    "key": "checkbox-0-1",
+    "value": "primary",
+    "label": "Primary workflow",
+    "title": "Primary workflow",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "A configurable sample message.",
+    "href": "#checkbox-demo",
+    "actionHref": "#checkbox-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": true,
+    "selected": true,
+    "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": "checkbox-0-2",
+    "key": "checkbox-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#checkbox-demo",
+    "actionHref": "#checkbox-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": false,
+    "selected": false,
+    "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-checkbox-options"><span><strong>options</strong><small>string</small></span><textarea id="playground-checkbox-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[
+  {
+    "id": "checkbox-0-1",
+    "key": "checkbox-0-1",
+    "value": "primary",
+    "label": "Primary workflow",
+    "title": "Primary workflow",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "A configurable sample message.",
+    "href": "#checkbox-demo",
+    "actionHref": "#checkbox-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": true,
+    "selected": true,
+    "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": "checkbox-0-2",
+    "key": "checkbox-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#checkbox-demo",
+    "actionHref": "#checkbox-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": false,
+    "selected": false,
+    "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-checkbox-checked"><span><strong>checked</strong><small>boolean</small></span><input id="playground-checkbox-checked" name="pg_checked" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-indeterminate"><span><strong>indeterminate</strong><small>boolean</small></span><input id="playground-checkbox-indeterminate" name="pg_indeterminate" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-checkbox-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-checkbox-orientation" name="pg_orientation"><option value="vertical" selected>vertical</option><option value="horizontal">horizontal</option></select></label><label class="playground-toggle" for="playground-checkbox-card"><span><strong>card</strong><small>boolean</small></span><input id="playground-checkbox-card" name="pg_card" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-rightAligned"><span><strong>right Aligned</strong><small>boolean</small></span><input id="playground-checkbox-rightAligned" name="pg_rightAligned" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-list"><span><strong>list</strong><small>boolean</small></span><input id="playground-checkbox-list" name="pg_list" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-checkbox-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-checkbox-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-checkbox-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-checkbox-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-checkbox-error"><span><strong>error</strong><small>string</small></span><input id="playground-checkbox-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-checkbox-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-checkbox-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-checkbox-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-checkbox-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-checkbox-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-checkbox-class"><span><strong>class</strong><small>string</small></span><input id="playground-checkbox-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -77,448 +502,755 @@ page CheckboxDetail {
         <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 checkbox</h2><p>Use a checkbox for an independent yes-or-no choice.</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="checkbox-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="Checkbox" size="default" color="primary" id="checkbox-1" name="checkboxField" label="Accept notifications" placeholder="Enter checkbox" variant="normal" icon="" iconPosition="start" value="terms" values="[]" options="[]" checked="true" indeterminate="false" orientation="vertical" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><Checkbox size="default" label="Checkbox" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" values='[{"id":"checkbox-0-1","key":"checkbox-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#checkbox-demo","actionHref":"#checkbox-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"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":"checkbox-0-2","key":"checkbox-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#checkbox-demo","actionHref":"#checkbox-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"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"]}]' options='[{"id":"checkbox-0-1","key":"checkbox-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#checkbox-demo","actionHref":"#checkbox-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"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":"checkbox-0-2","key":"checkbox-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#checkbox-demo","actionHref":"#checkbox-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"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"]}]' checked="false" indeterminate="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Default checkbox 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;Checkbox
-  id="checkbox-1"
-  name="checkboxField"
-  label="Accept notifications"
-  placeholder="Enter checkbox"
-  value="terms"
-  values='[]'
-  options='[]'
-  checked="true"
+  placeholder="Enter a sample value"
+  value="sample-1"
+  values='[
+    &#123;
+      "id": "checkbox-0-1",
+      "key": "checkbox-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#checkbox-demo",
+      "actionHref": "#checkbox-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "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": "checkbox-0-2",
+      "key": "checkbox-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#checkbox-demo",
+      "actionHref": "#checkbox-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "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;
+  ]'
+  options='[
+    &#123;
+      "id": "checkbox-0-1",
+      "key": "checkbox-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#checkbox-demo",
+      "actionHref": "#checkbox-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "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": "checkbox-0-2",
+      "key": "checkbox-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#checkbox-demo",
+      "actionHref": "#checkbox-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "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>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">States</span><h2>Indeterminate</h2><p>Represent a partially selected group with the mixed state.</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="checkbox-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="Checkbox" size="default" color="primary" id="checkbox-2" name="checkboxField" label="Accept notifications" placeholder="Enter checkbox" variant="outlined" icon="icon-[lucide--sparkles]" iconPosition="start" value="terms" values="[]" options="[]" checked="false" indeterminate="true" orientation="vertical" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><Checkbox size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" variant="secondary" icon="icon-[lucide--arrow-right]" value="sample-2" values='[{"id":"checkbox-1-1","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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":"checkbox-1-2","key":"checkbox-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#checkbox-demo","actionHref":"#checkbox-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"]}]' options='[{"id":"checkbox-1-1","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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":"checkbox-1-2","key":"checkbox-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#checkbox-demo","actionHref":"#checkbox-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"]}]' checked="false" indeterminate="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Indeterminate 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;Checkbox
-  id="checkbox-2"
-  name="checkboxField"
-  label="Accept notifications"
-  placeholder="Enter checkbox"
-  variant="outlined"
-  icon="icon-[lucide--sparkles]"
-  value="terms"
-  values='[]'
-  options='[]'
-  indeterminate="true"
+  size="sm"
+  label="Compact example"
+  placeholder="Enter a sample value"
+  variant="secondary"
+  icon="icon-[lucide--arrow-right]"
+  value="sample-2"
+  values='[
+    &#123;
+      "id": "checkbox-1-1",
+      "key": "checkbox-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": "#checkbox-demo",
+      "actionHref": "#checkbox-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": "checkbox-1-2",
+      "key": "checkbox-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#checkbox-demo",
+      "actionHref": "#checkbox-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;
+  ]'
+  options='[
+    &#123;
+      "id": "checkbox-1-1",
+      "key": "checkbox-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": "#checkbox-demo",
+      "actionHref": "#checkbox-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": "checkbox-1-2",
+      "key": "checkbox-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#checkbox-demo",
+      "actionHref": "#checkbox-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">States</span><h2>Disabled</h2><p>Disable a checkbox when its choice is unavailable.</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="checkbox-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="Checkbox" size="default" color="primary" id="checkbox-3" name="checkboxField" label="Accept notifications" placeholder="Enter checkbox" variant="floating" icon="icon-[lucide--circle-user-round]" iconPosition="end" value="terms" values="[]" options="[]" checked="false" indeterminate="false" orientation="vertical" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="true" required="false"></div></div>
+            
+            <div class="demo-render"><Checkbox size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" variant="success" icon="icon-[lucide--trash-2]" value="sample-3" values='[{"id":"checkbox-2-1","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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":"checkbox-2-2","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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"]}]' options='[{"id":"checkbox-2-1","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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":"checkbox-2-2","key":"checkbox-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":"#checkbox-demo","actionHref":"#checkbox-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"]}]' checked="false" indeterminate="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Disabled 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;Checkbox
-  id="checkbox-3"
-  name="checkboxField"
-  label="Accept notifications"
-  placeholder="Enter checkbox"
-  variant="floating"
-  icon="icon-[lucide--circle-user-round]"
-  iconPosition="end"
-  value="terms"
-  values='[]'
-  options='[]'
-  disabled="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Groups</span><h2>Checkbox group options</h2><p>Render passed options as a named checkbox group.</p></div>
-          <span class="demo-case-number">04</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="checkbox-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="Checkbox" size="sm" color="primary" id="checkbox-4" name="checkboxField" label="Notification preferences" placeholder="Enter checkbox" variant="pill" icon="" iconPosition="start" value="terms" values="[&quot;product&quot;]" options="[{&quot;label&quot;:&quot;Product updates&quot;,&quot;value&quot;:&quot;product&quot;,&quot;description&quot;:&quot;&quot;},{&quot;label&quot;:&quot;Account activity&quot;,&quot;value&quot;:&quot;account&quot;,&quot;description&quot;:&quot;&quot;},{&quot;label&quot;:&quot;Partner offers&quot;,&quot;value&quot;:&quot;partners&quot;,&quot;description&quot;:&quot;&quot;}]" checked="false" indeterminate="false" orientation="horizontal" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Checkbox group options usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Checkbox
-  size="sm"
-  id="checkbox-4"
-  name="checkboxField"
-  label="Notification preferences"
-  placeholder="Enter checkbox"
-  variant="pill"
-  value="terms"
+  size="lg"
+  label="Advanced example"
+  placeholder="Search by name, email, or identifier"
+  variant="success"
+  icon="icon-[lucide--trash-2]"
+  value="sample-3"
   values='[
-    "product"
+    &#123;
+      "id": "checkbox-2-1",
+      "key": "checkbox-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": "#checkbox-demo",
+      "actionHref": "#checkbox-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": "checkbox-2-2",
+      "key": "checkbox-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": "#checkbox-demo",
+      "actionHref": "#checkbox-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;
   ]'
   options='[
     &#123;
-      "label": "Product updates",
-      "value": "product",
-      "description": ""
+      "id": "checkbox-2-1",
+      "key": "checkbox-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": "#checkbox-demo",
+      "actionHref": "#checkbox-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": "Account activity",
-      "value": "account",
-      "description": ""
-    &#125;,
-    &#123;
-      "label": "Partner offers",
-      "value": "partners",
-      "description": ""
+      "id": "checkbox-2-2",
+      "key": "checkbox-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": "#checkbox-demo",
+      "actionHref": "#checkbox-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;
   ]'
-  orientation="horizontal"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Content</span><h2>Checkboxes with descriptions</h2><p>Add supporting copy to clarify each choice.</p></div>
-          <span class="demo-case-number">05</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="checkbox-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="Checkbox" size="default" color="primary" id="checkbox-5" name="checkboxField" label="Notification preferences" placeholder="Enter checkbox" variant="normal" icon="" iconPosition="start" value="terms" values="[&quot;product&quot;]" options="[{&quot;label&quot;:&quot;Product updates&quot;,&quot;value&quot;:&quot;product&quot;,&quot;description&quot;:&quot;News about features and improvements.&quot;},{&quot;label&quot;:&quot;Account activity&quot;,&quot;value&quot;:&quot;account&quot;,&quot;description&quot;:&quot;Important security and billing alerts.&quot;},{&quot;label&quot;:&quot;Partner offers&quot;,&quot;value&quot;:&quot;partners&quot;,&quot;description&quot;:&quot;Relevant offers from trusted partners.&quot;}]" checked="false" indeterminate="false" orientation="vertical" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="true" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Checkboxes with descriptions usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Checkbox
-  id="checkbox-5"
-  name="checkboxField"
-  label="Notification preferences"
-  placeholder="Enter checkbox"
-  value="terms"
-  values='[
-    "product"
-  ]'
-  options='[
-    &#123;
-      "label": "Product updates",
-      "value": "product",
-      "description": "News about features and improvements."
-    &#125;,
-    &#123;
-      "label": "Account activity",
-      "value": "account",
-      "description": "Important security and billing alerts."
-    &#125;,
-    &#123;
-      "label": "Partner offers",
-      "value": "partners",
-      "description": "Relevant offers from trusted partners."
-    &#125;
-  ]'
-  readonly="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Cards</span><h2>Checkbox cards</h2><p>Present multiple choices as selectable horizontal cards.</p></div>
-          <span class="demo-case-number">06</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="checkbox-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="Checkbox" size="default" color="primary" id="checkbox-6" name="checkboxField" label="Notification preferences" placeholder="Enter checkbox" variant="normal" icon="" iconPosition="start" value="terms" values="[&quot;product&quot;]" options="[{&quot;label&quot;:&quot;Product updates&quot;,&quot;value&quot;:&quot;product&quot;,&quot;description&quot;:&quot;News about features and improvements.&quot;},{&quot;label&quot;:&quot;Account activity&quot;,&quot;value&quot;:&quot;account&quot;,&quot;description&quot;:&quot;Important security and billing alerts.&quot;},{&quot;label&quot;:&quot;Partner offers&quot;,&quot;value&quot;:&quot;partners&quot;,&quot;description&quot;:&quot;Relevant offers from trusted partners.&quot;}]" checked="false" indeterminate="false" orientation="horizontal" card="true" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Checkbox cards usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Checkbox
-  id="checkbox-6"
-  name="checkboxField"
-  label="Notification preferences"
-  placeholder="Enter checkbox"
-  value="terms"
-  values='[
-    "product"
-  ]'
-  options='[
-    &#123;
-      "label": "Product updates",
-      "value": "product",
-      "description": "News about features and improvements."
-    &#125;,
-    &#123;
-      "label": "Account activity",
-      "value": "account",
-      "description": "Important security and billing alerts."
-    &#125;,
-    &#123;
-      "label": "Partner offers",
-      "value": "partners",
-      "description": "Relevant offers from trusted partners."
-    &#125;
-  ]'
-  orientation="horizontal"
-  card="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Cards</span><h2>Vertical checkbox cards</h2><p>Stack selectable checkbox cards vertically.</p></div>
-          <span class="demo-case-number">07</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="checkbox-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="Checkbox" size="default" color="primary" id="checkbox-7" name="checkboxField" label="Notification preferences" placeholder="Enter checkbox" variant="normal" icon="" iconPosition="start" value="terms" values="[&quot;product&quot;]" options="[{&quot;label&quot;:&quot;Product updates&quot;,&quot;value&quot;:&quot;product&quot;,&quot;description&quot;:&quot;News about features and improvements.&quot;},{&quot;label&quot;:&quot;Account activity&quot;,&quot;value&quot;:&quot;account&quot;,&quot;description&quot;:&quot;Important security and billing alerts.&quot;},{&quot;label&quot;:&quot;Partner offers&quot;,&quot;value&quot;:&quot;partners&quot;,&quot;description&quot;:&quot;Relevant offers from trusted partners.&quot;}]" checked="false" indeterminate="false" orientation="vertical" card="true" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="true" readonly="false" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Vertical checkbox cards usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Checkbox
-  id="checkbox-7"
-  name="checkboxField"
-  label="Notification preferences"
-  placeholder="Enter checkbox"
-  value="terms"
-  values='[
-    "product"
-  ]'
-  options='[
-    &#123;
-      "label": "Product updates",
-      "value": "product",
-      "description": "News about features and improvements."
-    &#125;,
-    &#123;
-      "label": "Account activity",
-      "value": "account",
-      "description": "Important security and billing alerts."
-    &#125;,
-    &#123;
-      "label": "Partner offers",
-      "value": "partners",
-      "description": "Relevant offers from trusted partners."
-    &#125;
-  ]'
-  card="true"
-  inline="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Alignment</span><h2>Right-aligned checkbox</h2><p>Place checkbox controls at the far edge of their labels.</p></div>
-          <span class="demo-case-number">08</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="checkbox-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="Checkbox" size="default" color="primary" id="checkbox-8" name="checkboxField" label="Notification preferences" placeholder="Enter checkbox" variant="normal" icon="" iconPosition="start" value="terms" values="[&quot;product&quot;]" options="[{&quot;label&quot;:&quot;Product updates&quot;,&quot;value&quot;:&quot;product&quot;,&quot;description&quot;:&quot;News about features and improvements.&quot;},{&quot;label&quot;:&quot;Account activity&quot;,&quot;value&quot;:&quot;account&quot;,&quot;description&quot;:&quot;Important security and billing alerts.&quot;},{&quot;label&quot;:&quot;Partner offers&quot;,&quot;value&quot;:&quot;partners&quot;,&quot;description&quot;:&quot;Relevant offers from trusted partners.&quot;}]" checked="false" indeterminate="false" orientation="vertical" card="false" rightAligned="true" list="false" helperText="" cornerHint="Optional" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Right-aligned checkbox usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Checkbox
-  id="checkbox-8"
-  name="checkboxField"
-  label="Notification preferences"
-  placeholder="Enter checkbox"
-  value="terms"
-  values='[
-    "product"
-  ]'
-  options='[
-    &#123;
-      "label": "Product updates",
-      "value": "product",
-      "description": "News about features and improvements."
-    &#125;,
-    &#123;
-      "label": "Account activity",
-      "value": "account",
-      "description": "Important security and billing alerts."
-    &#125;,
-    &#123;
-      "label": "Partner offers",
-      "value": "partners",
-      "description": "Relevant offers from trusted partners."
-    &#125;
-  ]'
-  rightAligned="true"
-  cornerHint="Optional"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Lists</span><h2>Checkbox list group</h2><p>Separate checkbox options with list dividers.</p></div>
-          <span class="demo-case-number">09</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="checkbox-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="Checkbox" size="default" color="primary" id="checkbox-9" name="checkboxField" label="Notification preferences" placeholder="Enter checkbox" variant="normal" icon="" iconPosition="start" value="terms" values="[&quot;product&quot;]" options="[{&quot;label&quot;:&quot;Product updates&quot;,&quot;value&quot;:&quot;product&quot;,&quot;description&quot;:&quot;News about features and improvements.&quot;},{&quot;label&quot;:&quot;Account activity&quot;,&quot;value&quot;:&quot;account&quot;,&quot;description&quot;:&quot;Important security and billing alerts.&quot;},{&quot;label&quot;:&quot;Partner offers&quot;,&quot;value&quot;:&quot;partners&quot;,&quot;description&quot;:&quot;Relevant offers from trusted partners.&quot;}]" checked="false" indeterminate="false" orientation="vertical" card="false" rightAligned="false" list="true" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Checkbox list group usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Checkbox
-  id="checkbox-9"
-  name="checkboxField"
-  label="Notification preferences"
-  placeholder="Enter checkbox"
-  value="terms"
-  values='[
-    "product"
-  ]'
-  options='[
-    &#123;
-      "label": "Product updates",
-      "value": "product",
-      "description": "News about features and improvements."
-    &#125;,
-    &#123;
-      "label": "Account activity",
-      "value": "account",
-      "description": "Important security and billing alerts."
-    &#125;,
-    &#123;
-      "label": "Partner offers",
-      "value": "partners",
-      "description": "Relevant offers from trusted partners."
-    &#125;
-  ]'
-  list="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Lists</span><h2>Horizontal checkbox list group</h2><p>Combine list styling with a horizontal layout.</p></div>
-          <span class="demo-case-number">010</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="checkbox-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="Checkbox" size="default" color="primary" id="checkbox-10" name="checkboxField" label="Notification preferences" placeholder="Enter checkbox" variant="normal" icon="" iconPosition="start" value="terms" values="[&quot;product&quot;]" options="[{&quot;label&quot;:&quot;Product updates&quot;,&quot;value&quot;:&quot;product&quot;,&quot;description&quot;:&quot;News about features and improvements.&quot;},{&quot;label&quot;:&quot;Account activity&quot;,&quot;value&quot;:&quot;account&quot;,&quot;description&quot;:&quot;Important security and billing alerts.&quot;},{&quot;label&quot;:&quot;Partner offers&quot;,&quot;value&quot;:&quot;partners&quot;,&quot;description&quot;:&quot;Relevant offers from trusted partners.&quot;}]" checked="false" indeterminate="false" orientation="horizontal" card="false" rightAligned="false" list="true" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Horizontal checkbox list group usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Checkbox
-  id="checkbox-10"
-  name="checkboxField"
-  label="Notification preferences"
-  placeholder="Enter checkbox"
-  value="terms"
-  values='[
-    "product"
-  ]'
-  options='[
-    &#123;
-      "label": "Product updates",
-      "value": "product",
-      "description": "News about features and improvements."
-    &#125;,
-    &#123;
-      "label": "Account activity",
-      "value": "account",
-      "description": "Important security and billing alerts."
-    &#125;,
-    &#123;
-      "label": "Partner offers",
-      "value": "partners",
-      "description": "Relevant offers from trusted partners."
-    &#125;
-  ]'
-  orientation="horizontal"
-  list="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Validation</span><h2>Validation states</h2><p>Validate required checkbox choices with @wrnexus/validation.</p></div>
-          <span class="demo-case-number">011</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="checkbox-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"><form data-schema="basic-form-validation" class="demo-validation-form"><div data-component="Checkbox" size="default" color="primary" id="checkbox-11" name="validatedField" label="Notification preferences" placeholder="Enter checkbox" variant="normal" icon="" iconPosition="start" value="terms" values="[&quot;product&quot;]" options="[{&quot;label&quot;:&quot;Product updates&quot;,&quot;value&quot;:&quot;product&quot;,&quot;description&quot;:&quot;News about features and improvements.&quot;},{&quot;label&quot;:&quot;Account activity&quot;,&quot;value&quot;:&quot;account&quot;,&quot;description&quot;:&quot;Important security and billing alerts.&quot;},{&quot;label&quot;:&quot;Partner offers&quot;,&quot;value&quot;:&quot;partners&quot;,&quot;description&quot;:&quot;Relevant offers from trusted partners.&quot;}]" checked="false" indeterminate="false" orientation="vertical" card="false" rightAligned="false" list="false" helperText="Select at least one notification type." 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="Validation states usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Checkbox
-  id="checkbox-11"
-  name="validatedField"
-  label="Notification preferences"
-  placeholder="Enter checkbox"
-  value="terms"
-  values='[
-    "product"
-  ]'
-  options='[
-    &#123;
-      "label": "Product updates",
-      "value": "product",
-      "description": "News about features and improvements."
-    &#125;,
-    &#123;
-      "label": "Account activity",
-      "value": "account",
-      "description": "Important security and billing alerts."
-    &#125;,
-    &#123;
-      "label": "Partner offers",
-      "value": "partners",
-      "description": "Relevant offers from trusted partners."
-    &#125;
-  ]'
-  helperText="Select at least one notification type."
-  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>@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>@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;Checkbox
+  @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)'
+/&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=\"Checkbox\"], [data-component=\"Checkbox\"]")
 
-component.addEventListener('input', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("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>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>"Checkbox"</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>string</td><td><code>"on"</code></td><td>No</td></tr><tr><td><code>values</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>checked</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>indeterminate</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"vertical"</code></td><td>No</td></tr><tr><td><code>card</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>rightAligned</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>list</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>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="#checkbox-demo-1">Default checkbox</a><a href="#checkbox-demo-2">Indeterminate</a><a href="#checkbox-demo-3">Disabled</a><a href="#checkbox-demo-4">Checkbox group options</a><a href="#checkbox-demo-5">Checkboxes with descriptions</a><a href="#checkbox-demo-6">Checkbox cards</a><a href="#checkbox-demo-7">Vertical checkbox cards</a><a href="#checkbox-demo-8">Right-aligned checkbox</a><a href="#checkbox-demo-9">Checkbox list group</a><a href="#checkbox-demo-10">Horizontal checkbox list group</a><a href="#checkbox-demo-11">Validation states</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="#checkbox-demo-1">Production default</a><a href="#checkbox-demo-2">Compact application</a><a href="#checkbox-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/auth-form"><small>Previous</small><strong>← Auth Form</strong></a>
+      <span></span>
       <a href="/components/color-picker"><small>Next</small><strong>Color Picker →</strong></a>
     </nav>
   }
diff --git a/examples/component-showcase/app/pages/components/clipboard.wrn b/examples/component-showcase/app/pages/components/clipboard.wrn
index 51b59289..65b7f90f 100644
--- a/examples/component-showcase/app/pages/components/clipboard.wrn
+++ b/examples/component-showcase/app/pages/components/clipboard.wrn
@@ -5,7 +5,7 @@ page ClipboardDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Clipboard example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default clipboard for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"clipboard-0-1\",\n    \"key\": \"clipboard-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#clipboard-demo\",\n    \"actionHref\": \"#clipboard-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"clipboard-0-2\",\n    \"key\": \"clipboard-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#clipboard-demo\",\n    \"actionHref\": \"#clipboard-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"clipboard-0-1\",\"key\":\"clipboard-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#clipboard-demo\",\"actionHref\":\"#clipboard-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"clipboard-0-2\",\"key\":\"clipboard-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#clipboard-demo\",\"actionHref\":\"#clipboard-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -25,12 +25,12 @@ page ClipboardDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Clipboard" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Clipboard" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="copy,success,error">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Clipboard</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="Clipboard" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Clipboard size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Clipboard
@@ -147,6 +147,7 @@ page ClipboardDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -257,7 +258,7 @@ page ClipboardDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-clipboard-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-clipboard-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-clipboard-class"><span><strong>class</strong><small>string</small></span><input id="playground-clipboard-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-clipboard-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-clipboard-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-clipboard-class"><span><strong>class</strong><small>string</small></span><input id="playground-clipboard-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page ClipboardDetail {
         <div class="demo-workbench">
           <div id="clipboard-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Clipboard" size="default" title="Clipboard example" description="A polished default clipboard for a modern application." items="[{&quot;id&quot;:&quot;clipboard-0-1&quot;,&quot;key&quot;:&quot;clipboard-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#clipboard-demo&quot;,&quot;actionHref&quot;:&quot;#clipboard-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;clipboard-0-2&quot;,&quot;key&quot;:&quot;clipboard-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#clipboard-demo&quot;,&quot;actionHref&quot;:&quot;#clipboard-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Clipboard size="default" title="Clipboard example" description="A polished default clipboard for a modern application." items='[{"id":"clipboard-0-1","key":"clipboard-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#clipboard-demo","actionHref":"#clipboard-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"clipboard-0-2","key":"clipboard-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#clipboard-demo","actionHref":"#clipboard-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -399,7 +401,8 @@ page ClipboardDetail {
         <div class="demo-workbench">
           <div id="clipboard-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Clipboard" size="sm" title="Compact Clipboard" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;clipboard-1-1&quot;,&quot;key&quot;:&quot;clipboard-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#clipboard-demo&quot;,&quot;actionHref&quot;:&quot;#clipboard-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;clipboard-1-2&quot;,&quot;key&quot;:&quot;clipboard-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#clipboard-demo&quot;,&quot;actionHref&quot;:&quot;#clipboard-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Clipboard size="sm" title="Compact Clipboard" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"clipboard-1-1","key":"clipboard-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#clipboard-demo","actionHref":"#clipboard-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"clipboard-1-2","key":"clipboard-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#clipboard-demo","actionHref":"#clipboard-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="secondary" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -528,7 +531,8 @@ page ClipboardDetail {
         <div class="demo-workbench">
           <div id="clipboard-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Clipboard" size="lg" title="Advanced Clipboard" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;clipboard-2-1&quot;,&quot;key&quot;:&quot;clipboard-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#clipboard-demo&quot;,&quot;actionHref&quot;:&quot;#clipboard-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;clipboard-2-2&quot;,&quot;key&quot;:&quot;clipboard-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#clipboard-demo&quot;,&quot;actionHref&quot;:&quot;#clipboard-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Clipboard size="lg" title="Advanced Clipboard" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"clipboard-2-1","key":"clipboard-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#clipboard-demo","actionHref":"#clipboard-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"clipboard-2-2","key":"clipboard-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#clipboard-demo","actionHref":"#clipboard-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' variant="success" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -649,11 +653,23 @@ page ClipboardDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@copy</code><span>Fires when the component emits the copy event.</span></div><div><code>@success</code><span>Fires when the component operation succeeds.</span></div><div><code>@error</code><span>Fires when the component encounters an error.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@copy</code><span>Fires when the component emits the copy event.</span></div><div><code>@success</code><span>Fires when the component emits the success event.</span></div><div><code>@error</code><span>Fires when the component cannot complete an operation.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;Clipboard
+  @copy='console.log(event.detail)'
+  @success='console.log(event.detail)'
+  @error='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"Clipboard\"], [data-component=\"Clipboard\"]")
 
-component.addEventListener('copy', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("copy", (event) =&gt; &#123;
+  console.log("copy", event.detail)
+&#125;)
+
+component?.addEventListener("success", (event) =&gt; &#123;
+  console.log("success", event.detail)
+&#125;)
+
+component?.addEventListener("error", (event) =&gt; &#123;
+  console.log("error", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Clipboard"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
diff --git a/examples/component-showcase/app/pages/components/collapse.wrn b/examples/component-showcase/app/pages/components/collapse.wrn
index 9c2a68b7..a309fa5e 100644
--- a/examples/component-showcase/app/pages/components/collapse.wrn
+++ b/examples/component-showcase/app/pages/components/collapse.wrn
@@ -3,12 +3,12 @@ page CollapseDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"collapse-default-panel\",\n    \"label\": \"Collapse\",\n    \"closeLabel\": \"Collapse\",\n    \"content\": \"This is a collapse body. It is hidden by default until the user expands it, keeping the surrounding interface focused.\"\n  }\n]"
-  state playground_multiple = ctx.url.searchParams.get("pg_multiple") ?? "false"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_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\"]}]")
+  state playground_multiple = (ctx.url.searchParams.get("pg_multiple") ?? "false") === "true"
   state playground_mode = ctx.url.searchParams.get("pg_mode") ?? "panel"
-  state playground_initialOpenIndexes = ctx.url.searchParams.get("pg_initialOpenIndexes") ?? "[]"
-  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Default collapse"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
+  state playground_initialOpenIndexes = JSON.parse(ctx.url.searchParams.get("pg_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\"]}]")
+  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Collapse 1 example"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Collapse"
     description = "Theme-aware, responsive collapse component."
@@ -26,39 +26,454 @@ page CollapseDetail {
       </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="Collapse" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Collapse" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="toggle,open,close">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Collapse</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="Collapse" size="{playground_size}" color="{playground_color}" items="{playground_items}" multiple="{playground_multiple}" mode="{playground_mode}" initialOpenIndexes="{playground_initialOpenIndexes}" ariaLabel="{playground_ariaLabel}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Collapse size='{playground_size}' color='{playground_color}' items='{playground_items}' multiple='{playground_multiple}' mode='{playground_mode}' initialOpenIndexes='{playground_initialOpenIndexes}' 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;Collapse
   items='[
     &#123;
-      "id": "collapse-default-panel",
-      "label": "Collapse",
-      "closeLabel": "Collapse",
-      "content": "This is a collapse body. It is hidden by default until the user expands it, keeping the surrounding interface focused."
+      "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": [
+        &#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": "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": [
+        &#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;
   ]'
-  initialOpenIndexes='[]'
-  ariaLabel="Default collapse"
+  initialOpenIndexes='[
+    &#123;
+      "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": [
+        &#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": "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": [
+        &#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;
+  ]'
+  ariaLabel="Collapse 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>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-collapse-size"><span><strong>size</strong><small>string</small></span><select id="playground-collapse-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-collapse-color"><span><strong>color</strong><small>string</small></span><select id="playground-collapse-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-collapse-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-collapse-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
-    "id": "collapse-default-panel",
-    "label": "Collapse",
-    "closeLabel": "Collapse",
-    "content": "This is a collapse body. It is hidden by default until the user expands it, keeping the surrounding interface focused."
+    "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"
+    ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-collapse-multiple"><span><strong>multiple</strong><small>boolean</small></span><input id="playground-collapse-multiple" name="pg_multiple" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-collapse-mode"><span><strong>mode</strong><small>string</small></span><input id="playground-collapse-mode" name="pg_mode" type="text" value="panel" /></label><label class="playground-field" for="playground-collapse-initialOpenIndexes"><span><strong>initial Open Indexes</strong><small>string</small></span><textarea id="playground-collapse-initialOpenIndexes" name="pg_initialOpenIndexes" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-collapse-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-collapse-ariaLabel" name="pg_ariaLabel" type="text" value="Default collapse" /></label><label class="playground-field" for="playground-collapse-class"><span><strong>class</strong><small>string</small></span><input id="playground-collapse-class" name="pg_class" type="text" value="" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-collapse-multiple"><span><strong>multiple</strong><small>boolean</small></span><input id="playground-collapse-multiple" name="pg_multiple" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-collapse-mode"><span><strong>mode</strong><small>string</small></span><input id="playground-collapse-mode" name="pg_mode" type="text" value="panel" /></label><label class="playground-field" for="playground-collapse-initialOpenIndexes"><span><strong>initial Open Indexes</strong><small>string</small></span><textarea id="playground-collapse-initialOpenIndexes" name="pg_initialOpenIndexes" rows="5" spellcheck="false" data-playground-json>[
+  {
+    "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"
+    ]
+  }
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-collapse-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-collapse-ariaLabel" name="pg_ariaLabel" type="text" value="Collapse 1 example" /></label><label class="playground-field" for="playground-collapse-class"><span><strong>class</strong><small>string</small></span><input id="playground-collapse-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -67,69 +482,732 @@ page CollapseDetail {
         <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 collapse</h2><p>Use a button trigger to expand and collapse supporting content.</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="collapse-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="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="demo-render"><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>
-          <section class="demo-code" aria-label="Default collapse 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;Collapse
   items='[
     &#123;
-      "id": "collapse-default-panel",
-      "label": "Collapse",
-      "closeLabel": "Collapse",
-      "content": "This is a collapse body. It is hidden by default until the user expands it, keeping the surrounding interface focused."
+      "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": [
+        &#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": "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": [
+        &#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;
   ]'
-  initialOpenIndexes='[]'
-  ariaLabel="Default collapse"
+  initialOpenIndexes='[
+    &#123;
+      "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": [
+        &#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": "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": [
+        &#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;
+  ]'
+  ariaLabel="Collapse 1 example"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Inline content</span><h2>Read more toggle</h2><p>Reveal additional copy inline with a read more and read less trigger.</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="collapse-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="Collapse" size="default" color="primary" items="[{&quot;id&quot;:&quot;collapse-read-more-panel&quot;,&quot;label&quot;:&quot;Read more&quot;,&quot;closeLabel&quot;:&quot;Read less&quot;,&quot;preview&quot;:&quot;WireJS UI is an open-source set of reusable components based on a utility-first styling system.&quot;,&quot;content&quot;:&quot;This additional collapse body is hidden by default. Expanding it reveals supporting information while preserving a compact reading experience.&quot;}]" multiple="false" mode="inline" initialOpenIndexes="[]" ariaLabel="Read more toggle"></div></div>
+            
+            <div class="demo-render"><Collapse size="sm" items='[{"id":"collapse-1-1","key":"collapse-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":"#collapse-demo","actionHref":"#collapse-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":"collapse-1-2","key":"collapse-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#collapse-demo","actionHref":"#collapse-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"]}]' multiple="false" initialOpenIndexes='[{"id":"collapse-1-1","key":"collapse-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":"#collapse-demo","actionHref":"#collapse-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":"collapse-1-2","key":"collapse-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#collapse-demo","actionHref":"#collapse-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"]}]' ariaLabel="Collapse 2 example" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Read more toggle 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;Collapse
+  size="sm"
   items='[
     &#123;
-      "id": "collapse-read-more-panel",
-      "label": "Read more",
-      "closeLabel": "Read less",
-      "preview": "WireJS UI is an open-source set of reusable components based on a utility-first styling system.",
-      "content": "This additional collapse body is hidden by default. Expanding it reveals supporting information while preserving a compact reading experience."
+      "id": "collapse-1-1",
+      "key": "collapse-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": "#collapse-demo",
+      "actionHref": "#collapse-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": "collapse-1-2",
+      "key": "collapse-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#collapse-demo",
+      "actionHref": "#collapse-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;
   ]'
-  mode="inline"
-  initialOpenIndexes='[]'
-  ariaLabel="Read more toggle"
+  initialOpenIndexes='[
+    &#123;
+      "id": "collapse-1-1",
+      "key": "collapse-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": "#collapse-demo",
+      "actionHref": "#collapse-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": "collapse-1-2",
+      "key": "collapse-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#collapse-demo",
+      "actionHref": "#collapse-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;
+  ]'
+  ariaLabel="Collapse 2 example"
+/&gt;</code></pre>
+          </section>
+        </div>
+      </article>
+      <article class="demo-case">
+        <header class="demo-case-header">
+          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
+          <span class="demo-case-number">03</span>
+        </header>
+        <div class="demo-workbench">
+          <div id="collapse-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"><Collapse size="lg" items='[{"id":"collapse-2-1","key":"collapse-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":"#collapse-demo","actionHref":"#collapse-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":"collapse-2-2","key":"collapse-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":"#collapse-demo","actionHref":"#collapse-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"]}]' multiple="false" initialOpenIndexes='[{"id":"collapse-2-1","key":"collapse-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":"#collapse-demo","actionHref":"#collapse-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":"collapse-2-2","key":"collapse-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":"#collapse-demo","actionHref":"#collapse-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"]}]' ariaLabel="Collapse 3 example" class="showcase-instance showcase-instance--3" /></div>
+          </div>
+          <section class="demo-code" aria-label="Rich configuration usage">
+            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
+            <pre><code>&lt;Collapse
+  size="lg"
+  items='[
+    &#123;
+      "id": "collapse-2-1",
+      "key": "collapse-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": "#collapse-demo",
+      "actionHref": "#collapse-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": "collapse-2-2",
+      "key": "collapse-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": "#collapse-demo",
+      "actionHref": "#collapse-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;
+  ]'
+  initialOpenIndexes='[
+    &#123;
+      "id": "collapse-2-1",
+      "key": "collapse-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": "#collapse-demo",
+      "actionHref": "#collapse-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": "collapse-2-2",
+      "key": "collapse-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": "#collapse-demo",
+      "actionHref": "#collapse-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;
+  ]'
+  ariaLabel="Collapse 3 example"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@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><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><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;Collapse
+  @toggle='console.log(event.detail)'
+  @open='console.log(event.detail)'
+  @close='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=\"Collapse\"], [data-component=\"Collapse\"]")
 
-component.addEventListener('toggle', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("toggle", (event) =&gt; &#123;
+  console.log("toggle", event.detail)
+&#125;)
+
+component?.addEventListener("open", (event) =&gt; &#123;
+  console.log("open", event.detail)
+&#125;)
+
+component?.addEventListener("close", (event) =&gt; &#123;
+  console.log("close", 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>items</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>mode</code></td><td>string</td><td><code>"panel"</code></td><td>No</td></tr><tr><td><code>initialOpenIndexes</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>"Collapsible content"</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="#collapse-demo-1">Default collapse</a><a href="#collapse-demo-2">Read more toggle</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="#collapse-demo-1">Production default</a><a href="#collapse-demo-2">Compact application</a><a href="#collapse-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/color-picker.wrn b/examples/component-showcase/app/pages/components/color-picker.wrn
index 71bd6759..88c9f649 100644
--- a/examples/component-showcase/app/pages/components/color-picker.wrn
+++ b/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_name = ctx.url.searchParams.get("pg_name") ?? "color-pickerField"
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Brand color"
-  state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
-  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter color picker"
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? "#2563eb"
+  state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
+  state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Color Picker"
+  state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true"
+  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
+  state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
   state playground_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_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   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"
-  name="color-pickerField"
-  label="Brand color"
-  placeholder="Enter color picker"
-  helperText="Helpful context for this field."
+  label="Color Picker"
+  placeholder="Enter a sample value"
+  value="sample-1"
 /&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-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-color-picker-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-color-picker-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-color-picker-class"><span><strong>class</strong><small>string</small></span><input id="playground-color-picker-class" name="pg_class" type="text" value="" /></label></div>
+          <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" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-color-picker-class"><span><strong>class</strong><small>string</small></span><input id="playground-color-picker-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </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"
-  name="color-pickerField"
-  label="Brand color"
-  placeholder="Enter color picker"
-  helperText="Helpful context for this field."
+  label="Color Picker"
+  placeholder="Enter a sample value"
+  value="sample-1"
 /&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"
-  name="color-pickerField"
-  label="Brand color"
-  placeholder="Enter color picker"
-  icon="icon-[lucide--sparkles]"
-  variant="outlined"
+  size="sm"
+  label="Compact example"
+  placeholder="Enter a sample value"
+  value="sample-2"
+  icon="icon-[lucide--arrow-right]"
+  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"
-  name="color-pickerField"
-  label="Brand color"
-  placeholder="Enter color picker"
-  icon="icon-[lucide--circle-user-round]"
-  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="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"
+  size="lg"
+  label="Advanced example"
+  placeholder="Search by name, email, or identifier"
+  value="sample-3"
+  icon="icon-[lucide--trash-2]"
+  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>@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;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("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">
diff --git a/examples/component-showcase/app/pages/components/columns.wrn b/examples/component-showcase/app/pages/components/columns.wrn
index 71d8decc..d77a2be1 100644
--- a/examples/component-showcase/app/pages/components/columns.wrn
+++ b/examples/component-showcase/app/pages/components/columns.wrn
@@ -3,13 +3,13 @@ page ColumnsDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "2"
+  state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "2")
   state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md"
   state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Columns"
-    description = "Theme-aware, responsive columns component."
+    description = "Create responsive balanced content columns with configurable count, gap, density, and maximum width."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -19,26 +19,27 @@ page ColumnsDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Layout component</span>
         <h1>Columns</h1>
-        <p>Theme-aware, responsive columns component.</p>
+        <p>Create responsive balanced content columns with configurable count, gap, density, and maximum width.</p>
         <div class="detail-badges"><span>6 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Columns" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Columns" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Columns</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="Columns" size="{playground_size}" color="{playground_color}" columns="{playground_columns}" gap="{playground_gap}" maxWidth="{playground_maxWidth}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Columns size='{playground_size}' color='{playground_color}' columns='{playground_columns}' gap='{playground_gap}' maxWidth='{playground_maxWidth}' class='{playground_class}'><div class="showcase-grid-items"><span>Content column</span><span>Supporting column</span></div></Columns></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Columns /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-columns-size"><span><strong>size</strong><small>string</small></span><select id="playground-columns-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-columns-color"><span><strong>color</strong><small>string</small></span><select id="playground-columns-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-columns-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-columns-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-columns-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-columns-gap" name="pg_gap"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option></select></label><label class="playground-field" for="playground-columns-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-columns-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="md">md</option><option value="lg">lg</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-field" for="playground-columns-class"><span><strong>class</strong><small>string</small></span><input id="playground-columns-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-columns-size"><span><strong>size</strong><small>string</small></span><select id="playground-columns-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-columns-color"><span><strong>color</strong><small>string</small></span><select id="playground-columns-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-columns-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-columns-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-columns-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-columns-gap" name="pg_gap"><option value="md" selected>md</option><option value="none">none</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="xs">xs</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-columns-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-columns-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-field" for="playground-columns-class"><span><strong>class</strong><small>string</small></span><input id="playground-columns-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -47,65 +48,78 @@ page ColumnsDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Two-column content layout</h2><p>Split supporting content into balanced responsive columns.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="columns-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Columns" size="default" columns="2" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Columns size="default" columns="2" gap="lg" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-grid-items"><span>Content column</span><span>Supporting column</span></div></Columns></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Two-column content layout usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Columns /&gt;</code></pre>
+            <pre><code>&lt;Columns
+  gap="lg"&gt;
+  &lt;div class="showcase-grid-items"&gt;&lt;span&gt;Content column&lt;/span&gt;&lt;span&gt;Supporting column&lt;/span&gt;&lt;/div&gt;
+&lt;/Columns&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
+          <div><span class="demo-case-eyebrow">Compact</span><h2>Three compact columns</h2><p>Use three columns for short summaries and dashboard groups.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="columns-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Columns" size="sm" columns="2" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Columns size="compact" columns="3" gap="sm" maxWidth="wide" class="showcase-instance showcase-instance--2"><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span></div></Columns></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Three compact columns usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Columns
-  size="sm"
-/&gt;</code></pre>
+  size="compact"
+  columns="3"
+  gap="sm"
+  maxWidth="wide"&gt;
+  &lt;div class="showcase-grid-items"&gt;&lt;span&gt;One&lt;/span&gt;&lt;span&gt;Two&lt;/span&gt;&lt;span&gt;Three&lt;/span&gt;&lt;/div&gt;
+&lt;/Columns&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Full-width four columns</h2><p>Use the full available width for structured application content.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="columns-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Columns" size="lg" columns="2" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Columns size="lg" columns="4" gap="md" maxWidth="full" class="showcase-instance showcase-instance--3"><div class="showcase-grid-items"><span>A</span><span>B</span><span>C</span><span>D</span></div></Columns></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Full-width four columns usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Columns
   size="lg"
-/&gt;</code></pre>
+  columns="4"
+  maxWidth="full"&gt;
+  &lt;div class="showcase-grid-items"&gt;&lt;span&gt;A&lt;/span&gt;&lt;span&gt;B&lt;/span&gt;&lt;span&gt;C&lt;/span&gt;&lt;span&gt;D&lt;/span&gt;&lt;/div&gt;
+&lt;/Columns&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
+        
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#columns-demo-1">Production default</a><a href="#columns-demo-2">Compact application</a><a href="#columns-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#columns-demo-1">Two-column content layout</a><a href="#columns-demo-2">Three compact columns</a><a href="#columns-demo-3">Full-width four columns</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/auth-split-layout"><small>Previous</small><strong>← Auth Split Layout</strong></a>
+      <span></span>
       <a href="/components/container"><small>Next</small><strong>Container →</strong></a>
     </nav>
   }
diff --git a/examples/component-showcase/app/pages/components/combo-box.wrn b/examples/component-showcase/app/pages/components/combo-box.wrn
index 5d4c347b..41b80dab 100644
--- a/examples/component-showcase/app/pages/components/combo-box.wrn
+++ b/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_groups = ctx.url.searchParams.get("pg_groups") ?? "[]"
+  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 = 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_allowCustomValue = ctx.url.searchParams.get("pg_allowCustomValue") ?? "false"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
-  state playground_invalid = ctx.url.searchParams.get("pg_invalid") ?? "false"
+  state playground_clearable = (ctx.url.searchParams.get("pg_clearable") ?? "true") === "true"
+  state playground_allowCustomValue = (ctx.url.searchParams.get("pg_allowCustomValue") ?? "false") === "true"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
+  state playground_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_searchResultLimit = ctx.url.searchParams.get("pg_searchResultLimit") ?? "0"
+  state playground_minSearchLength = Number(ctx.url.searchParams.get("pg_minSearchLength") ?? "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_closeOnSelect = ctx.url.searchParams.get("pg_closeOnSelect") ?? "true"
-  state playground_fixed = ctx.url.searchParams.get("pg_fixed") ?? "false"
+  state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true"
+  state playground_closeOnSelect = (ctx.url.searchParams.get("pg_closeOnSelect") ?? "true") === "true"
+  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_remoteAutoLoad = ctx.url.searchParams.get("pg_remoteAutoLoad") ?? "true"
-  state playground_infinite = ctx.url.searchParams.get("pg_infinite") ?? "false"
-  state playground_hasMore = ctx.url.searchParams.get("pg_hasMore") ?? "false"
-  state playground_page = ctx.url.searchParams.get("pg_page") ?? "1"
+  state playground_remoteDebounce = Number(ctx.url.searchParams.get("pg_remoteDebounce") ?? "250")
+  state playground_remoteAutoLoad = (ctx.url.searchParams.get("pg_remoteAutoLoad") ?? "true") === "true"
+  state playground_infinite = (ctx.url.searchParams.get("pg_infinite") ?? "false") === "true"
+  state playground_hasMore = (ctx.url.searchParams.get("pg_hasMore") ?? "false") === "true"
+  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</strong><small>number</small></span><input id="playground-combo-box-searchResultLimit" name="pg_searchResultLimit" type="number" value="0" /></label><label class="playground-field" for="playground-combo-box-optionTemplate"><span><strong>option Template</strong><small>string</small></span><select id="playground-combo-box-optionTemplate" name="pg_optionTemplate"><option value="default" selected>default</option><option value="icon">icon</option><option value="avatar">avatar</option><option value="color">color</option></select></label><label class="playground-toggle" for="playground-combo-box-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-combo-box-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-closeOnSelect"><span><strong>close On Select</strong><small>boolean</small></span><input id="playground-combo-box-closeOnSelect" name="pg_closeOnSelect" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-fixed"><span><strong>fixed</strong><small>boolean</small></span><input id="playground-combo-box-fixed" name="pg_fixed" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-placement"><span><strong>placement</strong><small>string</small></span><input id="playground-combo-box-placement" name="pg_placement" type="text" value="bottom" /></label><label class="playground-field" for="playground-combo-box-autocomplete"><span><strong>autocomplete</strong><small>string</small></span><input id="playground-combo-box-autocomplete" name="pg_autocomplete" type="text" value="off" /></label><label class="playground-toggle" for="playground-combo-box-remote"><span><strong>remote</strong><small>boolean</small></span><input id="playground-combo-box-remote" name="pg_remote" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-remoteUrl"><span><strong>remote Url</strong><small>string</small></span><input id="playground-combo-box-remoteUrl" name="pg_remoteUrl" type="text" value="" /></label><label class="playground-field" for="playground-combo-box-remoteQueryParam"><span><strong>remote Query Param</strong><small>string</small></span><input id="playground-combo-box-remoteQueryParam" name="pg_remoteQueryParam" type="text" value="q" /></label><label class="playground-field" for="playground-combo-box-remoteDebounce"><span><strong>remote Debounce</strong><small>number</small></span><input id="playground-combo-box-remoteDebounce" name="pg_remoteDebounce" type="number" value="250" /></label><label class="playground-toggle" for="playground-combo-box-remoteAutoLoad"><span><strong>remote Auto Load</strong><small>boolean</small></span><input id="playground-combo-box-remoteAutoLoad" name="pg_remoteAutoLoad" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-infinite"><span><strong>infinite</strong><small>boolean</small></span><input id="playground-combo-box-infinite" name="pg_infinite" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-hasMore"><span><strong>has More</strong><small>boolean</small></span><input id="playground-combo-box-hasMore" name="pg_hasMore" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-page"><span><strong>page</strong><small>number</small></span><input id="playground-combo-box-page" name="pg_page" type="number" value="1" /></label><label class="playground-field" for="playground-combo-box-loadMoreLabel"><span><strong>load More Label</strong><small>string</small></span><input id="playground-combo-box-loadMoreLabel" name="pg_loadMoreLabel" type="text" value="Load more" /></label><label class="playground-field" for="playground-combo-box-class"><span><strong>class</strong><small>string</small></span><input id="playground-combo-box-class" name="pg_class" type="text" value="" /></label></div>
+]</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" type="number" value="0" /></label><label class="playground-field" for="playground-combo-box-optionTemplate"><span><strong>option Template</strong><small>string</small></span><input id="playground-combo-box-optionTemplate" name="pg_optionTemplate" type="text" value="default" /></label><label class="playground-toggle" for="playground-combo-box-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-combo-box-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-closeOnSelect"><span><strong>close On Select</strong><small>boolean</small></span><input id="playground-combo-box-closeOnSelect" name="pg_closeOnSelect" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-fixed"><span><strong>fixed</strong><small>boolean</small></span><input id="playground-combo-box-fixed" name="pg_fixed" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-combo-box-placement" name="pg_placement"><option value="bottom" selected>bottom</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-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-combo-box-autocomplete"><span><strong>autocomplete</strong><small>string</small></span><input id="playground-combo-box-autocomplete" name="pg_autocomplete" type="text" value="off" /></label><label class="playground-toggle" for="playground-combo-box-remote"><span><strong>remote</strong><small>boolean</small></span><input id="playground-combo-box-remote" name="pg_remote" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-remoteUrl"><span><strong>remote Url</strong><small>string</small></span><input id="playground-combo-box-remoteUrl" name="pg_remoteUrl" type="text" value="" /></label><label class="playground-field" for="playground-combo-box-remoteQueryParam"><span><strong>remote Query Param</strong><small>string</small></span><input id="playground-combo-box-remoteQueryParam" name="pg_remoteQueryParam" type="text" value="q" /></label><label class="playground-field" for="playground-combo-box-remoteDebounce"><span><strong>remote Debounce</strong><small>number</small></span><input id="playground-combo-box-remoteDebounce" name="pg_remoteDebounce" type="number" value="250" /></label><label class="playground-toggle" for="playground-combo-box-remoteAutoLoad"><span><strong>remote Auto Load</strong><small>boolean</small></span><input id="playground-combo-box-remoteAutoLoad" name="pg_remoteAutoLoad" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-infinite"><span><strong>infinite</strong><small>boolean</small></span><input id="playground-combo-box-infinite" name="pg_infinite" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-combo-box-hasMore"><span><strong>has More</strong><small>boolean</small></span><input id="playground-combo-box-hasMore" name="pg_hasMore" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-combo-box-page"><span><strong>page</strong><small>number</small></span><input id="playground-combo-box-page" name="pg_page" type="number" value="1" /></label><label class="playground-field" for="playground-combo-box-loadMoreLabel"><span><strong>load More Label</strong><small>string</small></span><input id="playground-combo-box-loadMoreLabel" name="pg_loadMoreLabel" type="text" value="Load more" /></label><label class="playground-field" for="playground-combo-box-class"><span><strong>class</strong><small>string</small></span><input id="playground-combo-box-class" name="pg_class" type="text" value="" /></label></div>
         </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;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("search", (event) =&gt; &#123;
+  console.log("search", event.detail)
+&#125;)
+
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+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">
diff --git a/examples/component-showcase/app/pages/components/confetti.wrn b/examples/component-showcase/app/pages/components/confetti.wrn
index dc82511b..2b50bda1 100644
--- a/examples/component-showcase/app/pages/components/confetti.wrn
+++ b/examples/component-showcase/app/pages/components/confetti.wrn
@@ -5,7 +5,7 @@ page ConfettiDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Confetti example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default confetti for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"confetti-0-1\",\n    \"key\": \"confetti-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#confetti-demo\",\n    \"actionHref\": \"#confetti-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"confetti-0-2\",\n    \"key\": \"confetti-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#confetti-demo\",\n    \"actionHref\": \"#confetti-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"confetti-0-1\",\"key\":\"confetti-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#confetti-demo\",\"actionHref\":\"#confetti-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"confetti-0-2\",\"key\":\"confetti-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#confetti-demo\",\"actionHref\":\"#confetti-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -25,12 +25,12 @@ page ConfettiDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Confetti" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Confetti" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="start,complete">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Confetti</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="Confetti" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Confetti size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Confetti
@@ -147,6 +147,7 @@ page ConfettiDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -257,7 +258,7 @@ page ConfettiDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-confetti-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-confetti-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-confetti-class"><span><strong>class</strong><small>string</small></span><input id="playground-confetti-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-confetti-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-confetti-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-confetti-class"><span><strong>class</strong><small>string</small></span><input id="playground-confetti-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page ConfettiDetail {
         <div class="demo-workbench">
           <div id="confetti-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Confetti" size="default" title="Confetti example" description="A polished default confetti for a modern application." items="[{&quot;id&quot;:&quot;confetti-0-1&quot;,&quot;key&quot;:&quot;confetti-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#confetti-demo&quot;,&quot;actionHref&quot;:&quot;#confetti-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;confetti-0-2&quot;,&quot;key&quot;:&quot;confetti-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#confetti-demo&quot;,&quot;actionHref&quot;:&quot;#confetti-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Confetti size="default" title="Confetti example" description="A polished default confetti for a modern application." items='[{"id":"confetti-0-1","key":"confetti-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#confetti-demo","actionHref":"#confetti-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"confetti-0-2","key":"confetti-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#confetti-demo","actionHref":"#confetti-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -399,7 +401,8 @@ page ConfettiDetail {
         <div class="demo-workbench">
           <div id="confetti-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Confetti" size="sm" title="Compact Confetti" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;confetti-1-1&quot;,&quot;key&quot;:&quot;confetti-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#confetti-demo&quot;,&quot;actionHref&quot;:&quot;#confetti-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;confetti-1-2&quot;,&quot;key&quot;:&quot;confetti-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#confetti-demo&quot;,&quot;actionHref&quot;:&quot;#confetti-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Confetti size="sm" title="Compact Confetti" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"confetti-1-1","key":"confetti-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#confetti-demo","actionHref":"#confetti-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"confetti-1-2","key":"confetti-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#confetti-demo","actionHref":"#confetti-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="secondary" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -528,7 +531,8 @@ page ConfettiDetail {
         <div class="demo-workbench">
           <div id="confetti-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Confetti" size="lg" title="Advanced Confetti" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;confetti-2-1&quot;,&quot;key&quot;:&quot;confetti-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#confetti-demo&quot;,&quot;actionHref&quot;:&quot;#confetti-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;confetti-2-2&quot;,&quot;key&quot;:&quot;confetti-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#confetti-demo&quot;,&quot;actionHref&quot;:&quot;#confetti-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Confetti size="lg" title="Advanced Confetti" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"confetti-2-1","key":"confetti-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#confetti-demo","actionHref":"#confetti-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"confetti-2-2","key":"confetti-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#confetti-demo","actionHref":"#confetti-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' variant="success" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -649,11 +653,18 @@ page ConfettiDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@start</code><span>Fires when the component emits the start event.</span></div><div><code>@complete</code><span>Fires when the component's operation completes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@start</code><span>Fires when the component emits the start event.</span></div><div><code>@complete</code><span>Fires when the component emits the complete event.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;Confetti
+  @start='console.log(event.detail)'
+  @complete='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"Confetti\"], [data-component=\"Confetti\"]")
 
-component.addEventListener('start', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("start", (event) =&gt; &#123;
+  console.log("start", event.detail)
+&#125;)
+
+component?.addEventListener("complete", (event) =&gt; &#123;
+  console.log("complete", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Confetti"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
diff --git a/examples/component-showcase/app/pages/components/container.wrn b/examples/component-showcase/app/pages/components/container.wrn
index 713efe50..fdd4aabe 100644
--- a/examples/component-showcase/app/pages/components/container.wrn
+++ b/examples/component-showcase/app/pages/components/container.wrn
@@ -3,13 +3,13 @@ page ContainerDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "2"
+  state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "2")
   state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md"
   state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Container"
-    description = "Theme-aware, responsive container component."
+    description = "Constrain and align page content with responsive gutters and compact, wide, or full width options."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -19,28 +19,29 @@ page ContainerDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Layout component</span>
         <h1>Container</h1>
-        <p>Theme-aware, responsive container component.</p>
+        <p>Constrain and align page content with responsive gutters and compact, wide, or full width options.</p>
         <div class="detail-badges"><span>6 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Container" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Container" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Container</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="Container" size="{playground_size}" color="{playground_color}" columns="{playground_columns}" gap="{playground_gap}" maxWidth="{playground_maxWidth}" class="{playground_class}"><div class="showcase-slot"><span class="icon-[lucide--layers-3] size-4" aria-hidden="true"></span><span>Composable content area.</span></div></div></div>
+          <div class="playground-preview-source" data-playground-preview><Container size='{playground_size}' color='{playground_color}' columns='{playground_columns}' gap='{playground_gap}' maxWidth='{playground_maxWidth}' class='{playground_class}'><div class="showcase-content-block">Centered container content</div></Container></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Container&gt;
-  &lt;!-- Add default slot content here --&gt;
+  &lt;div class="showcase-slot"&gt;&lt;span class="icon-[lucide--layers-3] size-4" aria-hidden="true"&gt;&lt;/span&gt;&lt;span&gt;Composable content area.&lt;/span&gt;&lt;/div&gt;
 &lt;/Container&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-container-size"><span><strong>size</strong><small>string</small></span><select id="playground-container-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option><option value="compact">compact</option><option value="comfortable">comfortable</option><option value="spacious">spacious</option></select></label><label class="playground-field" for="playground-container-color"><span><strong>color</strong><small>string</small></span><select id="playground-container-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-container-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-container-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-container-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-container-gap" name="pg_gap"><option value="md" selected>md</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option></select></label><label class="playground-field" for="playground-container-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-container-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="md">md</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-field" for="playground-container-class"><span><strong>class</strong><small>string</small></span><input id="playground-container-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-container-size"><span><strong>size</strong><small>string</small></span><select id="playground-container-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="spacious">spacious</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-container-color"><span><strong>color</strong><small>string</small></span><select id="playground-container-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-container-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-container-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-container-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-container-gap" name="pg_gap"><option value="md" selected>md</option><option value="none">none</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-container-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-container-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-field" for="playground-container-class"><span><strong>class</strong><small>string</small></span><input id="playground-container-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -49,65 +50,70 @@ page ContainerDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Standard content container</h2><p>Keep page content aligned to a predictable readable width.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="container-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Container" size="default" columns="2" class="showcase-instance showcase-instance--1"><div class="showcase-slot"><span class="icon-[lucide--layers-3] size-4" aria-hidden="true"></span><span>Composable content area.</span></div></div></div>
+            
+            <div class="demo-render"><Container size="default" columns="2" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Centered container content</div></Container></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Standard content container usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Container&gt;
-  &lt;!-- Add default slot content here --&gt;
+  &lt;div class="showcase-content-block"&gt;Centered container content&lt;/div&gt;
 &lt;/Container&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
+          <div><span class="demo-case-eyebrow">Compact</span><h2>Compact reading container</h2><p>Use a smaller maximum width for forms, legal copy, and focused content.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="container-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Container" size="sm" columns="2" class="showcase-instance showcase-instance--2"><div class="showcase-slot"><span class="icon-[lucide--layers-3] size-4" aria-hidden="true"></span><span>Composable content area.</span></div></div></div>
+            
+            <div class="demo-render"><Container size="compact" columns="2" maxWidth="compact" class="showcase-instance showcase-instance--2"><div class="showcase-content-block">Compact readable content</div></Container></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Compact reading container usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Container
-  size="sm"&gt;
-  &lt;!-- Add default slot content here --&gt;
+  size="compact"
+  maxWidth="compact"&gt;
+  &lt;div class="showcase-content-block"&gt;Compact readable content&lt;/div&gt;
 &lt;/Container&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Full-width layout container</h2><p>Allow dashboards and data-heavy pages to use the available width.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="container-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Container" size="lg" columns="2" class="showcase-instance showcase-instance--3"><div class="showcase-slot"><span class="icon-[lucide--layers-3] size-4" aria-hidden="true"></span><span>Rich supporting content with additional context.</span></div></div></div>
+            
+            <div class="demo-render"><Container size="spacious" columns="2" maxWidth="full" class="showcase-instance showcase-instance--3"><div class="showcase-content-block">Full-width dashboard content</div></Container></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Full-width layout container usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Container
-  size="lg"&gt;
-  &lt;!-- Add default slot content here --&gt;
+  size="spacious"
+  maxWidth="full"&gt;
+  &lt;div class="showcase-content-block"&gt;Full-width dashboard content&lt;/div&gt;
 &lt;/Container&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
+        
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#container-demo-1">Production default</a><a href="#container-demo-2">Compact application</a><a href="#container-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#container-demo-1">Standard content container</a><a href="#container-demo-2">Compact reading container</a><a href="#container-demo-3">Full-width layout container</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/context-menu.wrn b/examples/component-showcase/app/pages/components/context-menu.wrn
index b75050de..8568b11e 100644
--- a/examples/component-showcase/app/pages/components/context-menu.wrn
+++ b/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_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom"
-  state playground_closeLabel = ctx.url.searchParams.get("pg_closeLabel") ?? "Context Menu"
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Context Menu"
+  state playground_closeOnSelect = (ctx.url.searchParams.get("pg_closeOnSelect") ?? "true") === "true"
+  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>
-        <div class="detail-badges"><span>8 props</span><span>1 slots</span><span>3 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <p>Open an accessible keyboard-aware action menu from pointer or keyboard context interactions.</p>
+        <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"
-  closeLabel="Context Menu"
-/&gt;</code></pre>
+  label="Context Menu"&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/ContextMenu&gt;</code></pre>
           </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-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>
+          <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-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></label><label class="playground-toggle" for="playground-context-menu-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-context-menu-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-context-menu-minWidth"><span><strong>min Width</strong><small>string</small></span><input id="playground-context-menu-minWidth" name="pg_minWidth" type="text" value="14rem" /></label><label class="playground-field" for="playground-context-menu-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-context-menu-maxWidth" name="pg_maxWidth"><option value="20rem" selected>20rem</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><option value="full">full</option></select></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>
         </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"
-  description="A polished default context menu for a modern application."
-  open="true"
-  closeLabel="Context Menu"
-/&gt;</code></pre>
+  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;
+  ]'
+  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"
-  closeLabel="Compact example"
-/&gt;</code></pre>
+  label="Compact example"
+  minWidth="12rem"&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;button type="button" class="showcase-action"&gt;Open quick actions&lt;/button&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/ContextMenu&gt;</code></pre>
           </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"
-  closeLabel="Advanced example"
-/&gt;</code></pre>
+  label="Advanced example"&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;button type="button" class="showcase-action"&gt;Click, press Enter, or right-click&lt;/button&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="header"&gt;
+    &lt;div class="showcase-slot"&gt;header slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/ContextMenu&gt;</code></pre>
           </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;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>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("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>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">
diff --git a/examples/component-showcase/app/pages/components/copy-markup.wrn b/examples/component-showcase/app/pages/components/copy-markup.wrn
index db946d42..f2e6d121 100644
--- a/examples/component-showcase/app/pages/components/copy-markup.wrn
+++ b/examples/component-showcase/app/pages/components/copy-markup.wrn
@@ -11,8 +11,8 @@ page CopyMarkupDetail {
   state playground_min = ctx.url.searchParams.get("pg_min") ?? ""
   state playground_max = ctx.url.searchParams.get("pg_max") ?? ""
   state playground_step = ctx.url.searchParams.get("pg_step") ?? ""
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Copy Markup"
@@ -31,12 +31,12 @@ page CopyMarkupDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="CopyMarkup" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="CopyMarkup" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="copy,success,error">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Copy Markup</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="CopyMarkup" size="{playground_size}" color="{playground_color}" label="{playground_label}" name="{playground_name}" value="{playground_value}" placeholder="{playground_placeholder}" type="{playground_type}" min="{playground_min}" max="{playground_max}" step="{playground_step}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><CopyMarkup size='{playground_size}' color='{playground_color}' label='{playground_label}' name='{playground_name}' value='{playground_value}' placeholder='{playground_placeholder}' type='{playground_type}' min='{playground_min}' max='{playground_max}' step='{playground_step}' disabled='{playground_disabled}' required='{playground_required}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;CopyMarkup
@@ -45,6 +45,7 @@ page CopyMarkupDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -63,7 +64,8 @@ page CopyMarkupDetail {
         <div class="demo-workbench">
           <div id="copy-markup-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="CopyMarkup" size="default" label="Copy Markup" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><CopyMarkup size="default" label="Copy Markup" value="sample-1" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -82,7 +84,8 @@ page CopyMarkupDetail {
         <div class="demo-workbench">
           <div id="copy-markup-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="CopyMarkup" size="sm" label="Compact example" value="sample-2" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><CopyMarkup size="sm" label="Compact example" value="sample-2" placeholder="Enter a sample value" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -103,7 +106,8 @@ page CopyMarkupDetail {
         <div class="demo-workbench">
           <div id="copy-markup-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="CopyMarkup" size="lg" label="Advanced example" value="sample-3" placeholder="Search by name, email, or identifier" disabled="false" required="false" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><CopyMarkup size="lg" label="Advanced example" value="sample-3" placeholder="Search by name, email, or identifier" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -116,11 +120,23 @@ page CopyMarkupDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@copy</code><span>Fires when the component emits the copy event.</span></div><div><code>@success</code><span>Fires when the component operation succeeds.</span></div><div><code>@error</code><span>Fires when the component encounters an error.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@copy</code><span>Fires when the component emits the copy event.</span></div><div><code>@success</code><span>Fires when the component emits the success event.</span></div><div><code>@error</code><span>Fires when the component cannot complete an operation.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;CopyMarkup
+  @copy='console.log(event.detail)'
+  @success='console.log(event.detail)'
+  @error='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"CopyMarkup\"], [data-component=\"CopyMarkup\"]")
 
-component.addEventListener('copy', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("copy", (event) =&gt; &#123;
+  console.log("copy", event.detail)
+&#125;)
+
+component?.addEventListener("success", (event) =&gt; &#123;
+  console.log("success", event.detail)
+&#125;)
+
+component?.addEventListener("error", (event) =&gt; &#123;
+  console.log("error", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Copy Markup"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"text"</code></td><td>No</td></tr><tr><td><code>min</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>max</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>step</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
diff --git a/examples/component-showcase/app/pages/components/ctasection.wrn b/examples/component-showcase/app/pages/components/ctasection.wrn
index 3c91319f..e944f3b3 100644
--- a/examples/component-showcase/app/pages/components/ctasection.wrn
+++ b/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>
-        <div class="detail-badges"><span>17 props</span><span>4 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <p>Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.</p>
+        <div class="detail-badges"><span>25 props</span><span>4 slots</span><span>0 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;
-  &lt;!-- Add default, actions, visual, footer slot content here --&gt;
+  secondaryHref="#ctasection-demo"
+  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>
-          <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></span><input id="playground-ctasection-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <header><div><span>Component props</span><strong>25 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-ctasection-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-ctasection-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-title"><span><strong>title</strong><small>string</small></span><input id="playground-ctasection-title" name="pg_title" type="text" value="CTASection example" /></label><label class="playground-field" for="playground-ctasection-description"><span><strong>description</strong><small>string</small></span><input id="playground-ctasection-description" name="pg_description" type="text" value="A polished default ctasection for a modern application." /></label><label class="playground-field" for="playground-ctasection-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-ctasection-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-align"><span><strong>align</strong><small>string</small></span><select id="playground-ctasection-align" name="pg_align"><option value="start" selected>start</option><option value="center">center</option><option value="left">left</option><option value="right">right</option><option value="split">split</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-ctasection-size"><span><strong>size</strong><small>string</small></span><select id="playground-ctasection-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="large">large</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-ctasection-color"><span><strong>color</strong><small>string</small></span><select id="playground-ctasection-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-ctasection-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-ctasection-variant" name="pg_variant"><option value="solid" selected>solid</option><option value="default">default</option><option value="soft">soft</option><option value="outline">outline</option><option value="gradient">gradient</option><option value="minimal">minimal</option></select></label><label class="playground-field" for="playground-ctasection-primaryLabel"><span><strong>primary Label</strong><small>string</small></span><input id="playground-ctasection-primaryLabel" name="pg_primaryLabel" type="text" value="CTASection" /></label><label class="playground-field" for="playground-ctasection-primaryHref"><span><strong>primary Href</strong><small>string</small></span><input id="playground-ctasection-primaryHref" name="pg_primaryHref" type="text" value="#ctasection-demo" /></label><label class="playground-field" for="playground-ctasection-primaryIcon"><span><strong>primary Icon</strong><small>string</small></span><input id="playground-ctasection-primaryIcon" name="pg_primaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-secondaryLabel"><span><strong>secondary Label</strong><small>string</small></span><input id="playground-ctasection-secondaryLabel" name="pg_secondaryLabel" type="text" value="CTASection" /></label><label class="playground-field" for="playground-ctasection-secondaryHref"><span><strong>secondary Href</strong><small>string</small></span><input id="playground-ctasection-secondaryHref" name="pg_secondaryHref" type="text" value="#ctasection-demo" /></label><label class="playground-field" for="playground-ctasection-secondaryIcon"><span><strong>secondary Icon</strong><small>string</small></span><input id="playground-ctasection-secondaryIcon" name="pg_secondaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-backgroundImage"><span><strong>background Image</strong><small>string</small></span><input id="playground-ctasection-backgroundImage" name="pg_backgroundImage" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-visualImage"><span><strong>visual Image</strong><small>string</small></span><input id="playground-ctasection-visualImage" name="pg_visualImage" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-visualAlt"><span><strong>visual Alt</strong><small>string</small></span><input id="playground-ctasection-visualAlt" name="pg_visualAlt" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-visualIcon"><span><strong>visual Icon</strong><small>string</small></span><input id="playground-ctasection-visualIcon" name="pg_visualIcon" type="text" value="" /></label><label class="playground-field" for="playground-ctasection-visualTitle"><span><strong>visual Title</strong><small>string</small></span><input id="playground-ctasection-visualTitle" name="pg_visualTitle" type="text" value="CTASection example" /></label><label class="playground-field" for="playground-ctasection-visualDescription"><span><strong>visual Description</strong><small>string</small></span><input id="playground-ctasection-visualDescription" name="pg_visualDescription" type="text" value="A polished default ctasection for a modern application." /></label><label class="playground-field" for="playground-ctasection-visualItems"><span><strong>visual Items</strong><small>string</small></span><textarea id="playground-ctasection-visualItems" name="pg_visualItems" rows="5" spellcheck="false" data-playground-json>[
+  {
+    "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"
-  description="A polished default ctasection for a modern application."
-  align="start"
-  primaryLabel="CTASection"
-  primaryHref="#ctasection-demo"
-  secondaryLabel="CTASection"
-  secondaryHref="#ctasection-demo"&gt;
-  &lt;!-- Add default, actions, visual, footer slot content here --&gt;
+  eyebrow="Ready to continue"
+  title="Build public pages with reusable components"
+  description="Keep application pages focused on content and business data while the shared UI package owns presentation."
+  icon="icon-[lucide--rocket]"
+  align="split"
+  variant="gradient"
+  primaryLabel="Use these components"
+  primaryHref="#components"
+  primaryIcon="icon-[lucide--blocks]"
+  secondaryLabel="Back to home"
+  secondaryHref="/"
+  secondaryIcon="icon-[lucide--house]"
+  visualTitle="CTASection example"
+  visualDescription="A polished default ctasection for a modern application."
+  visualItems='[
+    &#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"
-  description="A compact configuration for dashboards and dense product surfaces."
+  eyebrow="Get started"
+  title="Create your first WRNexusJS page"
+  description="Install the framework and compose your application with the component system."
   icon="icon-[lucide--arrow-right]"
   size="sm"
-  variant="secondary"
-  primaryLabel="Compact example"
-  primaryHref="#ctasection-demo"
-  secondaryLabel="Compact example"
-  secondaryHref="#ctasection-demo"&gt;
-  &lt;!-- Add default, actions, visual, footer slot content here --&gt;
+  primaryLabel="Read installation"
+  primaryHref="/installation"
+  secondaryLabel="Browse examples"
+  secondaryHref="/blocks"
+  visualTitle="Compact CTASection"
+  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"
-  description="A richer configuration demonstrating additional content and hierarchy."
+  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="end"
+  align="left"
   size="lg"
-  variant="success"
-  primaryLabel="Advanced example"
-  primaryHref="#ctasection-demo"
-  secondaryLabel="Advanced example"
-  secondaryHref="#ctasection-demo"&gt;
-  &lt;!-- Add default, actions, visual, footer slot content here --&gt;
+  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='[
+    &#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">
diff --git a/examples/component-showcase/app/pages/components/custom-scrollbar.wrn b/examples/component-showcase/app/pages/components/custom-scrollbar.wrn
index 45fec3dd..16c5a4e4 100644
--- a/examples/component-showcase/app/pages/components/custom-scrollbar.wrn
+++ b/examples/component-showcase/app/pages/components/custom-scrollbar.wrn
@@ -3,7 +3,7 @@ page CustomScrollbarDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "2"
+  state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "2")
   state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md"
   state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
@@ -24,21 +24,22 @@ page CustomScrollbarDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="CustomScrollbar" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="CustomScrollbar" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="scroll">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Custom Scrollbar</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="CustomScrollbar" size="{playground_size}" color="{playground_color}" columns="{playground_columns}" gap="{playground_gap}" maxWidth="{playground_maxWidth}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><CustomScrollbar size='{playground_size}' color='{playground_color}' columns='{playground_columns}' gap='{playground_gap}' maxWidth='{playground_maxWidth}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;CustomScrollbar /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-custom-scrollbar-size"><span><strong>size</strong><small>string</small></span><select id="playground-custom-scrollbar-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-custom-scrollbar-color"><span><strong>color</strong><small>string</small></span><select id="playground-custom-scrollbar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-custom-scrollbar-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-custom-scrollbar-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-custom-scrollbar-gap"><span><strong>gap</strong><small>string</small></span><input id="playground-custom-scrollbar-gap" name="pg_gap" type="text" value="md" /></label><label class="playground-field" for="playground-custom-scrollbar-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-custom-scrollbar-maxWidth" name="pg_maxWidth" type="text" value="xl" /></label><label class="playground-field" for="playground-custom-scrollbar-class"><span><strong>class</strong><small>string</small></span><input id="playground-custom-scrollbar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-custom-scrollbar-size"><span><strong>size</strong><small>string</small></span><select id="playground-custom-scrollbar-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-custom-scrollbar-color"><span><strong>color</strong><small>string</small></span><select id="playground-custom-scrollbar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-custom-scrollbar-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-custom-scrollbar-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-custom-scrollbar-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-custom-scrollbar-gap" name="pg_gap"><option value="md" selected>md</option><option value="none">none</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-custom-scrollbar-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-custom-scrollbar-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-field" for="playground-custom-scrollbar-class"><span><strong>class</strong><small>string</small></span><input id="playground-custom-scrollbar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -53,7 +54,8 @@ page CustomScrollbarDetail {
         <div class="demo-workbench">
           <div id="custom-scrollbar-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="CustomScrollbar" size="default" columns="2" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><CustomScrollbar size="default" columns="2" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -69,7 +71,8 @@ page CustomScrollbarDetail {
         <div class="demo-workbench">
           <div id="custom-scrollbar-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="CustomScrollbar" size="sm" columns="2" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><CustomScrollbar size="sm" columns="2" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -87,7 +90,8 @@ page CustomScrollbarDetail {
         <div class="demo-workbench">
           <div id="custom-scrollbar-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="CustomScrollbar" size="lg" columns="2" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><CustomScrollbar size="lg" columns="2" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -97,11 +101,13 @@ page CustomScrollbarDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@scroll</code><span>Fires when the component emits the scroll event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@scroll</code><span>Fires when the component emits the scroll event.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;CustomScrollbar
+  @scroll='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"CustomScrollbar\"], [data-component=\"CustomScrollbar\"]")
 
-component.addEventListener('scroll', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("scroll", (event) =&gt; &#123;
+  console.log("scroll", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
diff --git a/examples/component-showcase/app/pages/components/data-map.wrn b/examples/component-showcase/app/pages/components/data-map.wrn
index c35d5911..eec7156b 100644
--- a/examples/component-showcase/app/pages/components/data-map.wrn
+++ b/examples/component-showcase/app/pages/components/data-map.wrn
@@ -5,7 +5,7 @@ page DataMapDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Data Map example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default data map for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"data-map-0-1\",\n    \"key\": \"data-map-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#data-map-demo\",\n    \"actionHref\": \"#data-map-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"data-map-0-2\",\n    \"key\": \"data-map-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#data-map-demo\",\n    \"actionHref\": \"#data-map-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"data-map-0-1\",\"key\":\"data-map-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#data-map-demo\",\"actionHref\":\"#data-map-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"data-map-0-2\",\"key\":\"data-map-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#data-map-demo\",\"actionHref\":\"#data-map-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -25,12 +25,12 @@ page DataMapDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="DataMap" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="DataMap" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="select,change">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Data Map</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="DataMap" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><DataMap size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;DataMap
@@ -147,6 +147,7 @@ page DataMapDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -257,7 +258,7 @@ page DataMapDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-data-map-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-data-map-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-data-map-class"><span><strong>class</strong><small>string</small></span><input id="playground-data-map-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-data-map-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-data-map-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-data-map-class"><span><strong>class</strong><small>string</small></span><input id="playground-data-map-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page DataMapDetail {
         <div class="demo-workbench">
           <div id="data-map-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="DataMap" size="default" title="Data Map example" description="A polished default data map for a modern application." items="[{&quot;id&quot;:&quot;data-map-0-1&quot;,&quot;key&quot;:&quot;data-map-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#data-map-demo&quot;,&quot;actionHref&quot;:&quot;#data-map-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;data-map-0-2&quot;,&quot;key&quot;:&quot;data-map-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#data-map-demo&quot;,&quot;actionHref&quot;:&quot;#data-map-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><DataMap size="default" title="Data Map example" description="A polished default data map for a modern application." items='[{"id":"data-map-0-1","key":"data-map-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#data-map-demo","actionHref":"#data-map-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"data-map-0-2","key":"data-map-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#data-map-demo","actionHref":"#data-map-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -399,7 +401,8 @@ page DataMapDetail {
         <div class="demo-workbench">
           <div id="data-map-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="DataMap" size="sm" title="Compact Data Map" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;data-map-1-1&quot;,&quot;key&quot;:&quot;data-map-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#data-map-demo&quot;,&quot;actionHref&quot;:&quot;#data-map-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;data-map-1-2&quot;,&quot;key&quot;:&quot;data-map-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#data-map-demo&quot;,&quot;actionHref&quot;:&quot;#data-map-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><DataMap size="sm" title="Compact Data Map" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"data-map-1-1","key":"data-map-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#data-map-demo","actionHref":"#data-map-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"data-map-1-2","key":"data-map-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#data-map-demo","actionHref":"#data-map-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="secondary" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -528,7 +531,8 @@ page DataMapDetail {
         <div class="demo-workbench">
           <div id="data-map-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="DataMap" size="lg" title="Advanced Data Map" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;data-map-2-1&quot;,&quot;key&quot;:&quot;data-map-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#data-map-demo&quot;,&quot;actionHref&quot;:&quot;#data-map-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;data-map-2-2&quot;,&quot;key&quot;:&quot;data-map-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#data-map-demo&quot;,&quot;actionHref&quot;:&quot;#data-map-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><DataMap size="lg" title="Advanced Data Map" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"data-map-2-1","key":"data-map-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#data-map-demo","actionHref":"#data-map-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"data-map-2-2","key":"data-map-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#data-map-demo","actionHref":"#data-map-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' variant="success" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -649,11 +653,18 @@ page DataMapDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;DataMap
+  @select='console.log(event.detail)'
+  @change='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"DataMap\"], [data-component=\"DataMap\"]")
 
-component.addEventListener('select', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Data Map"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
diff --git a/examples/component-showcase/app/pages/components/data-table.wrn b/examples/component-showcase/app/pages/components/data-table.wrn
index f3548937..5a741ef2 100644
--- a/examples/component-showcase/app/pages/components/data-table.wrn
+++ b/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_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_striped = ctx.url.searchParams.get("pg_striped") ?? "true"
+  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 = 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") === "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 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;]}]" striped="true" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <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;,&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;]}]" striped="true" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <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;:&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;]}]" striped="true" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <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;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("sort", (event) =&gt; &#123;
+  console.log("sort", event.detail)
+&#125;)
+
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+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">
diff --git a/examples/component-showcase/app/pages/components/date-picker.wrn b/examples/component-showcase/app/pages/components/date-picker.wrn
index c313c010..762eb831 100644
--- a/examples/component-showcase/app/pages/components/date-picker.wrn
+++ b/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_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
+  state playground_inline = (ctx.url.searchParams.get("pg_inline") ?? "false") === "true"
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  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">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-date-picker-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-date-picker-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-date-picker-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-date-picker-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-date-picker-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-date-picker-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-date-picker-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-date-picker-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-date-picker-class"><span><strong>class</strong><small>string</small></span><input id="playground-date-picker-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <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" for="playground-date-picker-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-date-picker-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-date-picker-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-date-picker-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-date-picker-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-date-picker-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-date-picker-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-date-picker-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-date-picker-class"><span><strong>class</strong><small>string</small></span><input id="playground-date-picker-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -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;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("open", (event) =&gt; &#123;
+  console.log("open", event.detail)
+&#125;)
+
+component?.addEventListener("close", (event) =&gt; &#123;
+  console.log("close", event.detail)
+&#125;)
+
+component?.addEventListener("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">
diff --git a/examples/component-showcase/app/pages/components/device-frame.wrn b/examples/component-showcase/app/pages/components/device-frame.wrn
index d3b1ab67..a0975d78 100644
--- a/examples/component-showcase/app/pages/components/device-frame.wrn
+++ b/examples/component-showcase/app/pages/components/device-frame.wrn
@@ -5,14 +5,14 @@ page DeviceFrameDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Device Frame example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default device frame for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"device-frame-0-1\",\n    \"key\": \"device-frame-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#device-frame-demo\",\n    \"actionHref\": \"#device-frame-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"device-frame-0-2\",\n    \"key\": \"device-frame-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#device-frame-demo\",\n    \"actionHref\": \"#device-frame-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"device-frame-0-1\",\"key\":\"device-frame-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#device-frame-demo\",\"actionHref\":\"#device-frame-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"device-frame-0-2\",\"key\":\"device-frame-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#device-frame-demo\",\"actionHref\":\"#device-frame-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_device = ctx.url.searchParams.get("pg_device") ?? "phone"
   state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "portrait"
   state playground_src = ctx.url.searchParams.get("pg_src") ?? ""
   state playground_srcdoc = ctx.url.searchParams.get("pg_srcdoc") ?? ""
   state playground_frameTitle = ctx.url.searchParams.get("pg_frameTitle") ?? "Device Frame example"
-  state playground_showToolbar = ctx.url.searchParams.get("pg_showToolbar") ?? "true"
+  state playground_showToolbar = (ctx.url.searchParams.get("pg_showToolbar") ?? "true") === "true"
   state playground_allow = ctx.url.searchParams.get("pg_allow") ?? ""
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -32,12 +32,12 @@ page DeviceFrameDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="DeviceFrame" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="DeviceFrame" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="change,rotate">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Device Frame</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="DeviceFrame" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" device="{playground_device}" orientation="{playground_orientation}" src="{playground_src}" srcdoc="{playground_srcdoc}" frameTitle="{playground_frameTitle}" showToolbar="{playground_showToolbar}" allow="{playground_allow}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><DeviceFrame size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' device='{playground_device}' orientation='{playground_orientation}' src='{playground_src}' srcdoc='{playground_srcdoc}' frameTitle='{playground_frameTitle}' showToolbar='{playground_showToolbar}' allow='{playground_allow}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;DeviceFrame
@@ -155,6 +155,7 @@ page DeviceFrameDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>14 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -265,7 +266,7 @@ page DeviceFrameDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-device-frame-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-device-frame-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-device-frame-device"><span><strong>device</strong><small>string</small></span><input id="playground-device-frame-device" name="pg_device" type="text" value="phone" /></label><label class="playground-field" for="playground-device-frame-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-device-frame-orientation" name="pg_orientation"><option value="portrait" selected>portrait</option><option value="horizontal">horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-device-frame-src"><span><strong>src</strong><small>string</small></span><input id="playground-device-frame-src" name="pg_src" type="text" value="" /></label><label class="playground-field" for="playground-device-frame-srcdoc"><span><strong>srcdoc</strong><small>string</small></span><input id="playground-device-frame-srcdoc" name="pg_srcdoc" type="text" value="" /></label><label class="playground-field" for="playground-device-frame-frameTitle"><span><strong>frame Title</strong><small>string</small></span><input id="playground-device-frame-frameTitle" name="pg_frameTitle" type="text" value="Device Frame example" /></label><label class="playground-toggle" for="playground-device-frame-showToolbar"><span><strong>show Toolbar</strong><small>boolean</small></span><input id="playground-device-frame-showToolbar" name="pg_showToolbar" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-device-frame-allow"><span><strong>allow</strong><small>string</small></span><input id="playground-device-frame-allow" name="pg_allow" type="text" value="" /></label><label class="playground-field" for="playground-device-frame-class"><span><strong>class</strong><small>string</small></span><input id="playground-device-frame-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-device-frame-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-device-frame-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-device-frame-device"><span><strong>device</strong><small>string</small></span><input id="playground-device-frame-device" name="pg_device" type="text" value="phone" /></label><label class="playground-field" for="playground-device-frame-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-device-frame-orientation" name="pg_orientation"><option value="portrait" selected>portrait</option><option value="horizontal">horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-device-frame-src"><span><strong>src</strong><small>string</small></span><input id="playground-device-frame-src" name="pg_src" type="text" value="" /></label><label class="playground-field" for="playground-device-frame-srcdoc"><span><strong>srcdoc</strong><small>string</small></span><input id="playground-device-frame-srcdoc" name="pg_srcdoc" type="text" value="" /></label><label class="playground-field" for="playground-device-frame-frameTitle"><span><strong>frame Title</strong><small>string</small></span><input id="playground-device-frame-frameTitle" name="pg_frameTitle" type="text" value="Device Frame example" /></label><label class="playground-toggle" for="playground-device-frame-showToolbar"><span><strong>show Toolbar</strong><small>boolean</small></span><input id="playground-device-frame-showToolbar" name="pg_showToolbar" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-device-frame-allow"><span><strong>allow</strong><small>string</small></span><input id="playground-device-frame-allow" name="pg_allow" type="text" value="" /></label><label class="playground-field" for="playground-device-frame-class"><span><strong>class</strong><small>string</small></span><input id="playground-device-frame-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -280,7 +281,8 @@ page DeviceFrameDetail {
         <div class="demo-workbench">
           <div id="device-frame-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="DeviceFrame" size="default" title="Device Frame example" description="A polished default device frame for a modern application." items="[{&quot;id&quot;:&quot;device-frame-0-1&quot;,&quot;key&quot;:&quot;device-frame-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#device-frame-demo&quot;,&quot;actionHref&quot;:&quot;#device-frame-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;device-frame-0-2&quot;,&quot;key&quot;:&quot;device-frame-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#device-frame-demo&quot;,&quot;actionHref&quot;:&quot;#device-frame-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" frameTitle="Device Frame example" showToolbar="true" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><DeviceFrame size="default" title="Device Frame example" description="A polished default device frame for a modern application." items='[{"id":"device-frame-0-1","key":"device-frame-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"device-frame-0-2","key":"device-frame-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" frameTitle="Device Frame example" showToolbar="true" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -408,7 +410,8 @@ page DeviceFrameDetail {
         <div class="demo-workbench">
           <div id="device-frame-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="DeviceFrame" size="sm" title="Compact Device Frame" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;device-frame-1-1&quot;,&quot;key&quot;:&quot;device-frame-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#device-frame-demo&quot;,&quot;actionHref&quot;:&quot;#device-frame-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;device-frame-1-2&quot;,&quot;key&quot;:&quot;device-frame-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#device-frame-demo&quot;,&quot;actionHref&quot;:&quot;#device-frame-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" frameTitle="Compact Device Frame" showToolbar="true" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><DeviceFrame size="sm" title="Compact Device Frame" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"device-frame-1-1","key":"device-frame-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"device-frame-1-2","key":"device-frame-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="secondary" frameTitle="Compact Device Frame" showToolbar="true" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -538,7 +541,8 @@ page DeviceFrameDetail {
         <div class="demo-workbench">
           <div id="device-frame-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="DeviceFrame" size="lg" title="Advanced Device Frame" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;device-frame-2-1&quot;,&quot;key&quot;:&quot;device-frame-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#device-frame-demo&quot;,&quot;actionHref&quot;:&quot;#device-frame-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;device-frame-2-2&quot;,&quot;key&quot;:&quot;device-frame-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#device-frame-demo&quot;,&quot;actionHref&quot;:&quot;#device-frame-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" frameTitle="Advanced Device Frame" showToolbar="true" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><DeviceFrame size="lg" title="Advanced Device Frame" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"device-frame-2-1","key":"device-frame-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"device-frame-2-2","key":"device-frame-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#device-frame-demo","actionHref":"#device-frame-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' variant="success" frameTitle="Advanced Device Frame" showToolbar="true" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -660,11 +664,18 @@ page DeviceFrameDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@rotate</code><span>Fires when the component emits the rotate event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div><div><code>@rotate</code><span>Fires when the component emits the rotate event.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;DeviceFrame
+  @change='console.log(event.detail)'
+  @rotate='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"DeviceFrame\"], [data-component=\"DeviceFrame\"]")
 
-component.addEventListener('change', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("rotate", (event) =&gt; &#123;
+  console.log("rotate", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Device Frame"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>device</code></td><td>string</td><td><code>"phone"</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"portrait"</code></td><td>No</td></tr><tr><td><code>src</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>srcdoc</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>frameTitle</code></td><td>string</td><td><code>"Device preview"</code></td><td>No</td></tr><tr><td><code>showToolbar</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>allow</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
diff --git a/examples/component-showcase/app/pages/components/divider.wrn b/examples/component-showcase/app/pages/components/divider.wrn
index 3c6f51f9..a6c6e5de 100644
--- a/examples/component-showcase/app/pages/components/divider.wrn
+++ b/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">
diff --git a/examples/component-showcase/app/pages/components/drag-and-drop.wrn b/examples/component-showcase/app/pages/components/drag-and-drop.wrn
index 837f389e..3047f811 100644
--- a/examples/component-showcase/app/pages/components/drag-and-drop.wrn
+++ b/examples/component-showcase/app/pages/components/drag-and-drop.wrn
@@ -5,7 +5,7 @@ page DragAndDropDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Drag And Drop example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default drag and drop for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"drag-and-drop-0-1\",\n    \"key\": \"drag-and-drop-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#drag-and-drop-demo\",\n    \"actionHref\": \"#drag-and-drop-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"drag-and-drop-0-2\",\n    \"key\": \"drag-and-drop-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#drag-and-drop-demo\",\n    \"actionHref\": \"#drag-and-drop-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"drag-and-drop-0-1\",\"key\":\"drag-and-drop-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#drag-and-drop-demo\",\"actionHref\":\"#drag-and-drop-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"drag-and-drop-0-2\",\"key\":\"drag-and-drop-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#drag-and-drop-demo\",\"actionHref\":\"#drag-and-drop-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -25,12 +25,12 @@ page DragAndDropDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="DragAndDrop" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="DragAndDrop" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="dragStart,dragEnd,dragEnter,dragLeave,drop,change">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Drag And Drop</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="DragAndDrop" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><DragAndDrop size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;DragAndDrop
@@ -147,6 +147,7 @@ page DragAndDropDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -257,7 +258,7 @@ page DragAndDropDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-drag-and-drop-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-drag-and-drop-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-drag-and-drop-class"><span><strong>class</strong><small>string</small></span><input id="playground-drag-and-drop-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-drag-and-drop-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-drag-and-drop-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-drag-and-drop-class"><span><strong>class</strong><small>string</small></span><input id="playground-drag-and-drop-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page DragAndDropDetail {
         <div class="demo-workbench">
           <div id="drag-and-drop-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="DragAndDrop" size="default" title="Drag And Drop example" description="A polished default drag and drop for a modern application." items="[{&quot;id&quot;:&quot;drag-and-drop-0-1&quot;,&quot;key&quot;:&quot;drag-and-drop-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#drag-and-drop-demo&quot;,&quot;actionHref&quot;:&quot;#drag-and-drop-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;drag-and-drop-0-2&quot;,&quot;key&quot;:&quot;drag-and-drop-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#drag-and-drop-demo&quot;,&quot;actionHref&quot;:&quot;#drag-and-drop-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><DragAndDrop size="default" title="Drag And Drop example" description="A polished default drag and drop for a modern application." items='[{"id":"drag-and-drop-0-1","key":"drag-and-drop-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#drag-and-drop-demo","actionHref":"#drag-and-drop-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"drag-and-drop-0-2","key":"drag-and-drop-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#drag-and-drop-demo","actionHref":"#drag-and-drop-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -399,7 +401,8 @@ page DragAndDropDetail {
         <div class="demo-workbench">
           <div id="drag-and-drop-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="DragAndDrop" size="sm" title="Compact Drag And Drop" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;drag-and-drop-1-1&quot;,&quot;key&quot;:&quot;drag-and-drop-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#drag-and-drop-demo&quot;,&quot;actionHref&quot;:&quot;#drag-and-drop-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;drag-and-drop-1-2&quot;,&quot;key&quot;:&quot;drag-and-drop-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#drag-and-drop-demo&quot;,&quot;actionHref&quot;:&quot;#drag-and-drop-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><DragAndDrop size="sm" title="Compact Drag And Drop" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"drag-and-drop-1-1","key":"drag-and-drop-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#drag-and-drop-demo","actionHref":"#drag-and-drop-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"drag-and-drop-1-2","key":"drag-and-drop-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#drag-and-drop-demo","actionHref":"#drag-and-drop-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="secondary" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -528,7 +531,8 @@ page DragAndDropDetail {
         <div class="demo-workbench">
           <div id="drag-and-drop-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="DragAndDrop" size="lg" title="Advanced Drag And Drop" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;drag-and-drop-2-1&quot;,&quot;key&quot;:&quot;drag-and-drop-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#drag-and-drop-demo&quot;,&quot;actionHref&quot;:&quot;#drag-and-drop-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;drag-and-drop-2-2&quot;,&quot;key&quot;:&quot;drag-and-drop-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#drag-and-drop-demo&quot;,&quot;actionHref&quot;:&quot;#drag-and-drop-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><DragAndDrop size="lg" title="Advanced Drag And Drop" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"drag-and-drop-2-1","key":"drag-and-drop-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#drag-and-drop-demo","actionHref":"#drag-and-drop-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"drag-and-drop-2-2","key":"drag-and-drop-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#drag-and-drop-demo","actionHref":"#drag-and-drop-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' variant="success" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -649,11 +653,38 @@ page DragAndDropDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@dragStart</code><span>Fires when the component emits the drag Start event.</span></div><div><code>@dragEnd</code><span>Fires when the component emits the drag End event.</span></div><div><code>@dragEnter</code><span>Fires when the component emits the drag Enter event.</span></div><div><code>@dragLeave</code><span>Fires when the component emits the drag Leave event.</span></div><div><code>@drop</code><span>Fires when the component emits the drop event.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@dragStart</code><span>Fires when the component emits the dragStart event.</span></div><div><code>@dragEnd</code><span>Fires when the component emits the dragEnd event.</span></div><div><code>@dragEnter</code><span>Fires when the component emits the dragEnter event.</span></div><div><code>@dragLeave</code><span>Fires when the component emits the dragLeave event.</span></div><div><code>@drop</code><span>Fires when the component emits the drop event.</span></div><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;DragAndDrop
+  @dragStart='console.log(event.detail)'
+  @dragEnd='console.log(event.detail)'
+  @dragEnter='console.log(event.detail)'
+  @dragLeave='console.log(event.detail)'
+  @drop='console.log(event.detail)'
+  @change='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"DragAndDrop\"], [data-component=\"DragAndDrop\"]")
 
-component.addEventListener('dragStart', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("dragStart", (event) =&gt; &#123;
+  console.log("dragStart", event.detail)
+&#125;)
+
+component?.addEventListener("dragEnd", (event) =&gt; &#123;
+  console.log("dragEnd", event.detail)
+&#125;)
+
+component?.addEventListener("dragEnter", (event) =&gt; &#123;
+  console.log("dragEnter", event.detail)
+&#125;)
+
+component?.addEventListener("dragLeave", (event) =&gt; &#123;
+  console.log("dragLeave", event.detail)
+&#125;)
+
+component?.addEventListener("drop", (event) =&gt; &#123;
+  console.log("drop", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Drag And Drop"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
diff --git a/examples/component-showcase/app/pages/components/drawer.wrn b/examples/component-showcase/app/pages/components/drawer.wrn
index 7be429af..349183ec 100644
--- a/examples/component-showcase/app/pages/components/drawer.wrn
+++ b/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_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom"
+  state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
+  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>
-        <div class="detail-badges"><span>8 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <p>Present responsive modal side or bottom content with focus management, backdrop behavior, slots, and close events.</p>
+        <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>
-          <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>
+          <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-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="playground-drawer-scrollable"><span><strong>scrollable</strong><small>boolean</small></span><input id="playground-drawer-scrollable" name="pg_scrollable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-drawer-triggerLabel"><span><strong>trigger Label</strong><small>string</small></span><input id="playground-drawer-triggerLabel" name="pg_triggerLabel" type="text" value="Open playground drawer" /></label><label class="playground-field" for="playground-drawer-triggerIcon"><span><strong>trigger Icon</strong><small>string</small></span><input id="playground-drawer-triggerIcon" name="pg_triggerIcon" type="text" value="" /></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>
         </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"
-  description="A polished default drawer for a modern application."
-  open="true"
+  title="Citizen service details"
+  description="Review supporting information without leaving the current page."
+  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"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  open="true"
+  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"
-/&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;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>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("open", (event) =&gt; &#123;
+  console.log("open", event.detail)
+&#125;)
+
+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">
diff --git a/examples/component-showcase/app/pages/components/dropdown.wrn b/examples/component-showcase/app/pages/components/dropdown.wrn
index bbf6194b..3e724cea 100644
--- a/examples/component-showcase/app/pages/components/dropdown.wrn
+++ b/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_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_placement = ctx.url.searchParams.get("pg_placement") ?? "end"
+  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "raised"
+  state playground_closeOnSelect = (ctx.url.searchParams.get("pg_closeOnSelect") ?? "true") === "true"
+  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>
-        <div class="detail-badges"><span>6 props</span><span>3 slots</span><span>4 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <p>Open an accessible anchored menu with keyboard navigation, item selection, actions, and responsive placement.</p>
+        <div class="detail-badges"><span>17 props</span><span>4 slots</span><span>5 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>
-          <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>[
+          <header><div><span>Component props</span><strong>17 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-dropdown-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-dropdown-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
-    "id": "dropdown-0-1",
-    "key": "dropdown-0-1",
-    "value": "primary",
-    "label": "Primary workflow",
-    "title": "Primary workflow",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "A configurable sample message.",
-    "href": "#dropdown-demo",
-    "actionHref": "#dropdown-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": true,
-    "selected": true,
-    "checked": true,
-    "disabled": false,
-    "outgoing": false,
-    "open": true,
-    "number": 1,
-    "count": 16,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 1",
-    "items": [
-      {
-        "label": "Nested option A",
-        "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": "Open dashboard",
+    "description": "View the operational workspace",
+    "value": "dashboard",
+    "icon": "icon-[lucide--layout-dashboard]"
   },
   {
-    "id": "dropdown-0-2",
-    "key": "dropdown-0-2",
-    "value": "secondary",
-    "label": "Additional option",
-    "title": "Supporting example",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "Another configurable message.",
-    "href": "#dropdown-demo",
-    "actionHref": "#dropdown-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": false,
-    "selected": false,
-    "checked": false,
-    "disabled": false,
-    "outgoing": true,
-    "open": true,
-    "number": 2,
-    "count": 32,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 2",
-    "items": [
-      {
-        "label": "Nested option A",
-        "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": "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-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="playground-field" for="playground-dropdown-emptyLabel"><span><strong>empty Label</strong><small>string</small></span><input id="playground-dropdown-emptyLabel" name="pg_emptyLabel" type="text" value="Dropdown" /></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>
         </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",
-      "key": "dropdown-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#dropdown-demo",
-      "actionHref": "#dropdown-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "Open dashboard",
+      "description": "View the operational workspace",
+      "value": "dashboard",
+      "icon": "icon-[lucide--layout-dashboard]"
     &#125;,
     &#123;
-      "id": "dropdown-0-2",
-      "key": "dropdown-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#dropdown-demo",
-      "actionHref": "#dropdown-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "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;
-  ]'&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",
-      "key": "dropdown-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": "#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"
-      ]
+      "label": "Open dashboard",
+      "description": "View the operational workspace",
+      "value": "dashboard",
+      "icon": "icon-[lucide--layout-dashboard]"
     &#125;,
     &#123;
-      "id": "dropdown-1-2",
-      "key": "dropdown-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable 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": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "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;
-  ]'&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",
-      "key": "dropdown-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": "#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"
-      ]
+      "label": "Open dashboard",
+      "description": "View the operational workspace",
+      "value": "dashboard",
+      "icon": "icon-[lucide--layout-dashboard]"
     &#125;,
     &#123;
-      "id": "dropdown-2-2",
-      "key": "dropdown-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": "#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": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
+      "label": "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;
-  ]'&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;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"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("toggle", (event) =&gt; &#123;
+  console.log("toggle", 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("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">
diff --git a/examples/component-showcase/app/pages/components/feature-card.wrn b/examples/component-showcase/app/pages/components/feature-card.wrn
index 0fb41b18..17832199 100644
--- a/examples/component-showcase/app/pages/components/feature-card.wrn
+++ b/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>
-        <div class="detail-badges"><span>15 props</span><span>3 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <p>Present one linked feature or service with media, icon, badge, description, and action.</p>
+        <div class="detail-badges"><span>28 props</span><span>4 slots</span><span>0 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>
-          <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>
+          <header><div><span>Component props</span><strong>28 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-feature-card-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-feature-card-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-feature-card-iconStyle"><span><strong>icon Style</strong><small>string</small></span><select id="playground-feature-card-iconStyle" name="pg_iconStyle"><option value="soft" selected>soft</option><option value="plain">plain</option><option value="solid">solid</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-feature-card-iconSize"><span><strong>icon Size</strong><small>string</small></span><select id="playground-feature-card-iconSize" name="pg_iconSize"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option></select></label><label class="playground-field" for="playground-feature-card-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-feature-card-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-feature-card-title"><span><strong>title</strong><small>string</small></span><input id="playground-feature-card-title" name="pg_title" type="text" value="Feature Card example" /></label><label class="playground-field" for="playground-feature-card-description"><span><strong>description</strong><small>string</small></span><input id="playground-feature-card-description" name="pg_description" type="text" value="A polished default feature card for a modern application." /></label><label class="playground-field" for="playground-feature-card-image"><span><strong>image</strong><small>string</small></span><input id="playground-feature-card-image" name="pg_image" type="text" value="" /></label><label class="playground-field" for="playground-feature-card-imageAlt"><span><strong>image Alt</strong><small>string</small></span><input id="playground-feature-card-imageAlt" name="pg_imageAlt" type="text" value="" /></label><label class="playground-field" for="playground-feature-card-imagePosition"><span><strong>image Position</strong><small>string</small></span><select id="playground-feature-card-imagePosition" name="pg_imagePosition"><option value="top" selected>top</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-feature-card-imageAspect"><span><strong>image Aspect</strong><small>string</small></span><select id="playground-feature-card-imageAspect" name="pg_imageAspect"><option value="wide" selected>wide</option><option value="square">square</option><option value="video">video</option><option value="portrait">portrait</option></select></label><label class="playground-field" for="playground-feature-card-imageLoading"><span><strong>image Loading</strong><small>string</small></span><input id="playground-feature-card-imageLoading" name="pg_imageLoading" type="text" value="lazy" /></label><label class="playground-field" for="playground-feature-card-href"><span><strong>href</strong><small>string</small></span><input id="playground-feature-card-href" name="pg_href" type="text" value="#feature-card-demo" /></label><label class="playground-field" for="playground-feature-card-target"><span><strong>target</strong><small>string</small></span><select id="playground-feature-card-target" name="pg_target"><option value="" selected>Auto / default</option><option value="_self">_self</option><option value="_blank">_blank</option><option value="_parent">_parent</option><option value="_top">_top</option></select></label><label class="playground-field" for="playground-feature-card-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-feature-card-rel" name="pg_rel" type="text" value="" /></label><label class="playground-toggle" for="playground-feature-card-external"><span><strong>external</strong><small>boolean</small></span><input id="playground-feature-card-external" name="pg_external" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-feature-card-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-feature-card-actionLabel" name="pg_actionLabel" type="text" value="Feature Card" /></label><label class="playground-field" for="playground-feature-card-actionIcon"><span><strong>action Icon</strong><small>string</small></span><input id="playground-feature-card-actionIcon" name="pg_actionIcon" type="text" value="" /></label><label class="playground-toggle" for="playground-feature-card-showArrow"><span><strong>show Arrow</strong><small>boolean</small></span><input id="playground-feature-card-showArrow" name="pg_showArrow" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-feature-card-stretchedLink"><span><strong>stretched Link</strong><small>boolean</small></span><input id="playground-feature-card-stretchedLink" name="pg_stretchedLink" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></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="raised">raised</option><option value="soft">soft</option><option value="outline">outline</option><option value="ghost">ghost</option><option value="minimal">minimal</option><option value="solid">solid</option><option value="gradient">gradient</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="none">none</option><option value="shadow">shadow</option><option value="border">border</option><option value="glow">glow</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="right">right</option><option value="end">end</option><option value="stretch">stretch</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>
         </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"
-  description="A polished default feature card for a modern application."
-  href="#feature-card-demo"
-  actionLabel="Feature Card"
+  icon="icon-[lucide--shield-check]"
+  eyebrow="Citizen support"
+  title="Citizen services"
+  description="Report incidents, request certificates, and find safety information."
+  href="#citizen-services"
+  actionLabel="Explore services"
+  badge="Public"
   align="start"&gt;
-  &lt;!-- 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"
-  description="A compact configuration for dashboards and dense product surfaces."
-  href="#feature-card-demo"
-  actionLabel="Compact example"
+  title="Unified citizen portal"
+  description="Access trusted services from one responsive interface."
+  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"
+  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]"
-  title="Advanced Feature Card"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  href="#feature-card-demo"
-  actionLabel="Advanced example"
+  icon="icon-[lucide--siren]"
+  eyebrow="Emergency"
+  title="Get urgent help"
+  description="Find verified emergency contacts and immediate safety guidance."
+  href="#emergency"
+  actionLabel="View emergency help"
+  badge="Important"
   size="lg"
-  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">
diff --git a/examples/component-showcase/app/pages/components/feature-grid.wrn b/examples/component-showcase/app/pages/components/feature-grid.wrn
index 7a2a963a..57b22076 100644
--- a/examples/component-showcase/app/pages/components/feature-grid.wrn
+++ b/examples/component-showcase/app/pages/components/feature-grid.wrn
@@ -1,20 +1,21 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page FeatureGridDetail {
   layout = "showcase"
-  state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
-  state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "3"
-  state playground_tabletColumns = ctx.url.searchParams.get("pg_tabletColumns") ?? "2"
-  state playground_mobileColumns = ctx.url.searchParams.get("pg_mobileColumns") ?? "1"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"icon\":\"icon-[lucide--shield-check]\",\"eyebrow\":\"Citizen support\",\"title\":\"Citizen services\",\"description\":\"Report incidents, request certificates, and find safety information.\",\"href\":\"#citizen-services\",\"actionLabel\":\"Explore services\",\"badge\":\"Public\",\"color\":\"primary\",\"variant\":\"default\",\"hover\":\"lift\"},{\"icon\":\"icon-[lucide--map-pin]\",\"eyebrow\":\"Directory\",\"title\":\"Station directory\",\"description\":\"Locate offices, jurisdictions, contacts, and public service hours.\",\"href\":\"#station-directory\",\"actionLabel\":\"Find a station\",\"badge\":\"Directory\",\"color\":\"info\",\"variant\":\"soft\",\"hover\":\"border\"},{\"icon\":\"icon-[lucide--radio-tower]\",\"eyebrow\":\"Verified\",\"title\":\"Public updates\",\"description\":\"Publish official alerts, notices, advisories, and verified information.\",\"href\":\"#public-updates\",\"actionLabel\":\"View updates\",\"badge\":\"Live\",\"color\":\"success\",\"variant\":\"gradient\",\"hover\":\"glow\"}]")
+  state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "3")
+  state playground_tabletColumns = Number(ctx.url.searchParams.get("pg_tabletColumns") ?? "2")
+  state playground_mobileColumns = Number(ctx.url.searchParams.get("pg_mobileColumns") ?? "1")
   state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md"
   state playground_minItemWidth = ctx.url.searchParams.get("pg_minItemWidth") ?? ""
-  state playground_equalHeight = ctx.url.searchParams.get("pg_equalHeight") ?? "true"
+  state playground_equalHeight = (ctx.url.searchParams.get("pg_equalHeight") ?? "true") === "true"
   state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
   state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "full"
+  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Feature Grid"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Feature Grid"
-    description = "Responsive equal-height grid for feature and service cards."
+    description = "Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -24,28 +25,175 @@ page FeatureGridDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Layout component</span>
         <h1>Feature Grid</h1>
-        <p>Responsive equal-height grid for feature and service cards.</p>
-        <div class="detail-badges"><span>11 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <p>Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.</p>
+        <div class="detail-badges"><span>12 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="FeatureGrid" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="FeatureGrid" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Feature Grid</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="FeatureGrid" color="{playground_color}" size="{playground_size}" columns="{playground_columns}" tabletColumns="{playground_tabletColumns}" mobileColumns="{playground_mobileColumns}" gap="{playground_gap}" minItemWidth="{playground_minItemWidth}" equalHeight="{playground_equalHeight}" align="{playground_align}" maxWidth="{playground_maxWidth}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><FeatureGrid items='{playground_items}' columns='{playground_columns}' tabletColumns='{playground_tabletColumns}' mobileColumns='{playground_mobileColumns}' gap='{playground_gap}' minItemWidth='{playground_minItemWidth}' equalHeight='{playground_equalHeight}' align='{playground_align}' maxWidth='{playground_maxWidth}' variant='{playground_variant}' label='{playground_label}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;FeatureGrid
+  items='[
+    &#123;
+      "id": "feature-grid-0-1",
+      "key": "feature-grid-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#feature-grid-demo",
+      "actionHref": "#feature-grid-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    &#125;,
+    &#123;
+      "id": "feature-grid-0-2",
+      "key": "feature-grid-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#feature-grid-demo",
+      "actionHref": "#feature-grid-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    &#125;
+  ]'
   align="start"
+  label="Feature Grid"
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>11 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-feature-grid-color"><span><strong>color</strong><small>string</small></span><select id="playground-feature-grid-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-feature-grid-size"><span><strong>size</strong><small>string</small></span><select id="playground-feature-grid-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-feature-grid-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-feature-grid-columns" name="pg_columns" type="number" value="3" /></label><label class="playground-field" for="playground-feature-grid-tabletColumns"><span><strong>tablet Columns</strong><small>number</small></span><input id="playground-feature-grid-tabletColumns" name="pg_tabletColumns" type="number" value="2" /></label><label class="playground-field" for="playground-feature-grid-mobileColumns"><span><strong>mobile Columns</strong><small>number</small></span><input id="playground-feature-grid-mobileColumns" name="pg_mobileColumns" type="number" value="1" /></label><label class="playground-field" for="playground-feature-grid-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-feature-grid-gap" name="pg_gap"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option></select></label><label class="playground-field" for="playground-feature-grid-minItemWidth"><span><strong>min Item Width</strong><small>string</small></span><input id="playground-feature-grid-minItemWidth" name="pg_minItemWidth" type="text" value="" /></label><label class="playground-toggle" for="playground-feature-grid-equalHeight"><span><strong>equal Height</strong><small>boolean</small></span><input id="playground-feature-grid-equalHeight" name="pg_equalHeight" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-feature-grid-align"><span><strong>align</strong><small>string</small></span><select id="playground-feature-grid-align" name="pg_align"><option value="start" selected>start</option><option value="stretch">stretch</option><option value="center">center</option><option value="end">end</option></select></label><label class="playground-field" for="playground-feature-grid-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-feature-grid-maxWidth" name="pg_maxWidth"><option value="full" selected>full</option><option value="lg">lg</option><option value="xl">xl</option></select></label><label class="playground-field" for="playground-feature-grid-class"><span><strong>class</strong><small>string</small></span><input id="playground-feature-grid-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <header><div><span>Component props</span><strong>12 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-feature-grid-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-feature-grid-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+  {
+    "icon": "icon-[lucide--shield-check]",
+    "eyebrow": "Citizen support",
+    "title": "Citizen services",
+    "description": "Report incidents, request certificates, and find safety information.",
+    "href": "#citizen-services",
+    "actionLabel": "Explore services",
+    "badge": "Public",
+    "color": "primary",
+    "variant": "default",
+    "hover": "lift"
+  },
+  {
+    "icon": "icon-[lucide--map-pin]",
+    "eyebrow": "Directory",
+    "title": "Station directory",
+    "description": "Locate offices, jurisdictions, contacts, and public service hours.",
+    "href": "#station-directory",
+    "actionLabel": "Find a station",
+    "badge": "Directory",
+    "color": "info",
+    "variant": "soft",
+    "hover": "border"
+  },
+  {
+    "icon": "icon-[lucide--radio-tower]",
+    "eyebrow": "Verified",
+    "title": "Public updates",
+    "description": "Publish official alerts, notices, advisories, and verified information.",
+    "href": "#public-updates",
+    "actionLabel": "View updates",
+    "badge": "Live",
+    "color": "success",
+    "variant": "gradient",
+    "hover": "glow"
+  }
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-feature-grid-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-feature-grid-columns" name="pg_columns" type="number" value="3" /></label><label class="playground-field" for="playground-feature-grid-tabletColumns"><span><strong>tablet Columns</strong><small>number</small></span><input id="playground-feature-grid-tabletColumns" name="pg_tabletColumns" type="number" value="2" /></label><label class="playground-field" for="playground-feature-grid-mobileColumns"><span><strong>mobile Columns</strong><small>number</small></span><input id="playground-feature-grid-mobileColumns" name="pg_mobileColumns" type="number" value="1" /></label><label class="playground-field" for="playground-feature-grid-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-feature-grid-gap" name="pg_gap"><option value="md" selected>md</option><option value="none">none</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="xs">xs</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-feature-grid-minItemWidth"><span><strong>min Item Width</strong><small>string</small></span><input id="playground-feature-grid-minItemWidth" name="pg_minItemWidth" type="text" value="" /></label><label class="playground-toggle" for="playground-feature-grid-equalHeight"><span><strong>equal Height</strong><small>boolean</small></span><input id="playground-feature-grid-equalHeight" name="pg_equalHeight" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-feature-grid-align"><span><strong>align</strong><small>string</small></span><select id="playground-feature-grid-align" name="pg_align"><option value="start" selected>start</option><option value="stretch">stretch</option><option value="center">center</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-feature-grid-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-feature-grid-maxWidth" name="pg_maxWidth"><option value="full" selected>full</option><option value="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="wide">wide</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-feature-grid-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-feature-grid-variant" name="pg_variant"><option value="default" selected>default</option><option value="panel">panel</option><option value="soft">soft</option></select></label><label class="playground-field" for="playground-feature-grid-label"><span><strong>label</strong><small>string</small></span><input id="playground-feature-grid-label" name="pg_label" type="text" value="Feature Grid" /></label><label class="playground-field" for="playground-feature-grid-class"><span><strong>class</strong><small>string</small></span><input id="playground-feature-grid-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -54,70 +202,203 @@ page FeatureGridDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Three-column service grid</h2><p>Arrange services or capabilities as equal-height responsive cards.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="feature-grid-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="FeatureGrid" size="default" columns="3" tabletColumns="2" mobileColumns="1" equalHeight="true" align="start" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><FeatureGrid items='[{"icon":"icon-[lucide--shield-check]","eyebrow":"Citizen support","title":"Citizen services","description":"Report incidents, request certificates, and find safety information.","href":"#citizen-services","actionLabel":"Explore services","badge":"Public","color":"primary","variant":"default","hover":"lift"},{"icon":"icon-[lucide--map-pin]","eyebrow":"Directory","title":"Station directory","description":"Locate offices, jurisdictions, contacts, and public service hours.","href":"#station-directory","actionLabel":"Find a station","badge":"Directory","color":"info","variant":"soft","hover":"border"},{"icon":"icon-[lucide--radio-tower]","eyebrow":"Verified","title":"Public updates","description":"Publish official alerts, notices, advisories, and verified information.","href":"#public-updates","actionLabel":"View updates","badge":"Live","color":"success","variant":"gradient","hover":"glow"}]' columns="3" tabletColumns="2" mobileColumns="1" gap="lg" equalHeight="true" align="start" maxWidth="full" variant="default" label="Feature Grid" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Three-column service grid usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;FeatureGrid
+  items='[
+    &#123;
+      "icon": "icon-[lucide--shield-check]",
+      "eyebrow": "Citizen support",
+      "title": "Citizen services",
+      "description": "Report incidents, request certificates, and find safety information.",
+      "href": "#citizen-services",
+      "actionLabel": "Explore services",
+      "badge": "Public",
+      "color": "primary",
+      "variant": "default",
+      "hover": "lift"
+    &#125;,
+    &#123;
+      "icon": "icon-[lucide--map-pin]",
+      "eyebrow": "Directory",
+      "title": "Station directory",
+      "description": "Locate offices, jurisdictions, contacts, and public service hours.",
+      "href": "#station-directory",
+      "actionLabel": "Find a station",
+      "badge": "Directory",
+      "color": "info",
+      "variant": "soft",
+      "hover": "border"
+    &#125;,
+    &#123;
+      "icon": "icon-[lucide--radio-tower]",
+      "eyebrow": "Verified",
+      "title": "Public updates",
+      "description": "Publish official alerts, notices, advisories, and verified information.",
+      "href": "#public-updates",
+      "actionLabel": "View updates",
+      "badge": "Live",
+      "color": "success",
+      "variant": "gradient",
+      "hover": "glow"
+    &#125;
+  ]'
+  gap="lg"
   align="start"
+  label="Feature Grid"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
+          <div><span class="demo-case-eyebrow">Compact</span><h2>Compact four-column grid</h2><p>Use smaller gaps and four columns for short benefit or capability cards.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="feature-grid-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="FeatureGrid" size="sm" columns="3" tabletColumns="2" mobileColumns="1" equalHeight="true" align="center" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><FeatureGrid items='[{"icon":"icon-[lucide--shield-check]","eyebrow":"Citizen support","title":"Citizen services","description":"Report incidents, request certificates, and find safety information.","href":"#citizen-services","actionLabel":"Explore services","badge":"Public","color":"primary","variant":"default","hover":"lift"},{"icon":"icon-[lucide--map-pin]","eyebrow":"Directory","title":"Station directory","description":"Locate offices, jurisdictions, contacts, and public service hours.","href":"#station-directory","actionLabel":"Find a station","badge":"Directory","color":"info","variant":"soft","hover":"border"},{"icon":"icon-[lucide--radio-tower]","eyebrow":"Verified","title":"Public updates","description":"Publish official alerts, notices, advisories, and verified information.","href":"#public-updates","actionLabel":"View updates","badge":"Live","color":"success","variant":"gradient","hover":"glow"},{"icon":"icon-[lucide--file-check-2]","title":"Certificates","description":"Request and track certificates online.","href":"#certificates","color":"warning"}]' columns="4" tabletColumns="2" mobileColumns="1" gap="sm" equalHeight="true" align="center" variant="soft" label="Compact example" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Compact four-column grid usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;FeatureGrid
-  size="sm"
+  items='[
+    &#123;
+      "icon": "icon-[lucide--shield-check]",
+      "eyebrow": "Citizen support",
+      "title": "Citizen services",
+      "description": "Report incidents, request certificates, and find safety information.",
+      "href": "#citizen-services",
+      "actionLabel": "Explore services",
+      "badge": "Public",
+      "color": "primary",
+      "variant": "default",
+      "hover": "lift"
+    &#125;,
+    &#123;
+      "icon": "icon-[lucide--map-pin]",
+      "eyebrow": "Directory",
+      "title": "Station directory",
+      "description": "Locate offices, jurisdictions, contacts, and public service hours.",
+      "href": "#station-directory",
+      "actionLabel": "Find a station",
+      "badge": "Directory",
+      "color": "info",
+      "variant": "soft",
+      "hover": "border"
+    &#125;,
+    &#123;
+      "icon": "icon-[lucide--radio-tower]",
+      "eyebrow": "Verified",
+      "title": "Public updates",
+      "description": "Publish official alerts, notices, advisories, and verified information.",
+      "href": "#public-updates",
+      "actionLabel": "View updates",
+      "badge": "Live",
+      "color": "success",
+      "variant": "gradient",
+      "hover": "glow"
+    &#125;,
+    &#123;
+      "icon": "icon-[lucide--file-check-2]",
+      "title": "Certificates",
+      "description": "Request and track certificates online.",
+      "href": "#certificates",
+      "color": "warning"
+    &#125;
+  ]'
+  columns="4"
+  gap="sm"
   align="center"
+  variant="soft"
+  label="Compact example"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Auto-fit feature collection</h2><p>Let cards wrap automatically according to a minimum useful width.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="feature-grid-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="FeatureGrid" size="lg" columns="3" tabletColumns="2" mobileColumns="1" equalHeight="true" align="end" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><FeatureGrid items='[{"icon":"icon-[lucide--shield-check]","eyebrow":"Citizen support","title":"Citizen services","description":"Report incidents, request certificates, and find safety information.","href":"#citizen-services","actionLabel":"Explore services","badge":"Public","color":"primary","variant":"default","hover":"lift"},{"icon":"icon-[lucide--map-pin]","eyebrow":"Directory","title":"Station directory","description":"Locate offices, jurisdictions, contacts, and public service hours.","href":"#station-directory","actionLabel":"Find a station","badge":"Directory","color":"info","variant":"soft","hover":"border"},{"icon":"icon-[lucide--radio-tower]","eyebrow":"Verified","title":"Public updates","description":"Publish official alerts, notices, advisories, and verified information.","href":"#public-updates","actionLabel":"View updates","badge":"Live","color":"success","variant":"gradient","hover":"glow"}]' columns="3" tabletColumns="2" mobileColumns="1" gap="xl" minItemWidth="18rem" equalHeight="true" align="end" maxWidth="wide" variant="panel" label="Advanced example" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Auto-fit feature collection usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;FeatureGrid
-  size="lg"
+  items='[
+    &#123;
+      "icon": "icon-[lucide--shield-check]",
+      "eyebrow": "Citizen support",
+      "title": "Citizen services",
+      "description": "Report incidents, request certificates, and find safety information.",
+      "href": "#citizen-services",
+      "actionLabel": "Explore services",
+      "badge": "Public",
+      "color": "primary",
+      "variant": "default",
+      "hover": "lift"
+    &#125;,
+    &#123;
+      "icon": "icon-[lucide--map-pin]",
+      "eyebrow": "Directory",
+      "title": "Station directory",
+      "description": "Locate offices, jurisdictions, contacts, and public service hours.",
+      "href": "#station-directory",
+      "actionLabel": "Find a station",
+      "badge": "Directory",
+      "color": "info",
+      "variant": "soft",
+      "hover": "border"
+    &#125;,
+    &#123;
+      "icon": "icon-[lucide--radio-tower]",
+      "eyebrow": "Verified",
+      "title": "Public updates",
+      "description": "Publish official alerts, notices, advisories, and verified information.",
+      "href": "#public-updates",
+      "actionLabel": "View updates",
+      "badge": "Live",
+      "color": "success",
+      "variant": "gradient",
+      "hover": "glow"
+    &#125;
+  ]'
+  gap="xl"
+  minItemWidth="18rem"
   align="end"
+  maxWidth="wide"
+  variant="panel"
+  label="Advanced example"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>3</code></td><td>No</td></tr><tr><td><code>tabletColumns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>mobileColumns</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>minItemWidth</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>equalHeight</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"stretch"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"full"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>3</code></td><td>No</td></tr><tr><td><code>tabletColumns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>mobileColumns</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>minItemWidth</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>equalHeight</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"stretch"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"full"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Features"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#feature-grid-demo-1">Production default</a><a href="#feature-grid-demo-2">Compact application</a><a href="#feature-grid-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#feature-grid-demo-1">Three-column service grid</a><a href="#feature-grid-demo-2">Compact four-column grid</a><a href="#feature-grid-demo-3">Auto-fit feature collection</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
       <a href="/components/divider"><small>Previous</small><strong>← Divider</strong></a>
-      <a href="/components/grid"><small>Next</small><strong>Grid →</strong></a>
+      <a href="/components/footer"><small>Next</small><strong>Footer →</strong></a>
     </nav>
   }
 }
diff --git a/examples/component-showcase/app/pages/components/feature-icon-card.wrn b/examples/component-showcase/app/pages/components/feature-icon-card.wrn
index dfcde329..d617ac5f 100644
--- a/examples/component-showcase/app/pages/components/feature-icon-card.wrn
+++ b/examples/component-showcase/app/pages/components/feature-icon-card.wrn
@@ -17,27 +17,27 @@ page FeatureIconCardDetail {
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Feature Icon Card"
-    description = "Feature card with a prominent themed icon treatment."
+    description = "Present a compact feature or benefit with a styled icon, title, description, badge, and optional link."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/blocks">Blocks</a><span aria-hidden="true">/</span><span>Feature Icon Card</span>
+      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/marketing">Marketing</a><span aria-hidden="true">/</span><span>Feature Icon Card</span>
     </nav>
     <header class="detail-hero">
       <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Blocks component</span>
+        <span class="showcase-eyebrow">Marketing component</span>
         <h1>Feature Icon Card</h1>
-        <p>Feature card with a prominent themed icon treatment.</p>
+        <p>Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.</p>
         <div class="detail-badges"><span>14 props</span><span>2 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="FeatureIconCard" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="FeatureIconCard" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Feature Icon Card</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="FeatureIconCard" icon="{playground_icon}" iconSize="{playground_iconSize}" iconVariant="{playground_iconVariant}" title="{playground_title}" description="{playground_description}" href="{playground_href}" actionLabel="{playground_actionLabel}" badge="{playground_badge}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" align="{playground_align}" hover="{playground_hover}" class="{playground_class}"><div slot="footer" class="showcase-slot">footer slot</div></div></div>
+          <div class="playground-preview-source" data-playground-preview><FeatureIconCard icon='{playground_icon}' iconSize='{playground_iconSize}' iconVariant='{playground_iconVariant}' title='{playground_title}' description='{playground_description}' href='{playground_href}' actionLabel='{playground_actionLabel}' badge='{playground_badge}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' align='{playground_align}' hover='{playground_hover}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;FeatureIconCard
@@ -46,14 +46,17 @@ page FeatureIconCardDetail {
   href="#feature-icon-card-demo"
   actionLabel="Feature Icon Card"
   align="start"&gt;
-  &lt;!-- Add default, footer slot content here --&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/FeatureIconCard&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>14 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-feature-icon-card-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-feature-icon-card-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-feature-icon-card-iconSize"><span><strong>icon Size</strong><small>string</small></span><select id="playground-feature-icon-card-iconSize" name="pg_iconSize"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option></select></label><label class="playground-field" for="playground-feature-icon-card-iconVariant"><span><strong>icon Variant</strong><small>string</small></span><input id="playground-feature-icon-card-iconVariant" name="pg_iconVariant" type="text" value="soft" /></label><label class="playground-field" for="playground-feature-icon-card-title"><span><strong>title</strong><small>string</small></span><input id="playground-feature-icon-card-title" name="pg_title" type="text" value="Feature Icon Card example" /></label><label class="playground-field" for="playground-feature-icon-card-description"><span><strong>description</strong><small>string</small></span><input id="playground-feature-icon-card-description" name="pg_description" type="text" value="A polished default feature icon card for a modern application." /></label><label class="playground-field" for="playground-feature-icon-card-href"><span><strong>href</strong><small>string</small></span><input id="playground-feature-icon-card-href" name="pg_href" type="text" value="#feature-icon-card-demo" /></label><label class="playground-field" for="playground-feature-icon-card-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-feature-icon-card-actionLabel" name="pg_actionLabel" type="text" value="Feature Icon Card" /></label><label class="playground-field" for="playground-feature-icon-card-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-feature-icon-card-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-feature-icon-card-size"><span><strong>size</strong><small>string</small></span><select id="playground-feature-icon-card-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-feature-icon-card-color"><span><strong>color</strong><small>string</small></span><select id="playground-feature-icon-card-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-feature-icon-card-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-feature-icon-card-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option><option value="soft">soft</option></select></label><label class="playground-field" for="playground-feature-icon-card-align"><span><strong>align</strong><small>string</small></span><select id="playground-feature-icon-card-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="end">end</option></select></label><label class="playground-field" for="playground-feature-icon-card-hover"><span><strong>hover</strong><small>string</small></span><select id="playground-feature-icon-card-hover" name="pg_hover"><option value="lift" selected>lift</option><option value="shadow">shadow</option><option value="border">border</option></select></label><label class="playground-field" for="playground-feature-icon-card-class"><span><strong>class</strong><small>string</small></span><input id="playground-feature-icon-card-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-feature-icon-card-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-feature-icon-card-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-feature-icon-card-iconSize"><span><strong>icon Size</strong><small>string</small></span><select id="playground-feature-icon-card-iconSize" name="pg_iconSize"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option></select></label><label class="playground-field" for="playground-feature-icon-card-iconVariant"><span><strong>icon Variant</strong><small>string</small></span><select id="playground-feature-icon-card-iconVariant" name="pg_iconVariant"><option value="soft" selected>soft</option><option value="plain">plain</option><option value="solid">solid</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-feature-icon-card-title"><span><strong>title</strong><small>string</small></span><input id="playground-feature-icon-card-title" name="pg_title" type="text" value="Feature Icon Card example" /></label><label class="playground-field" for="playground-feature-icon-card-description"><span><strong>description</strong><small>string</small></span><input id="playground-feature-icon-card-description" name="pg_description" type="text" value="A polished default feature icon card for a modern application." /></label><label class="playground-field" for="playground-feature-icon-card-href"><span><strong>href</strong><small>string</small></span><input id="playground-feature-icon-card-href" name="pg_href" type="text" value="#feature-icon-card-demo" /></label><label class="playground-field" for="playground-feature-icon-card-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-feature-icon-card-actionLabel" name="pg_actionLabel" type="text" value="Feature Icon Card" /></label><label class="playground-field" for="playground-feature-icon-card-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-feature-icon-card-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-feature-icon-card-size"><span><strong>size</strong><small>string</small></span><select id="playground-feature-icon-card-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="large">large</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-feature-icon-card-color"><span><strong>color</strong><small>string</small></span><select id="playground-feature-icon-card-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-feature-icon-card-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-feature-icon-card-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option><option value="minimal">minimal</option></select></label><label class="playground-field" for="playground-feature-icon-card-align"><span><strong>align</strong><small>string</small></span><select id="playground-feature-icon-card-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-feature-icon-card-hover"><span><strong>hover</strong><small>string</small></span><select id="playground-feature-icon-card-hover" name="pg_hover"><option value="lift" selected>lift</option><option value="none">none</option><option value="border">border</option><option value="glow">glow</option></select></label><label class="playground-field" for="playground-feature-icon-card-class"><span><strong>class</strong><small>string</small></span><input id="playground-feature-icon-card-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -62,84 +65,98 @@ page FeatureIconCardDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Icon-led capability card</h2><p>Use a compact card for one feature, benefit, or linked capability.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="feature-icon-card-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="FeatureIconCard" icon="" title="Feature Icon Card example" description="A polished default feature icon card for a modern application." href="#feature-icon-card-demo" actionLabel="Feature Icon Card" size="default" variant="default" align="start" class="showcase-instance showcase-instance--1"><div slot="footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>footer slot</span></div></div></div>
+            
+            <div class="demo-render"><FeatureIconCard icon="icon-[lucide--shield-check]" title="Secure by design" description="Build with consistent validation, accessibility, and theme support." href="#security" actionLabel="Review security" badge="Core" size="default" variant="default" align="start" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Icon-led capability card usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;FeatureIconCard
-  title="Feature Icon Card example"
-  description="A polished default feature icon card for a modern application."
-  href="#feature-icon-card-demo"
-  actionLabel="Feature Icon Card"
+  icon="icon-[lucide--shield-check]"
+  title="Secure by design"
+  description="Build with consistent validation, accessibility, and theme support."
+  href="#security"
+  actionLabel="Review security"
+  badge="Core"
   align="start"&gt;
-  &lt;!-- Add default, footer slot content here --&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/FeatureIconCard&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
+          <div><span class="demo-case-eyebrow">Compact</span><h2>Centered benefit card</h2><p>Center the content for short benefit grids and campaign proof points.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="feature-icon-card-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="FeatureIconCard" icon="icon-[lucide--arrow-right]" title="Compact Feature Icon Card" description="A compact configuration for dashboards and dense product surfaces." href="#feature-icon-card-demo" actionLabel="Compact example" size="sm" variant="secondary" align="center" class="showcase-instance showcase-instance--2"><div slot="footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>footer slot</span></div></div></div>
+            
+            <div class="demo-render"><FeatureIconCard icon="icon-[lucide--gauge]" iconVariant="solid" title="Fast rendering" description="Server-first output with focused client behavior." href="#feature-icon-card-demo" actionLabel="Compact example" size="compact" color="info" variant="secondary" align="center" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Centered benefit card usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;FeatureIconCard
-  icon="icon-[lucide--arrow-right]"
-  title="Compact Feature Icon Card"
-  description="A compact configuration for dashboards and dense product surfaces."
+  icon="icon-[lucide--gauge]"
+  iconVariant="solid"
+  title="Fast rendering"
+  description="Server-first output with focused client behavior."
   href="#feature-icon-card-demo"
   actionLabel="Compact example"
-  size="sm"
+  size="compact"
+  color="info"
   variant="secondary"
   align="center"&gt;
-  &lt;!-- Add default, footer slot content here --&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/FeatureIconCard&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Highlighted linked card</h2><p>Use a stronger raised treatment for a featured capability.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="feature-icon-card-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="FeatureIconCard" icon="icon-[lucide--trash-2]" title="Advanced Feature Icon Card" description="A richer configuration demonstrating additional content and hierarchy." href="#feature-icon-card-demo" actionLabel="Advanced example" size="lg" variant="success" align="end" class="showcase-instance showcase-instance--3"><div slot="footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>footer slot</span></div></div></div>
+            
+            <div class="demo-render"><FeatureIconCard icon="icon-[lucide--workflow]" title="Composable workflows" description="Connect forms, services, data, and actions without duplicating UI." href="#workflows" actionLabel="Explore workflows" size="lg" color="success" variant="raised" align="end" hover="lift" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Highlighted linked card usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;FeatureIconCard
-  icon="icon-[lucide--trash-2]"
-  title="Advanced Feature Icon Card"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  href="#feature-icon-card-demo"
-  actionLabel="Advanced example"
+  icon="icon-[lucide--workflow]"
+  title="Composable workflows"
+  description="Connect forms, services, data, and actions without duplicating UI."
+  href="#workflows"
+  actionLabel="Explore workflows"
   size="lg"
-  variant="success"
+  color="success"
+  variant="raised"
   align="end"&gt;
-  &lt;!-- Add default, footer slot content here --&gt;
+  &lt;div data-slot="footer"&gt;
+    &lt;div class="showcase-slot"&gt;footer slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/FeatureIconCard&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
+        
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>icon</code></td><td>string</td><td><code>"icon-[lucide--sparkles]"</code></td><td>No</td></tr><tr><td><code>iconSize</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>iconVariant</code></td><td>string</td><td><code>"soft"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Feature"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionLabel</code></td><td>string</td><td><code>"Explore"</code></td><td>No</td></tr><tr><td><code>badge</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>hover</code></td><td>string</td><td><code>"lift"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#feature-icon-card-demo-1">Production default</a><a href="#feature-icon-card-demo-2">Compact application</a><a href="#feature-icon-card-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#feature-icon-card-demo-1">Icon-led capability card</a><a href="#feature-icon-card-demo-2">Centered benefit card</a><a href="#feature-icon-card-demo-3">Highlighted linked card</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/file-input.wrn b/examples/component-showcase/app/pages/components/file-input.wrn
index c6fc7da2..76b6df9b 100644
--- a/examples/component-showcase/app/pages/components/file-input.wrn
+++ b/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_name = ctx.url.searchParams.get("pg_name") ?? "file-inputField"
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Profile image"
-  state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
-  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Choose an image"
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? ""
+  state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
+  state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "File Input"
+  state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true"
+  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
+  state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
   state playground_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_multiple = ctx.url.searchParams.get("pg_multiple") ?? "false"
-  state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "Helpful context for this field."
+  state playground_accept = ctx.url.searchParams.get("pg_accept") ?? ""
+  state playground_multiple = (ctx.url.searchParams.get("pg_multiple") ?? "false") === "true"
+  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_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   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"
-  name="file-inputField"
-  label="Profile image"
-  placeholder="Choose an image"
-  accept="image/png,image/jpeg"
-  helperText="Helpful context for this field."
+  label="File Input"
+  placeholder="Enter a sample value"
+  value="sample-1"
 /&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><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"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-file-input-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-file-input-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-file-input-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-file-input-class"><span><strong>class</strong><small>string</small></span><input id="playground-file-input-class" name="pg_class" type="text" value="" /></label></div>
+          <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"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-file-input-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-file-input-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-file-input-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-file-input-class"><span><strong>class</strong><small>string</small></span><input id="playground-file-input-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </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"
-  name="file-inputField"
-  label="Profile image"
-  placeholder="Choose an image"
-  accept="image/png,image/jpeg"
-  helperText="Helpful context for this field."
+  label="File Input"
+  placeholder="Enter a sample value"
+  value="sample-1"
 /&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"
-  name="file-inputField"
-  label="Profile image"
-  placeholder="Choose an image"
-  icon="icon-[lucide--sparkles]"
-  accept="image/png,image/jpeg"
-  variant="outlined"
+  size="sm"
+  label="Compact example"
+  placeholder="Enter a sample value"
+  value="sample-2"
+  icon="icon-[lucide--arrow-right]"
+  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="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"
-  name="file-inputField"
-  label="Profile image"
-  placeholder="Choose an image"
-  icon="icon-[lucide--circle-user-round]"
-  iconPosition="end"
-  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"
+  size="lg"
+  label="Advanced example"
+  placeholder="Search by name, email, or identifier"
+  value="sample-3"
+  icon="icon-[lucide--trash-2]"
+  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>@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;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("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">
diff --git a/examples/component-showcase/app/pages/components/file-upload-progress.wrn b/examples/component-showcase/app/pages/components/file-upload-progress.wrn
index eab09ee5..6c761773 100644
--- a/examples/component-showcase/app/pages/components/file-upload-progress.wrn
+++ b/examples/component-showcase/app/pages/components/file-upload-progress.wrn
@@ -3,13 +3,13 @@ page FileUploadProgressDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Uploading archive"
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? "42"
-  state playground_max = ctx.url.searchParams.get("pg_max") ?? "100"
-  state playground_showValue = ctx.url.searchParams.get("pg_showValue") ?? "true"
-  state playground_fileName = ctx.url.searchParams.get("pg_fileName") ?? "design-system.zip"
-  state playground_fileSize = ctx.url.searchParams.get("pg_fileSize") ?? "20 MB"
-  state playground_uploadedSize = ctx.url.searchParams.get("pg_uploadedSize") ?? "8.4 MB"
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "File Upload Progress"
+  state playground_value = Number(ctx.url.searchParams.get("pg_value") ?? "36")
+  state playground_max = Number(ctx.url.searchParams.get("pg_max") ?? "100")
+  state playground_showValue = (ctx.url.searchParams.get("pg_showValue") ?? "true") === "true"
+  state playground_fileName = ctx.url.searchParams.get("pg_fileName") ?? ""
+  state playground_fileSize = ctx.url.searchParams.get("pg_fileSize") ?? ""
+  state playground_uploadedSize = ctx.url.searchParams.get("pg_uploadedSize") ?? ""
   state playground_status = ctx.url.searchParams.get("pg_status") ?? "uploading"
   state playground_cancelLabel = ctx.url.searchParams.get("pg_cancelLabel") ?? "File Upload Progress"
   state playground_retryLabel = ctx.url.searchParams.get("pg_retryLabel") ?? "File Upload Progress"
@@ -31,29 +31,27 @@ page FileUploadProgressDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="FileUploadProgress" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="FileUploadProgress" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="cancel,retry,complete">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure File Upload Progress</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="FileUploadProgress" size="{playground_size}" color="{playground_color}" label="{playground_label}" value="{playground_value}" max="{playground_max}" showValue="{playground_showValue}" fileName="{playground_fileName}" fileSize="{playground_fileSize}" uploadedSize="{playground_uploadedSize}" status="{playground_status}" cancelLabel="{playground_cancelLabel}" retryLabel="{playground_retryLabel}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><FileUploadProgress size='{playground_size}' color='{playground_color}' label='{playground_label}' value='{playground_value}' max='{playground_max}' showValue='{playground_showValue}' fileName='{playground_fileName}' fileSize='{playground_fileSize}' uploadedSize='{playground_uploadedSize}' status='{playground_status}' cancelLabel='{playground_cancelLabel}' retryLabel='{playground_retryLabel}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;FileUploadProgress
-  label="Uploading archive"
-  value="42"
-  fileName="design-system.zip"
-  fileSize="20 MB"
-  uploadedSize="8.4 MB"
+  label="File Upload Progress"
+  value="36"
   cancelLabel="File Upload Progress"
   retryLabel="File Upload Progress"
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-file-upload-progress-size"><span><strong>size</strong><small>string</small></span><select id="playground-file-upload-progress-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-file-upload-progress-color"><span><strong>color</strong><small>string</small></span><select id="playground-file-upload-progress-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-file-upload-progress-label"><span><strong>label</strong><small>string</small></span><input id="playground-file-upload-progress-label" name="pg_label" type="text" value="Uploading archive" /></label><label class="playground-field" for="playground-file-upload-progress-value"><span><strong>value</strong><small>number</small></span><input id="playground-file-upload-progress-value" name="pg_value" type="number" value="42" /></label><label class="playground-field" for="playground-file-upload-progress-max"><span><strong>max</strong><small>number</small></span><input id="playground-file-upload-progress-max" name="pg_max" type="number" value="100" /></label><label class="playground-toggle" for="playground-file-upload-progress-showValue"><span><strong>show Value</strong><small>boolean</small></span><input id="playground-file-upload-progress-showValue" name="pg_showValue" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-file-upload-progress-fileName"><span><strong>file Name</strong><small>string</small></span><input id="playground-file-upload-progress-fileName" name="pg_fileName" type="text" value="design-system.zip" /></label><label class="playground-field" for="playground-file-upload-progress-fileSize"><span><strong>file Size</strong><small>string</small></span><input id="playground-file-upload-progress-fileSize" name="pg_fileSize" type="text" value="20 MB" /></label><label class="playground-field" for="playground-file-upload-progress-uploadedSize"><span><strong>uploaded Size</strong><small>string</small></span><input id="playground-file-upload-progress-uploadedSize" name="pg_uploadedSize" type="text" value="8.4 MB" /></label><label class="playground-field" for="playground-file-upload-progress-status"><span><strong>status</strong><small>string</small></span><input id="playground-file-upload-progress-status" name="pg_status" type="text" value="uploading" /></label><label class="playground-field" for="playground-file-upload-progress-cancelLabel"><span><strong>cancel Label</strong><small>string</small></span><input id="playground-file-upload-progress-cancelLabel" name="pg_cancelLabel" type="text" value="File Upload Progress" /></label><label class="playground-field" for="playground-file-upload-progress-retryLabel"><span><strong>retry Label</strong><small>string</small></span><input id="playground-file-upload-progress-retryLabel" name="pg_retryLabel" type="text" value="File Upload Progress" /></label><label class="playground-field" for="playground-file-upload-progress-class"><span><strong>class</strong><small>string</small></span><input id="playground-file-upload-progress-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-file-upload-progress-size"><span><strong>size</strong><small>string</small></span><select id="playground-file-upload-progress-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-file-upload-progress-color"><span><strong>color</strong><small>string</small></span><select id="playground-file-upload-progress-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-file-upload-progress-label"><span><strong>label</strong><small>string</small></span><input id="playground-file-upload-progress-label" name="pg_label" type="text" value="File Upload Progress" /></label><label class="playground-field" for="playground-file-upload-progress-value"><span><strong>value</strong><small>number</small></span><input id="playground-file-upload-progress-value" name="pg_value" type="number" value="36" /></label><label class="playground-field" for="playground-file-upload-progress-max"><span><strong>max</strong><small>number</small></span><input id="playground-file-upload-progress-max" name="pg_max" type="number" value="100" /></label><label class="playground-toggle" for="playground-file-upload-progress-showValue"><span><strong>show Value</strong><small>boolean</small></span><input id="playground-file-upload-progress-showValue" name="pg_showValue" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-file-upload-progress-fileName"><span><strong>file Name</strong><small>string</small></span><input id="playground-file-upload-progress-fileName" name="pg_fileName" type="text" value="" /></label><label class="playground-field" for="playground-file-upload-progress-fileSize"><span><strong>file Size</strong><small>string</small></span><input id="playground-file-upload-progress-fileSize" name="pg_fileSize" type="text" value="" /></label><label class="playground-field" for="playground-file-upload-progress-uploadedSize"><span><strong>uploaded Size</strong><small>string</small></span><input id="playground-file-upload-progress-uploadedSize" name="pg_uploadedSize" type="text" value="" /></label><label class="playground-field" for="playground-file-upload-progress-status"><span><strong>status</strong><small>string</small></span><input id="playground-file-upload-progress-status" name="pg_status" type="text" value="uploading" /></label><label class="playground-field" for="playground-file-upload-progress-cancelLabel"><span><strong>cancel Label</strong><small>string</small></span><input id="playground-file-upload-progress-cancelLabel" name="pg_cancelLabel" type="text" value="File Upload Progress" /></label><label class="playground-field" for="playground-file-upload-progress-retryLabel"><span><strong>retry Label</strong><small>string</small></span><input id="playground-file-upload-progress-retryLabel" name="pg_retryLabel" type="text" value="File Upload Progress" /></label><label class="playground-field" for="playground-file-upload-progress-class"><span><strong>class</strong><small>string</small></span><input id="playground-file-upload-progress-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -62,22 +60,20 @@ page FileUploadProgressDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Basic usage</span><h2>Uploading file</h2><p>Show an active upload with file metadata and a cancel action.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="file-upload-progress-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="FileUploadProgress" size="default" label="Uploading archive" value="42" max="100" showValue="true" fileName="design-system.zip" fileSize="20 MB" uploadedSize="8.4 MB" status="uploading" cancelLabel="File Upload Progress" retryLabel="File Upload Progress" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><FileUploadProgress size="default" label="File Upload Progress" value="36" max="100" showValue="true" cancelLabel="File Upload Progress" retryLabel="File Upload Progress" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Uploading file usage">
+          <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;FileUploadProgress
-  label="Uploading archive"
-  value="42"
-  fileName="design-system.zip"
-  fileSize="20 MB"
-  uploadedSize="8.4 MB"
+  label="File Upload Progress"
+  value="36"
   cancelLabel="File Upload Progress"
   retryLabel="File Upload Progress"
 /&gt;</code></pre>
@@ -86,23 +82,21 @@ page FileUploadProgressDetail {
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Progress</span><h2>Starting upload</h2><p>Communicate that a newly queued file has begun uploading.</p></div>
+          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="file-upload-progress-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="FileUploadProgress" size="sm" label="Preparing upload" value="2" max="100" showValue="true" fileName="product-images.tar" fileSize="48 MB" uploadedSize="640 KB" status="uploading" cancelLabel="Compact example" retryLabel="Compact example" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><FileUploadProgress size="sm" label="Compact example" value="60" max="100" showValue="true" cancelLabel="Compact example" retryLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Starting upload usage">
+          <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;FileUploadProgress
   size="sm"
-  label="Preparing upload"
-  value="2"
-  fileName="product-images.tar"
-  fileSize="48 MB"
-  uploadedSize="640 KB"
+  label="Compact example"
+  value="60"
   cancelLabel="Compact example"
   retryLabel="Compact example"
 /&gt;</code></pre>
@@ -111,121 +105,53 @@ page FileUploadProgressDetail {
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Progress</span><h2>Nearly complete</h2><p>Keep progress and transferred size readable near completion.</p></div>
+          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="file-upload-progress-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="FileUploadProgress" size="lg" label="Uploading video" value="92" max="100" showValue="true" fileName="launch-video.mp4" fileSize="200 MB" uploadedSize="184 MB" status="uploading" cancelLabel="Advanced example" retryLabel="Advanced example" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><FileUploadProgress size="lg" label="Advanced example" value="84" max="100" showValue="true" cancelLabel="Advanced example" retryLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Nearly complete usage">
+          <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;FileUploadProgress
   size="lg"
-  label="Uploading video"
-  value="92"
-  fileName="launch-video.mp4"
-  fileSize="200 MB"
-  uploadedSize="184 MB"
-  cancelLabel="Advanced example"
-  retryLabel="Advanced example"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">States</span><h2>Upload complete</h2><p>Confirm a successful upload with a clear completion state.</p></div>
-          <span class="demo-case-number">04</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="file-upload-progress-demo-4" class="demo-canvas demo-canvas--4">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="FileUploadProgress" size="lg" label="Uploaded successfully" value="100" max="100" showValue="true" fileName="quarterly-report.pdf" fileSize="4.8 MB" uploadedSize="4.8 MB" status="complete" cancelLabel="Advanced example" retryLabel="Advanced example" class="showcase-instance showcase-instance--4"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Upload complete usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;FileUploadProgress
-  size="lg"
-  label="Uploaded successfully"
-  value="100"
-  fileName="quarterly-report.pdf"
-  fileSize="4.8 MB"
-  uploadedSize="4.8 MB"
-  status="complete"
-  cancelLabel="Advanced example"
-  retryLabel="Advanced example"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">States</span><h2>Upload failed</h2><p>Explain failure and provide a retry action.</p></div>
-          <span class="demo-case-number">05</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="file-upload-progress-demo-5" class="demo-canvas demo-canvas--5">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="FileUploadProgress" size="lg" label="Network connection lost" value="33" max="100" showValue="true" fileName="customer-export.csv" fileSize="36 MB" uploadedSize="12 MB" status="error" cancelLabel="Advanced example" retryLabel="Advanced example" class="showcase-instance showcase-instance--5"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Upload failed usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;FileUploadProgress
-  size="lg"
-  label="Network connection lost"
-  value="33"
-  fileName="customer-export.csv"
-  fileSize="36 MB"
-  uploadedSize="12 MB"
-  status="error"
-  cancelLabel="Advanced example"
-  retryLabel="Advanced example"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">States</span><h2>Upload cancelled</h2><p>Preserve file context and allow a cancelled upload to restart.</p></div>
-          <span class="demo-case-number">06</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="file-upload-progress-demo-6" class="demo-canvas demo-canvas--6">
-            <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="FileUploadProgress" size="lg" label="Upload cancelled" value="22" max="100" showValue="true" fileName="brand-assets.fig" fileSize="72 MB" uploadedSize="16 MB" status="cancelled" cancelLabel="Advanced example" retryLabel="Advanced example" class="showcase-instance showcase-instance--6"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Upload cancelled usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;FileUploadProgress
-  size="lg"
-  label="Upload cancelled"
-  value="22"
-  fileName="brand-assets.fig"
-  fileSize="72 MB"
-  uploadedSize="16 MB"
-  status="cancelled"
+  label="Advanced example"
+  value="84"
   cancelLabel="Advanced example"
   retryLabel="Advanced example"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@cancel</code><span>Fires when the current operation is cancelled.</span></div><div><code>@retry</code><span>Fires when the component emits the retry event.</span></div><div><code>@complete</code><span>Fires when the component's operation completes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@cancel</code><span>Fires when the user cancels or dismisses the current workflow.</span></div><div><code>@retry</code><span>Fires when the component emits the retry event.</span></div><div><code>@complete</code><span>Fires when the component emits the complete event.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;FileUploadProgress
+  @cancel='console.log(event.detail)'
+  @retry='console.log(event.detail)'
+  @complete='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"FileUploadProgress\"], [data-component=\"FileUploadProgress\"]")
 
-component.addEventListener('cancel', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("cancel", (event) =&gt; &#123;
+  console.log("cancel", event.detail)
+&#125;)
+
+component?.addEventListener("retry", (event) =&gt; &#123;
+  console.log("retry", event.detail)
+&#125;)
+
+component?.addEventListener("complete", (event) =&gt; &#123;
+  console.log("complete", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Progress"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>number</td><td><code>50</code></td><td>No</td></tr><tr><td><code>max</code></td><td>number</td><td><code>100</code></td><td>No</td></tr><tr><td><code>showValue</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>fileName</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>fileSize</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>uploadedSize</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>status</code></td><td>string</td><td><code>"uploading"</code></td><td>No</td></tr><tr><td><code>cancelLabel</code></td><td>string</td><td><code>"Cancel upload"</code></td><td>No</td></tr><tr><td><code>retryLabel</code></td><td>string</td><td><code>"Retry upload"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#file-upload-progress-demo-1">Uploading file</a><a href="#file-upload-progress-demo-2">Starting upload</a><a href="#file-upload-progress-demo-3">Nearly complete</a><a href="#file-upload-progress-demo-4">Upload complete</a><a href="#file-upload-progress-demo-5">Upload failed</a><a href="#file-upload-progress-demo-6">Upload cancelled</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#file-upload-progress-demo-1">Production default</a><a href="#file-upload-progress-demo-2">Compact application</a><a href="#file-upload-progress-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
       <a href="/components/device-frame"><small>Previous</small><strong>← Device Frame</strong></a>
-      <a href="/components/hero-actions"><small>Next</small><strong>Hero Actions →</strong></a>
+      <a href="/components/legend-indicator"><small>Next</small><strong>Legend Indicator →</strong></a>
     </nav>
   }
 }
diff --git a/examples/component-showcase/app/pages/components/file-upload.wrn b/examples/component-showcase/app/pages/components/file-upload.wrn
index 809a01b5..19ed663c 100644
--- a/examples/component-showcase/app/pages/components/file-upload.wrn
+++ b/examples/component-showcase/app/pages/components/file-upload.wrn
@@ -5,7 +5,7 @@ page FileUploadDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "File Upload example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default file upload for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"file-upload-0-1\",\n    \"key\": \"file-upload-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#file-upload-demo\",\n    \"actionHref\": \"#file-upload-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"file-upload-0-2\",\n    \"key\": \"file-upload-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#file-upload-demo\",\n    \"actionHref\": \"#file-upload-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"file-upload-0-1\",\"key\":\"file-upload-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#file-upload-demo\",\"actionHref\":\"#file-upload-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"file-upload-0-2\",\"key\":\"file-upload-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#file-upload-demo\",\"actionHref\":\"#file-upload-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -25,12 +25,12 @@ page FileUploadDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="FileUpload" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="FileUpload" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="select,upload,progress,success,error,cancel,remove">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure File Upload</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="FileUpload" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><FileUpload size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;FileUpload
@@ -147,6 +147,7 @@ page FileUploadDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -257,7 +258,7 @@ page FileUploadDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-file-upload-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-file-upload-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-file-upload-class"><span><strong>class</strong><small>string</small></span><input id="playground-file-upload-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-file-upload-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-file-upload-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-file-upload-class"><span><strong>class</strong><small>string</small></span><input id="playground-file-upload-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page FileUploadDetail {
         <div class="demo-workbench">
           <div id="file-upload-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="FileUpload" size="default" title="File Upload example" description="A polished default file upload for a modern application." items="[{&quot;id&quot;:&quot;file-upload-0-1&quot;,&quot;key&quot;:&quot;file-upload-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#file-upload-demo&quot;,&quot;actionHref&quot;:&quot;#file-upload-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;file-upload-0-2&quot;,&quot;key&quot;:&quot;file-upload-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#file-upload-demo&quot;,&quot;actionHref&quot;:&quot;#file-upload-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><FileUpload size="default" title="File Upload example" description="A polished default file upload for a modern application." items='[{"id":"file-upload-0-1","key":"file-upload-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#file-upload-demo","actionHref":"#file-upload-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"file-upload-0-2","key":"file-upload-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#file-upload-demo","actionHref":"#file-upload-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -399,7 +401,8 @@ page FileUploadDetail {
         <div class="demo-workbench">
           <div id="file-upload-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="FileUpload" size="sm" title="Compact File Upload" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;file-upload-1-1&quot;,&quot;key&quot;:&quot;file-upload-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#file-upload-demo&quot;,&quot;actionHref&quot;:&quot;#file-upload-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;file-upload-1-2&quot;,&quot;key&quot;:&quot;file-upload-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#file-upload-demo&quot;,&quot;actionHref&quot;:&quot;#file-upload-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><FileUpload size="sm" title="Compact File Upload" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"file-upload-1-1","key":"file-upload-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#file-upload-demo","actionHref":"#file-upload-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"file-upload-1-2","key":"file-upload-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#file-upload-demo","actionHref":"#file-upload-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="secondary" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -528,7 +531,8 @@ page FileUploadDetail {
         <div class="demo-workbench">
           <div id="file-upload-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="FileUpload" size="lg" title="Advanced File Upload" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;file-upload-2-1&quot;,&quot;key&quot;:&quot;file-upload-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#file-upload-demo&quot;,&quot;actionHref&quot;:&quot;#file-upload-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;file-upload-2-2&quot;,&quot;key&quot;:&quot;file-upload-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#file-upload-demo&quot;,&quot;actionHref&quot;:&quot;#file-upload-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><FileUpload size="lg" title="Advanced File Upload" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"file-upload-2-1","key":"file-upload-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#file-upload-demo","actionHref":"#file-upload-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"file-upload-2-2","key":"file-upload-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#file-upload-demo","actionHref":"#file-upload-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' variant="success" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -649,11 +653,43 @@ page FileUploadDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@upload</code><span>Fires when the component emits the upload event.</span></div><div><code>@progress</code><span>Fires as an operation reports progress.</span></div><div><code>@success</code><span>Fires when the component operation succeeds.</span></div><div><code>@error</code><span>Fires when the component encounters an error.</span></div><div><code>@cancel</code><span>Fires when the current operation is cancelled.</span></div><div><code>@remove</code><span>Fires when the component emits the remove event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div><div><code>@upload</code><span>Fires when the component emits the upload event.</span></div><div><code>@progress</code><span>Fires when the component emits the progress event.</span></div><div><code>@success</code><span>Fires when the component emits the success event.</span></div><div><code>@error</code><span>Fires when the component cannot complete an operation.</span></div><div><code>@cancel</code><span>Fires when the user cancels or dismisses the current workflow.</span></div><div><code>@remove</code><span>Fires when the component emits the remove event.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;FileUpload
+  @select='console.log(event.detail)'
+  @upload='console.log(event.detail)'
+  @progress='console.log(event.detail)'
+  @success='console.log(event.detail)'
+  @error='console.log(event.detail)'
+  @cancel='console.log(event.detail)'
+  @remove='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"FileUpload\"], [data-component=\"FileUpload\"]")
 
-component.addEventListener('select', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)
+
+component?.addEventListener("upload", (event) =&gt; &#123;
+  console.log("upload", event.detail)
+&#125;)
+
+component?.addEventListener("progress", (event) =&gt; &#123;
+  console.log("progress", event.detail)
+&#125;)
+
+component?.addEventListener("success", (event) =&gt; &#123;
+  console.log("success", event.detail)
+&#125;)
+
+component?.addEventListener("error", (event) =&gt; &#123;
+  console.log("error", event.detail)
+&#125;)
+
+component?.addEventListener("cancel", (event) =&gt; &#123;
+  console.log("cancel", event.detail)
+&#125;)
+
+component?.addEventListener("remove", (event) =&gt; &#123;
+  console.log("remove", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"File Upload"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
diff --git a/examples/component-showcase/app/pages/components/footer.wrn b/examples/component-showcase/app/pages/components/footer.wrn
index f9768900..7c84dab9 100644
--- a/examples/component-showcase/app/pages/components/footer.wrn
+++ b/examples/component-showcase/app/pages/components/footer.wrn
@@ -4,34 +4,34 @@ page FooterDetail {
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_label = ctx.url.searchParams.get("pg_label") ?? "Footer"
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"footer-0-1\",\n    \"key\": \"footer-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#footer-demo\",\n    \"actionHref\": \"#footer-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"footer-0-2\",\n    \"key\": \"footer-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#footer-demo\",\n    \"actionHref\": \"#footer-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
-  state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "3"
-  state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "compact"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"type\":\"header\",\"label\":\"Product\",\"description\":\"Build consistent interfaces with WRNexusJS.\",\"items\":[{\"label\":\"Components\",\"href\":\"/base\"},{\"label\":\"Themes\",\"href\":\"/themes\"},{\"label\":\"Examples\",\"href\":\"/blocks\"}]},{\"type\":\"header\",\"label\":\"Developers\",\"items\":[{\"label\":\"Documentation\",\"href\":\"/docs\"},{\"label\":\"Installation\",\"href\":\"/installation\"},{\"label\":\"Framework guides\",\"href\":\"/framework-guides\"}]},{\"type\":\"header\",\"label\":\"Resources\",\"items\":[{\"label\":\"Accessibility\",\"href\":\"/accessibility\"},{\"label\":\"Design tokens\",\"href\":\"/colors\"},{\"label\":\"Typography\",\"href\":\"/fonts\"}]},{\"type\":\"header\",\"label\":\"Company\",\"items\":[{\"label\":\"WorkRoot\",\"href\":\"https://workroot.in\",\"external\":true},{\"label\":\"WRNexusJS\",\"href\":\"https://wrnexusjs.dev\",\"external\":true}]}]")
+  state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "4")
+  state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "wide"
   state playground_copyright = ctx.url.searchParams.get("pg_copyright") ?? ""
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Footer"
-    description = "Responsive application footer with structured links and pre/post content slots."
+    description = "Render structured responsive footer navigation, pre and post content, copyright content, links, and public events."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/navigation">Navigation</a><span aria-hidden="true">/</span><span>Footer</span>
+      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/layout">Layout</a><span aria-hidden="true">/</span><span>Footer</span>
     </nav>
     <header class="detail-hero">
       <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Navigation component</span>
+        <span class="showcase-eyebrow">Layout component</span>
         <h1>Footer</h1>
-        <p>Responsive application footer with structured links and pre/post content slots.</p>
+        <p>Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.</p>
         <div class="detail-badges"><span>8 props</span><span>4 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Footer" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Footer" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="select,action">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Footer</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="Footer" size="{playground_size}" color="{playground_color}" label="{playground_label}" items="{playground_items}" columns="{playground_columns}" maxWidth="{playground_maxWidth}" copyright="{playground_copyright}" class="{playground_class}"><div slot="pre-footer" class="showcase-slot">pre-footer slot</div><div slot="post-footer" class="showcase-slot">post-footer slot</div><div slot="copyright-left" class="showcase-slot">copyright-left slot</div><div slot="copyright-right" class="showcase-slot">copyright-right slot</div></div></div>
+          <div class="playground-preview-source" data-playground-preview><Footer size='{playground_size}' color='{playground_color}' label='{playground_label}' items='{playground_items}' columns='{playground_columns}' maxWidth='{playground_maxWidth}' copyright='{playground_copyright}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Footer
@@ -144,121 +144,98 @@ page FooterDetail {
       ]
     &#125;
   ]'&gt;
-  &lt;!-- Add pre-footer, post-footer, copyright-left, copyright-right slot content here --&gt;
+  &lt;div data-slot="pre-footer"&gt;
+    &lt;div class="showcase-slot"&gt;pre-footer slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="post-footer"&gt;
+    &lt;div class="showcase-slot"&gt;post-footer slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="copyright-left"&gt;
+    &lt;div class="showcase-slot"&gt;copyright-left slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="copyright-right"&gt;
+    &lt;div class="showcase-slot"&gt;copyright-right slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/Footer&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-footer-size"><span><strong>size</strong><small>string</small></span><select id="playground-footer-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-footer-color"><span><strong>color</strong><small>string</small></span><select id="playground-footer-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-footer-label"><span><strong>label</strong><small>string</small></span><input id="playground-footer-label" name="pg_label" type="text" value="Footer" /></label><label class="playground-field" for="playground-footer-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-footer-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+          <div class="playground-fields"><label class="playground-field" for="playground-footer-size"><span><strong>size</strong><small>string</small></span><select id="playground-footer-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="spacious">spacious</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-footer-color"><span><strong>color</strong><small>string</small></span><select id="playground-footer-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-footer-label"><span><strong>label</strong><small>string</small></span><input id="playground-footer-label" name="pg_label" type="text" value="Footer" /></label><label class="playground-field" for="playground-footer-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-footer-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
-    "id": "footer-0-1",
-    "key": "footer-0-1",
-    "value": "primary",
-    "label": "Primary workflow",
-    "title": "Primary workflow",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "A configurable sample message.",
-    "href": "#footer-demo",
-    "actionHref": "#footer-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": true,
-    "selected": true,
-    "checked": true,
-    "disabled": false,
-    "outgoing": false,
-    "open": true,
-    "number": 1,
-    "count": 16,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 1",
+    "type": "header",
+    "label": "Product",
+    "description": "Build consistent interfaces with WRNexusJS.",
     "items": [
       {
-        "label": "Nested option A",
-        "value": "nested-a"
+        "label": "Components",
+        "href": "/base"
       },
       {
-        "label": "Nested option B",
-        "value": "nested-b"
-      }
-    ],
-    "links": [
-      {
-        "label": "Documentation",
-        "href": "#documentation"
+        "label": "Themes",
+        "href": "/themes"
       },
       {
-        "label": "API reference",
-        "href": "#api-reference"
+        "label": "Examples",
+        "href": "/blocks"
       }
-    ],
-    "values": [
-      "Included",
-      "Standard"
     ]
   },
   {
-    "id": "footer-0-2",
-    "key": "footer-0-2",
-    "value": "secondary",
-    "label": "Additional option",
-    "title": "Supporting example",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "Another configurable message.",
-    "href": "#footer-demo",
-    "actionHref": "#footer-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": false,
-    "selected": false,
-    "checked": false,
-    "disabled": false,
-    "outgoing": true,
-    "open": true,
-    "number": 2,
-    "count": 32,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 2",
+    "type": "header",
+    "label": "Developers",
     "items": [
-      {
-        "label": "Nested option A",
-        "value": "nested-a"
-      },
-      {
-        "label": "Nested option B",
-        "value": "nested-b"
-      }
-    ],
-    "links": [
       {
         "label": "Documentation",
-        "href": "#documentation"
+        "href": "/docs"
       },
       {
-        "label": "API reference",
-        "href": "#api-reference"
+        "label": "Installation",
+        "href": "/installation"
+      },
+      {
+        "label": "Framework guides",
+        "href": "/framework-guides"
+      }
+    ]
+  },
+  {
+    "type": "header",
+    "label": "Resources",
+    "items": [
+      {
+        "label": "Accessibility",
+        "href": "/accessibility"
+      },
+      {
+        "label": "Design tokens",
+        "href": "/colors"
+      },
+      {
+        "label": "Typography",
+        "href": "/fonts"
+      }
+    ]
+  },
+  {
+    "type": "header",
+    "label": "Company",
+    "items": [
+      {
+        "label": "WorkRoot",
+        "href": "https://workroot.in",
+        "external": true
+      },
+      {
+        "label": "WRNexusJS",
+        "href": "https://wrnexusjs.dev",
+        "external": true
       }
-    ],
-    "values": [
-      "Included",
-      "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-footer-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-footer-columns" name="pg_columns" type="number" value="3" /></label><label class="playground-field" for="playground-footer-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-footer-maxWidth" name="pg_maxWidth" type="text" value="compact" /></label><label class="playground-field" for="playground-footer-copyright"><span><strong>copyright</strong><small>string</small></span><input id="playground-footer-copyright" name="pg_copyright" type="text" value="" /></label><label class="playground-field" for="playground-footer-class"><span><strong>class</strong><small>string</small></span><input id="playground-footer-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-footer-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-footer-columns" name="pg_columns" type="number" value="4" /></label><label class="playground-field" for="playground-footer-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-footer-maxWidth" name="pg_maxWidth"><option value="wide" selected>wide</option><option value="compact">compact</option><option value="xl">xl</option><option value="full">full</option><option value="lg">lg</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-footer-copyright"><span><strong>copyright</strong><small>string</small></span><input id="playground-footer-copyright" name="pg_copyright" type="text" value="" /></label><label class="playground-field" for="playground-footer-class"><span><strong>class</strong><small>string</small></span><input id="playground-footer-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -267,401 +244,330 @@ page FooterDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Four-column public footer</h2><p>Organize product, developer, resource, and company links into responsive columns.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="footer-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Footer" size="default" label="Footer" items="[{&quot;id&quot;:&quot;footer-0-1&quot;,&quot;key&quot;:&quot;footer-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#footer-demo&quot;,&quot;actionHref&quot;:&quot;#footer-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;footer-0-2&quot;,&quot;key&quot;:&quot;footer-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#footer-demo&quot;,&quot;actionHref&quot;:&quot;#footer-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" columns="3" class="showcase-instance showcase-instance--1"><div slot="pre-footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>pre-footer slot</span></div><div slot="post-footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>post-footer slot</span></div><div slot="copyright-left" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>copyright-left slot</span></div><div slot="copyright-right" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>copyright-right slot</span></div></div></div>
+            
+            <div class="demo-render"><Footer size="default" label="Footer" items='[{"type":"header","label":"Product","description":"Build consistent interfaces with WRNexusJS.","items":[{"label":"Components","href":"/base"},{"label":"Themes","href":"/themes"},{"label":"Examples","href":"/blocks"}]},{"type":"header","label":"Developers","items":[{"label":"Documentation","href":"/docs"},{"label":"Installation","href":"/installation"},{"label":"Framework guides","href":"/framework-guides"}]},{"type":"header","label":"Resources","items":[{"label":"Accessibility","href":"/accessibility"},{"label":"Design tokens","href":"/colors"},{"label":"Typography","href":"/fonts"}]},{"type":"header","label":"Company","items":[{"label":"WorkRoot","href":"https://workroot.in","external":true},{"label":"WRNexusJS","href":"https://wrnexusjs.dev","external":true}]}]' columns="4" maxWidth="wide" copyright="© 2026 WRNexusJS. All rights reserved." class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Four-column public footer usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Footer
   label="Footer"
   items='[
     &#123;
-      "id": "footer-0-1",
-      "key": "footer-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#footer-demo",
-      "actionHref": "#footer-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
+      "type": "header",
+      "label": "Product",
+      "description": "Build consistent interfaces with WRNexusJS.",
       "items": [
         &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
+          "label": "Components",
+          "href": "/base"
         &#125;,
         &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
+          "label": "Themes",
+          "href": "/themes"
         &#125;,
         &#123;
-          "label": "API reference",
-          "href": "#api-reference"
+          "label": "Examples",
+          "href": "/blocks"
         &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
       ]
     &#125;,
     &#123;
-      "id": "footer-0-2",
-      "key": "footer-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#footer-demo",
-      "actionHref": "#footer-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
+      "type": "header",
+      "label": "Developers",
       "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
         &#123;
           "label": "Documentation",
-          "href": "#documentation"
+          "href": "/docs"
         &#125;,
         &#123;
-          "label": "API reference",
-          "href": "#api-reference"
+          "label": "Installation",
+          "href": "/installation"
+        &#125;,
+        &#123;
+          "label": "Framework guides",
+          "href": "/framework-guides"
+        &#125;
+      ]
+    &#125;,
+    &#123;
+      "type": "header",
+      "label": "Resources",
+      "items": [
+        &#123;
+          "label": "Accessibility",
+          "href": "/accessibility"
+        &#125;,
+        &#123;
+          "label": "Design tokens",
+          "href": "/colors"
+        &#125;,
+        &#123;
+          "label": "Typography",
+          "href": "/fonts"
+        &#125;
+      ]
+    &#125;,
+    &#123;
+      "type": "header",
+      "label": "Company",
+      "items": [
+        &#123;
+          "label": "WorkRoot",
+          "href": "https://workroot.in",
+          "external": true
+        &#125;,
+        &#123;
+          "label": "WRNexusJS",
+          "href": "https://wrnexusjs.dev",
+          "external": true
         &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
       ]
     &#125;
-  ]'&gt;
-  &lt;!-- Add pre-footer, post-footer, copyright-left, copyright-right slot content here --&gt;
+  ]'
+  columns="4"
+  maxWidth="wide"
+  copyright="© 2026 WRNexusJS. All rights reserved."&gt;
+  &lt;div data-slot="pre-footer"&gt;
+    &lt;div class="showcase-slot"&gt;pre-footer slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="post-footer"&gt;
+    &lt;div class="showcase-slot"&gt;post-footer slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="copyright-left"&gt;
+    &lt;div class="showcase-slot"&gt;copyright-left slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="copyright-right"&gt;
+    &lt;div class="showcase-slot"&gt;copyright-right slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/Footer&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
+          <div><span class="demo-case-eyebrow">Compact</span><h2>Compact application footer</h2><p>Use fewer columns and reduced spacing inside product applications.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="footer-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Footer" size="sm" label="Compact example" items="[{&quot;id&quot;:&quot;footer-1-1&quot;,&quot;key&quot;:&quot;footer-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#footer-demo&quot;,&quot;actionHref&quot;:&quot;#footer-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;footer-1-2&quot;,&quot;key&quot;:&quot;footer-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#footer-demo&quot;,&quot;actionHref&quot;:&quot;#footer-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" columns="3" class="showcase-instance showcase-instance--2"><div slot="pre-footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>pre-footer slot</span></div><div slot="post-footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>post-footer slot</span></div><div slot="copyright-left" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>copyright-left slot</span></div><div slot="copyright-right" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>copyright-right slot</span></div></div></div>
+            
+            <div class="demo-render"><Footer size="compact" label="Compact example" items='[{"type":"header","label":"Product","description":"Build consistent interfaces with WRNexusJS.","items":[{"label":"Components","href":"/base"},{"label":"Themes","href":"/themes"},{"label":"Examples","href":"/blocks"}]},{"type":"header","label":"Developers","items":[{"label":"Documentation","href":"/docs"},{"label":"Installation","href":"/installation"},{"label":"Framework guides","href":"/framework-guides"}]},{"type":"header","label":"Resources","items":[{"label":"Accessibility","href":"/accessibility"},{"label":"Design tokens","href":"/colors"},{"label":"Typography","href":"/fonts"}]}]' columns="3" maxWidth="compact" copyright="WRNexusJS component showcase" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Compact application footer usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Footer
-  size="sm"
+  size="compact"
   label="Compact example"
   items='[
     &#123;
-      "id": "footer-1-1",
-      "key": "footer-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#footer-demo",
-      "actionHref": "#footer-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
+      "type": "header",
+      "label": "Product",
+      "description": "Build consistent interfaces with WRNexusJS.",
       "items": [
         &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
+          "label": "Components",
+          "href": "/base"
         &#125;,
         &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
+          "label": "Themes",
+          "href": "/themes"
         &#125;,
         &#123;
-          "label": "API reference",
-          "href": "#api-reference"
+          "label": "Examples",
+          "href": "/blocks"
         &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
       ]
     &#125;,
     &#123;
-      "id": "footer-1-2",
-      "key": "footer-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#footer-demo",
-      "actionHref": "#footer-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
+      "type": "header",
+      "label": "Developers",
       "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
         &#123;
           "label": "Documentation",
-          "href": "#documentation"
+          "href": "/docs"
         &#125;,
         &#123;
-          "label": "API reference",
-          "href": "#api-reference"
+          "label": "Installation",
+          "href": "/installation"
+        &#125;,
+        &#123;
+          "label": "Framework guides",
+          "href": "/framework-guides"
+        &#125;
+      ]
+    &#125;,
+    &#123;
+      "type": "header",
+      "label": "Resources",
+      "items": [
+        &#123;
+          "label": "Accessibility",
+          "href": "/accessibility"
+        &#125;,
+        &#123;
+          "label": "Design tokens",
+          "href": "/colors"
+        &#125;,
+        &#123;
+          "label": "Typography",
+          "href": "/fonts"
         &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
       ]
     &#125;
-  ]'&gt;
-  &lt;!-- Add pre-footer, post-footer, copyright-left, copyright-right slot content here --&gt;
+  ]'
+  copyright="WRNexusJS component showcase"&gt;
+  &lt;div data-slot="pre-footer"&gt;
+    &lt;div class="showcase-slot"&gt;pre-footer slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="post-footer"&gt;
+    &lt;div class="showcase-slot"&gt;post-footer slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="copyright-left"&gt;
+    &lt;div class="showcase-slot"&gt;copyright-left slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="copyright-right"&gt;
+    &lt;div class="showcase-slot"&gt;copyright-right slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/Footer&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Full-width footer with slots</h2><p>Compose pre-footer, post-footer, and legal content around structured navigation.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="footer-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Footer" size="lg" label="Advanced example" items="[{&quot;id&quot;:&quot;footer-2-1&quot;,&quot;key&quot;:&quot;footer-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#footer-demo&quot;,&quot;actionHref&quot;:&quot;#footer-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;footer-2-2&quot;,&quot;key&quot;:&quot;footer-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#footer-demo&quot;,&quot;actionHref&quot;:&quot;#footer-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" columns="3" class="showcase-instance showcase-instance--3"><div slot="pre-footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>pre-footer slot</span></div><div slot="post-footer" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>post-footer slot</span></div><div slot="copyright-left" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>copyright-left slot</span></div><div slot="copyright-right" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>copyright-right slot</span></div></div></div>
+            
+            <div class="demo-render"><Footer size="spacious" label="Advanced example" items='[{"type":"header","label":"Product","description":"Build consistent interfaces with WRNexusJS.","items":[{"label":"Components","href":"/base"},{"label":"Themes","href":"/themes"},{"label":"Examples","href":"/blocks"}]},{"type":"header","label":"Developers","items":[{"label":"Documentation","href":"/docs"},{"label":"Installation","href":"/installation"},{"label":"Framework guides","href":"/framework-guides"}]},{"type":"header","label":"Resources","items":[{"label":"Accessibility","href":"/accessibility"},{"label":"Design tokens","href":"/colors"},{"label":"Typography","href":"/fonts"}]},{"type":"header","label":"Company","items":[{"label":"WorkRoot","href":"https://workroot.in","external":true},{"label":"WRNexusJS","href":"https://wrnexusjs.dev","external":true}]}]' columns="4" maxWidth="full" copyright="Built with WRNexusJS" class="showcase-instance showcase-instance--3"><div data-slot="pre-footer"><div class="showcase-footer-banner"><strong>Stay informed</strong><a href="#notifications">Manage notifications</a></div></div><div data-slot="copyright-right"><div class="showcase-footer-legal"><a href="#privacy">Privacy</a><a href="#terms">Terms</a></div></div></Footer></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Full-width footer with slots usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Footer
-  size="lg"
+  size="spacious"
   label="Advanced example"
   items='[
     &#123;
-      "id": "footer-2-1",
-      "key": "footer-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#footer-demo",
-      "actionHref": "#footer-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
+      "type": "header",
+      "label": "Product",
+      "description": "Build consistent interfaces with WRNexusJS.",
       "items": [
         &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
+          "label": "Components",
+          "href": "/base"
         &#125;,
         &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
+          "label": "Themes",
+          "href": "/themes"
         &#125;,
         &#123;
-          "label": "API reference",
-          "href": "#api-reference"
+          "label": "Examples",
+          "href": "/blocks"
         &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
       ]
     &#125;,
     &#123;
-      "id": "footer-2-2",
-      "key": "footer-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#footer-demo",
-      "actionHref": "#footer-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
+      "type": "header",
+      "label": "Developers",
       "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
         &#123;
           "label": "Documentation",
-          "href": "#documentation"
+          "href": "/docs"
         &#125;,
         &#123;
-          "label": "API reference",
-          "href": "#api-reference"
+          "label": "Installation",
+          "href": "/installation"
+        &#125;,
+        &#123;
+          "label": "Framework guides",
+          "href": "/framework-guides"
+        &#125;
+      ]
+    &#125;,
+    &#123;
+      "type": "header",
+      "label": "Resources",
+      "items": [
+        &#123;
+          "label": "Accessibility",
+          "href": "/accessibility"
+        &#125;,
+        &#123;
+          "label": "Design tokens",
+          "href": "/colors"
+        &#125;,
+        &#123;
+          "label": "Typography",
+          "href": "/fonts"
+        &#125;
+      ]
+    &#125;,
+    &#123;
+      "type": "header",
+      "label": "Company",
+      "items": [
+        &#123;
+          "label": "WorkRoot",
+          "href": "https://workroot.in",
+          "external": true
+        &#125;,
+        &#123;
+          "label": "WRNexusJS",
+          "href": "https://wrnexusjs.dev",
+          "external": true
         &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
       ]
     &#125;
-  ]'&gt;
-  &lt;!-- Add pre-footer, post-footer, copyright-left, copyright-right slot content here --&gt;
+  ]'
+  columns="4"
+  maxWidth="full"
+  copyright="Built with WRNexusJS"&gt;
+  &lt;div data-slot="pre-footer"&gt;
+    &lt;div class="showcase-footer-banner"&gt;&lt;strong&gt;Stay informed&lt;/strong&gt;&lt;a href="#notifications"&gt;Manage notifications&lt;/a&gt;&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="post-footer"&gt;
+    &lt;div class="showcase-slot"&gt;post-footer slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="copyright-left"&gt;
+    &lt;div class="showcase-slot"&gt;copyright-left slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="copyright-right"&gt;
+    &lt;div class="showcase-footer-legal"&gt;&lt;a href="#privacy"&gt;Privacy&lt;/a&gt;&lt;a href="#terms"&gt;Terms&lt;/a&gt;&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/Footer&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@action</code><span>Fires when the component's action is selected.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div><div><code>@action</code><span>Fires when the component's primary or item action is activated.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;Footer
+  @select='console.log(event.detail)'
+  @action='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"Footer\"], [data-component=\"Footer\"]")
 
-component.addEventListener('select', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)
+
+component?.addEventListener("action", (event) =&gt; &#123;
+  console.log("action", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Footer navigation"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>3</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"compact"</code></td><td>No</td></tr><tr><td><code>copyright</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#footer-demo-1">Production default</a><a href="#footer-demo-2">Compact application</a><a href="#footer-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#footer-demo-1">Four-column public footer</a><a href="#footer-demo-2">Compact application footer</a><a href="#footer-demo-3">Full-width footer with slots</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/breadcrumb"><small>Previous</small><strong>← Breadcrumb</strong></a>
-      <a href="/components/mega-menu"><small>Next</small><strong>Mega Menu →</strong></a>
+      <a href="/components/feature-grid"><small>Previous</small><strong>← Feature Grid</strong></a>
+      <a href="/components/grid"><small>Next</small><strong>Grid →</strong></a>
     </nav>
   }
 }
diff --git a/examples/component-showcase/app/pages/components/grid.wrn b/examples/component-showcase/app/pages/components/grid.wrn
index a43602b7..9aac6963 100644
--- a/examples/component-showcase/app/pages/components/grid.wrn
+++ b/examples/component-showcase/app/pages/components/grid.wrn
@@ -3,13 +3,13 @@ page GridDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "2"
+  state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "2")
   state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md"
   state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Grid"
-    description = "Theme-aware, responsive grid component."
+    description = "Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -19,26 +19,27 @@ page GridDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Layout component</span>
         <h1>Grid</h1>
-        <p>Theme-aware, responsive grid component.</p>
+        <p>Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width.</p>
         <div class="detail-badges"><span>6 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Grid" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Grid" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Grid</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="Grid" size="{playground_size}" color="{playground_color}" columns="{playground_columns}" gap="{playground_gap}" maxWidth="{playground_maxWidth}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Grid size='{playground_size}' color='{playground_color}' columns='{playground_columns}' gap='{playground_gap}' maxWidth='{playground_maxWidth}' class='{playground_class}'><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span></div></Grid></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Grid /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-grid-size"><span><strong>size</strong><small>string</small></span><select id="playground-grid-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option><option value="compact">compact</option></select></label><label class="playground-field" for="playground-grid-color"><span><strong>color</strong><small>string</small></span><select id="playground-grid-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-grid-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-grid-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-grid-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-grid-gap" name="pg_gap"><option value="md" selected>md</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option></select></label><label class="playground-field" for="playground-grid-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-grid-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="md">md</option><option value="lg">lg</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-field" for="playground-grid-class"><span><strong>class</strong><small>string</small></span><input id="playground-grid-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-grid-size"><span><strong>size</strong><small>string</small></span><select id="playground-grid-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-grid-color"><span><strong>color</strong><small>string</small></span><select id="playground-grid-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-grid-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-grid-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-grid-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-grid-gap" name="pg_gap"><option value="md" selected>md</option><option value="none">none</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="xs">xs</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-grid-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-grid-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-field" for="playground-grid-class"><span><strong>class</strong><small>string</small></span><input id="playground-grid-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -47,65 +48,78 @@ page GridDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Responsive three-column grid</h2><p>Arrange equal-width children with consistent gaps.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="grid-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Grid" size="default" columns="2" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Grid size="default" columns="3" gap="md" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span></div></Grid></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Responsive three-column grid usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Grid /&gt;</code></pre>
+            <pre><code>&lt;Grid
+  columns="3"&gt;
+  &lt;div class="showcase-grid-items"&gt;&lt;span&gt;One&lt;/span&gt;&lt;span&gt;Two&lt;/span&gt;&lt;span&gt;Three&lt;/span&gt;&lt;/div&gt;
+&lt;/Grid&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
+          <div><span class="demo-case-eyebrow">Compact</span><h2>Dense four-column grid</h2><p>Use smaller gaps for dashboards and compact overview pages.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="grid-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Grid" size="sm" columns="2" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Grid size="compact" columns="4" gap="sm" maxWidth="wide" class="showcase-instance showcase-instance--2"><div class="showcase-grid-items"><span>One</span><span>Two</span><span>Three</span><span>Four</span></div></Grid></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Dense four-column grid usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Grid
-  size="sm"
-/&gt;</code></pre>
+  size="compact"
+  columns="4"
+  gap="sm"
+  maxWidth="wide"&gt;
+  &lt;div class="showcase-grid-items"&gt;&lt;span&gt;One&lt;/span&gt;&lt;span&gt;Two&lt;/span&gt;&lt;span&gt;Three&lt;/span&gt;&lt;span&gt;Four&lt;/span&gt;&lt;/div&gt;
+&lt;/Grid&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Full-width two-column grid</h2><p>Use larger gaps for editorial or marketing split layouts.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="grid-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Grid" size="lg" columns="2" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Grid size="spacious" columns="2" gap="xl" maxWidth="full" class="showcase-instance showcase-instance--3"><div class="showcase-grid-items"><span>Primary</span><span>Secondary</span></div></Grid></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Full-width two-column grid usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Grid
-  size="lg"
-/&gt;</code></pre>
+  size="spacious"
+  gap="xl"
+  maxWidth="full"&gt;
+  &lt;div class="showcase-grid-items"&gt;&lt;span&gt;Primary&lt;/span&gt;&lt;span&gt;Secondary&lt;/span&gt;&lt;/div&gt;
+&lt;/Grid&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
+        
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#grid-demo-1">Production default</a><a href="#grid-demo-2">Compact application</a><a href="#grid-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#grid-demo-1">Responsive three-column grid</a><a href="#grid-demo-2">Dense four-column grid</a><a href="#grid-demo-3">Full-width two-column grid</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/feature-grid"><small>Previous</small><strong>← Feature Grid</strong></a>
+      <a href="/components/footer"><small>Previous</small><strong>← Footer</strong></a>
       <a href="/components/image"><small>Next</small><strong>Image →</strong></a>
     </nav>
   }
diff --git a/examples/component-showcase/app/pages/components/hero-actions.wrn b/examples/component-showcase/app/pages/components/hero-actions.wrn
index 7dd3b248..ead93339 100644
--- a/examples/component-showcase/app/pages/components/hero-actions.wrn
+++ b/examples/component-showcase/app/pages/components/hero-actions.wrn
@@ -1,37 +1,37 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page HeroActionsDetail {
   layout = "showcase"
-  state playground_actions = ctx.url.searchParams.get("pg_actions") ?? "[\n  {\n    \"id\": \"hero-actions-0-1\",\n    \"key\": \"hero-actions-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#hero-actions-demo\",\n    \"actionHref\": \"#hero-actions-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"hero-actions-0-2\",\n    \"key\": \"hero-actions-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#hero-actions-demo\",\n    \"actionHref\": \"#hero-actions-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_actions = JSON.parse(ctx.url.searchParams.get("pg_actions") ?? "[{\"label\":\"Browse components\",\"href\":\"#components\",\"icon\":\"icon-[lucide--blocks]\",\"variant\":\"primary\"},{\"label\":\"View metrics\",\"href\":\"#metrics\",\"icon\":\"icon-[lucide--chart-no-axes-column-increasing]\",\"variant\":\"outline\"}]")
   state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
   state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal"
-  state playground_stackOnMobile = ctx.url.searchParams.get("pg_stackOnMobile") ?? "true"
-  state playground_fullWidthMobile = ctx.url.searchParams.get("pg_fullWidthMobile") ?? "true"
+  state playground_stackOnMobile = (ctx.url.searchParams.get("pg_stackOnMobile") ?? "true") === "true"
+  state playground_fullWidthMobile = (ctx.url.searchParams.get("pg_fullWidthMobile") ?? "true") === "true"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Hero Actions"
-    description = "Responsive action group for hero and call-to-action sections."
+    description = "Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/base">Base</a><span aria-hidden="true">/</span><span>Hero Actions</span>
+      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/marketing">Marketing</a><span aria-hidden="true">/</span><span>Hero Actions</span>
     </nav>
     <header class="detail-hero">
       <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Base component</span>
+        <span class="showcase-eyebrow">Marketing component</span>
         <h1>Hero Actions</h1>
-        <p>Responsive action group for hero and call-to-action sections.</p>
+        <p>Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.</p>
         <div class="detail-badges"><span>8 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="HeroActions" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="HeroActions" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Hero Actions</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="HeroActions" actions="{playground_actions}" align="{playground_align}" orientation="{playground_orientation}" stackOnMobile="{playground_stackOnMobile}" fullWidthMobile="{playground_fullWidthMobile}" size="{playground_size}" color="{playground_color}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><HeroActions actions='{playground_actions}' align='{playground_align}' orientation='{playground_orientation}' stackOnMobile='{playground_stackOnMobile}' fullWidthMobile='{playground_fullWidthMobile}' size='{playground_size}' color='{playground_color}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;HeroActions
@@ -147,117 +147,24 @@ page HeroActionsDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
           <div class="playground-fields"><label class="playground-field" for="playground-hero-actions-actions"><span><strong>actions</strong><small>string</small></span><textarea id="playground-hero-actions-actions" name="pg_actions" rows="5" spellcheck="false" data-playground-json>[
   {
-    "id": "hero-actions-0-1",
-    "key": "hero-actions-0-1",
-    "value": "primary",
-    "label": "Primary workflow",
-    "title": "Primary workflow",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "A configurable sample message.",
-    "href": "#hero-actions-demo",
-    "actionHref": "#hero-actions-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": true,
-    "selected": true,
-    "checked": true,
-    "disabled": false,
-    "outgoing": false,
-    "open": true,
-    "number": 1,
-    "count": 16,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 1",
-    "items": [
-      {
-        "label": "Nested option A",
-        "value": "nested-a"
-      },
-      {
-        "label": "Nested option B",
-        "value": "nested-b"
-      }
-    ],
-    "links": [
-      {
-        "label": "Documentation",
-        "href": "#documentation"
-      },
-      {
-        "label": "API reference",
-        "href": "#api-reference"
-      }
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
+    "label": "Browse components",
+    "href": "#components",
+    "icon": "icon-[lucide--blocks]",
+    "variant": "primary"
   },
   {
-    "id": "hero-actions-0-2",
-    "key": "hero-actions-0-2",
-    "value": "secondary",
-    "label": "Additional option",
-    "title": "Supporting example",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "Another configurable message.",
-    "href": "#hero-actions-demo",
-    "actionHref": "#hero-actions-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": false,
-    "selected": false,
-    "checked": false,
-    "disabled": false,
-    "outgoing": true,
-    "open": true,
-    "number": 2,
-    "count": 32,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 2",
-    "items": [
-      {
-        "label": "Nested option A",
-        "value": "nested-a"
-      },
-      {
-        "label": "Nested option B",
-        "value": "nested-b"
-      }
-    ],
-    "links": [
-      {
-        "label": "Documentation",
-        "href": "#documentation"
-      },
-      {
-        "label": "API reference",
-        "href": "#api-reference"
-      }
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
+    "label": "View metrics",
+    "href": "#metrics",
+    "icon": "icon-[lucide--chart-no-axes-column-increasing]",
+    "variant": "outline"
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-hero-actions-align"><span><strong>align</strong><small>string</small></span><select id="playground-hero-actions-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="end">end</option><option value="right">right</option></select></label><label class="playground-field" for="playground-hero-actions-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-hero-actions-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-toggle" for="playground-hero-actions-stackOnMobile"><span><strong>stack On Mobile</strong><small>boolean</small></span><input id="playground-hero-actions-stackOnMobile" name="pg_stackOnMobile" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-hero-actions-fullWidthMobile"><span><strong>full Width Mobile</strong><small>boolean</small></span><input id="playground-hero-actions-fullWidthMobile" name="pg_fullWidthMobile" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-hero-actions-size"><span><strong>size</strong><small>string</small></span><select id="playground-hero-actions-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-hero-actions-color"><span><strong>color</strong><small>string</small></span><select id="playground-hero-actions-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-hero-actions-class"><span><strong>class</strong><small>string</small></span><input id="playground-hero-actions-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-hero-actions-align"><span><strong>align</strong><small>string</small></span><select id="playground-hero-actions-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-hero-actions-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-hero-actions-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-toggle" for="playground-hero-actions-stackOnMobile"><span><strong>stack On Mobile</strong><small>boolean</small></span><input id="playground-hero-actions-stackOnMobile" name="pg_stackOnMobile" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-hero-actions-fullWidthMobile"><span><strong>full Width Mobile</strong><small>boolean</small></span><input id="playground-hero-actions-fullWidthMobile" name="pg_fullWidthMobile" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-hero-actions-size"><span><strong>size</strong><small>string</small></span><select id="playground-hero-actions-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-hero-actions-color"><span><strong>color</strong><small>string</small></span><select id="playground-hero-actions-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-hero-actions-class"><span><strong>class</strong><small>string</small></span><input id="playground-hero-actions-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -266,249 +173,62 @@ page HeroActionsDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Primary and secondary actions</h2><p>Group the most important hero actions with consistent spacing and hierarchy.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="hero-actions-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="HeroActions" actions="[{&quot;id&quot;:&quot;hero-actions-0-1&quot;,&quot;key&quot;:&quot;hero-actions-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#hero-actions-demo&quot;,&quot;actionHref&quot;:&quot;#hero-actions-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;hero-actions-0-2&quot;,&quot;key&quot;:&quot;hero-actions-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#hero-actions-demo&quot;,&quot;actionHref&quot;:&quot;#hero-actions-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" align="start" stackOnMobile="true" fullWidthMobile="true" size="default" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><HeroActions actions='[{"label":"Browse components","href":"#components","icon":"icon-[lucide--blocks]","variant":"primary"},{"label":"View metrics","href":"#metrics","icon":"icon-[lucide--chart-no-axes-column-increasing]","variant":"outline"}]' align="left" orientation="horizontal" stackOnMobile="true" fullWidthMobile="true" size="default" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Primary and secondary actions usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;HeroActions
   actions='[
     &#123;
-      "id": "hero-actions-0-1",
-      "key": "hero-actions-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#hero-actions-demo",
-      "actionHref": "#hero-actions-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "Browse components",
+      "href": "#components",
+      "icon": "icon-[lucide--blocks]",
+      "variant": "primary"
     &#125;,
     &#123;
-      "id": "hero-actions-0-2",
-      "key": "hero-actions-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#hero-actions-demo",
-      "actionHref": "#hero-actions-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "View metrics",
+      "href": "#metrics",
+      "icon": "icon-[lucide--chart-no-axes-column-increasing]",
+      "variant": "outline"
     &#125;
   ]'
-  align="start"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
+          <div><span class="demo-case-eyebrow">Compact</span><h2>Centered campaign actions</h2><p>Center actions beneath a stacked hero or CTA message.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="hero-actions-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="HeroActions" actions="[{&quot;id&quot;:&quot;hero-actions-1-1&quot;,&quot;key&quot;:&quot;hero-actions-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#hero-actions-demo&quot;,&quot;actionHref&quot;:&quot;#hero-actions-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;hero-actions-1-2&quot;,&quot;key&quot;:&quot;hero-actions-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#hero-actions-demo&quot;,&quot;actionHref&quot;:&quot;#hero-actions-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" align="center" stackOnMobile="true" fullWidthMobile="true" size="sm" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><HeroActions actions='[{"label":"Browse components","href":"#components","icon":"icon-[lucide--blocks]","variant":"primary"},{"label":"View metrics","href":"#metrics","icon":"icon-[lucide--chart-no-axes-column-increasing]","variant":"outline"}]' align="center" orientation="horizontal" stackOnMobile="true" fullWidthMobile="true" size="sm" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Centered campaign actions usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;HeroActions
   actions='[
     &#123;
-      "id": "hero-actions-1-1",
-      "key": "hero-actions-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#hero-actions-demo",
-      "actionHref": "#hero-actions-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "Browse components",
+      "href": "#components",
+      "icon": "icon-[lucide--blocks]",
+      "variant": "primary"
     &#125;,
     &#123;
-      "id": "hero-actions-1-2",
-      "key": "hero-actions-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#hero-actions-demo",
-      "actionHref": "#hero-actions-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "View metrics",
+      "href": "#metrics",
+      "icon": "icon-[lucide--chart-no-axes-column-increasing]",
+      "variant": "outline"
     &#125;
   ]'
   align="center"
@@ -519,141 +239,55 @@ page HeroActionsDetail {
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Vertical mobile-first actions</h2><p>Use a vertical group for narrow panels, onboarding, or three-action flows.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="hero-actions-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="HeroActions" actions="[{&quot;id&quot;:&quot;hero-actions-2-1&quot;,&quot;key&quot;:&quot;hero-actions-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#hero-actions-demo&quot;,&quot;actionHref&quot;:&quot;#hero-actions-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;hero-actions-2-2&quot;,&quot;key&quot;:&quot;hero-actions-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#hero-actions-demo&quot;,&quot;actionHref&quot;:&quot;#hero-actions-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" align="end" stackOnMobile="true" fullWidthMobile="true" size="lg" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><HeroActions actions='[{"label":"Browse components","href":"#components","icon":"icon-[lucide--blocks]","variant":"primary"},{"label":"View metrics","href":"#metrics","icon":"icon-[lucide--chart-no-axes-column-increasing]","variant":"outline"},{"label":"Contact support","href":"#support","icon":"icon-[lucide--life-buoy]","variant":"ghost"}]' align="end" orientation="vertical" stackOnMobile="true" fullWidthMobile="true" size="lg" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Vertical mobile-first actions usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;HeroActions
   actions='[
     &#123;
-      "id": "hero-actions-2-1",
-      "key": "hero-actions-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#hero-actions-demo",
-      "actionHref": "#hero-actions-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
+      "label": "Browse components",
+      "href": "#components",
+      "icon": "icon-[lucide--blocks]",
+      "variant": "primary"
     &#125;,
     &#123;
-      "id": "hero-actions-2-2",
-      "key": "hero-actions-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#hero-actions-demo",
-      "actionHref": "#hero-actions-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
+      "label": "View metrics",
+      "href": "#metrics",
+      "icon": "icon-[lucide--chart-no-axes-column-increasing]",
+      "variant": "outline"
+    &#125;,
+    &#123;
+      "label": "Contact support",
+      "href": "#support",
+      "icon": "icon-[lucide--life-buoy]",
+      "variant": "ghost"
     &#125;
   ]'
   align="end"
+  orientation="vertical"
   size="lg"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
+        
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>actions</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>stackOnMobile</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>fullWidthMobile</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#hero-actions-demo-1">Production default</a><a href="#hero-actions-demo-2">Compact application</a><a href="#hero-actions-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#hero-actions-demo-1">Primary and secondary actions</a><a href="#hero-actions-demo-2">Centered campaign actions</a><a href="#hero-actions-demo-3">Vertical mobile-first actions</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/file-upload-progress"><small>Previous</small><strong>← File Upload Progress</strong></a>
-      <a href="/components/legend-indicator"><small>Next</small><strong>Legend Indicator →</strong></a>
+      <a href="/components/hero"><small>Previous</small><strong>← Hero</strong></a>
+      <a href="/components/marketing-section-header"><small>Next</small><strong>Marketing Section Header →</strong></a>
     </nav>
   }
 }
diff --git a/examples/component-showcase/app/pages/components/hero.wrn b/examples/component-showcase/app/pages/components/hero.wrn
index b2fe97db..38dc63eb 100644
--- a/examples/component-showcase/app/pages/components/hero.wrn
+++ b/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_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_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl"
+  state playground_tertiaryIcon = ctx.url.searchParams.get("pg_tertiaryIcon") ?? ""
+  state playground_tertiaryTarget = ctx.url.searchParams.get("pg_tertiaryTarget") ?? ""
+  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>
-        <div class="detail-badges"><span>20 props</span><span>6 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <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>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>
-          <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>[
+          <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-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-visualEyebrow" name="pg_visualEyebrow" type="text" value="" /></label><label class="playground-field" for="playground-hero-visualTitle"><span><strong>visual Title</strong><small>string</small></span><input id="playground-hero-visualTitle" name="pg_visualTitle" type="text" value="Hero example" /></label><label class="playground-field" for="playground-hero-visualDescription"><span><strong>visual Description</strong><small>string</small></span><input id="playground-hero-visualDescription" name="pg_visualDescription" type="text" value="A polished default hero for a modern application." /></label><label class="playground-field" for="playground-hero-visualIcon"><span><strong>visual Icon</strong><small>string</small></span><input id="playground-hero-visualIcon" name="pg_visualIcon" type="text" value="" /></label><label class="playground-field" for="playground-hero-visualImage"><span><strong>visual Image</strong><small>string</small></span><input id="playground-hero-visualImage" name="pg_visualImage" type="text" value="" /></label><label class="playground-field" for="playground-hero-visualAlt"><span><strong>visual Alt</strong><small>string</small></span><input id="playground-hero-visualAlt" name="pg_visualAlt" type="text" value="" /></label><label class="playground-field" for="playground-hero-visualItems"><span><strong>visual Items</strong><small>string</small></span><textarea id="playground-hero-visualItems" name="pg_visualItems" rows="5" spellcheck="false" data-playground-json>[
+  {
+    "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-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;]}]" class="showcase-instance showcase-instance--1"><div slot="eyebrow" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>eyebrow 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 slot="trust" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>trust 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"><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","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"]}]' maxWidth="wide" 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></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"
-  description="A polished default hero for a modern application."
+  eyebrow="Reusable public UI"
+  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"
-  primaryHref="#hero-demo"
-  secondaryLabel="Hero"
-  secondaryHref="#hero-demo"
+  variant="gradient"
+  visualStyle="card"
+  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="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;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;]}]" class="showcase-instance showcase-instance--2"><div slot="eyebrow" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>eyebrow 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 slot="trust" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>trust 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"><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":"#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"]}]' 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 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"
-  description="A compact configuration for dashboards and dense product surfaces."
+  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="sm"
-  variant="secondary"
-  primaryLabel="Compact example"
-  primaryHref="#hero-demo"
+  variant="soft"
+  layout="stacked"
+  visualTitle="Compact Hero"
+  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;:&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;]}]" class="showcase-instance showcase-instance--3"><div slot="eyebrow" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>eyebrow 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 slot="trust" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>trust 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"><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"
-  description="A richer configuration demonstrating additional content and hierarchy."
+  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="success"
-  primaryLabel="Advanced example"
-  primaryHref="#hero-demo"
-  secondaryLabel="Advanced example"
-  secondaryHref="#hero-demo"
-  tertiaryLabel="Advanced example"
-  tertiaryHref="#hero-demo"
-  badges='[
+  variant="raised"
+  visualPosition="left"
+  visualStyle="soft"
+  visualTitle="Advanced Hero"
+  visualDescription="A richer configuration demonstrating additional content and hierarchy."
+  visualItems='[
     &#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;
-      "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": [
-        &#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;
+    "108 UI components",
+    "Light and dark themes",
+    "Mobile ready"
   ]'&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>
   }
 }
diff --git a/examples/component-showcase/app/pages/components/image.wrn b/examples/component-showcase/app/pages/components/image.wrn
index ce164439..b1df4370 100644
--- a/examples/component-showcase/app/pages/components/image.wrn
+++ b/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">
diff --git a/examples/component-showcase/app/pages/components/input-group.wrn b/examples/component-showcase/app/pages/components/input-group.wrn
index d52a72bf..99c7bd68 100644
--- a/examples/component-showcase/app/pages/components/input-group.wrn
+++ b/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_name = ctx.url.searchParams.get("pg_name") ?? "input-groupField"
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Workspace"
-  state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? ""
-  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter input group"
+  state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
+  state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Input Group"
+  state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true"
+  state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
+  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
   state playground_type = ctx.url.searchParams.get("pg_type") ?? "text"
-  state playground_startText = ctx.url.searchParams.get("pg_startText") ?? "https://"
-  state playground_endText = ctx.url.searchParams.get("pg_endText") ?? ".app"
+  state playground_startText = ctx.url.searchParams.get("pg_startText") ?? ""
+  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_helperText = ctx.url.searchParams.get("pg_helperText") ?? "Helpful context for this field."
+  state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Input Group"
+  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_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   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"
-  name="input-groupField"
-  label="Workspace"
-  placeholder="Enter input group"
-  startText="https://"
-  endText=".app"
-  actionLabel="Check"
-  helperText="Helpful context for this field."
+  label="Input Group"
+  value="sample-1"
+  placeholder="Enter a sample value"
+  actionLabel="Input 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>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-input-group-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-input-group-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-input-group-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-group-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-input-group-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-group-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-input-group-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-input-group-class" name="pg_class" type="text" value="" /></label></div>
+          <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><input id="playground-input-group-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-toggle" for="playground-input-group-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-input-group-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-group-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-input-group-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-group-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-input-group-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-input-group-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </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"
-  name="input-groupField"
-  label="Workspace"
-  placeholder="Enter input group"
-  startText="https://"
-  endText=".app"
-  actionLabel="Check"
-  helperText="Helpful context for this field."
+  label="Input Group"
+  value="sample-1"
+  placeholder="Enter a sample value"
+  actionLabel="Input Group"
 /&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"
-  name="input-groupField"
-  label="Workspace"
-  placeholder="Enter input group"
-  startText="https://"
-  endText=".app"
-  icon="icon-[lucide--sparkles]"
-  variant="outlined"
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+  icon="icon-[lucide--arrow-right]"
+  actionLabel="Compact example"
+  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="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"
-  name="input-groupField"
-  label="Workspace"
-  placeholder="Enter input group"
-  startText="https://"
-  endText=".app"
-  icon="icon-[lucide--circle-user-round]"
-  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"
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+  icon="icon-[lucide--trash-2]"
+  actionLabel="Advanced example"
+  variant="success"
 /&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;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("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">
diff --git a/examples/component-showcase/app/pages/components/input-number.wrn b/examples/component-showcase/app/pages/components/input-number.wrn
index b1292606..7c538a1b 100644
--- a/examples/component-showcase/app/pages/components/input-number.wrn
+++ b/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_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
-  state playground_inputDisabled = ctx.url.searchParams.get("pg_inputDisabled") ?? "false"
-  state playground_buttonsDisabled = ctx.url.searchParams.get("pg_buttonsDisabled") ?? "false"
-  state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
-  state playground_allowInput = ctx.url.searchParams.get("pg_allowInput") ?? "true"
-  state playground_keyboard = ctx.url.searchParams.get("pg_keyboard") ?? "true"
-  state playground_wheel = ctx.url.searchParams.get("pg_wheel") ?? "false"
-  state playground_clamp = ctx.url.searchParams.get("pg_clamp") ?? "true"
-  state playground_fullWidth = ctx.url.searchParams.get("pg_fullWidth") ?? "false"
-  state playground_showButtons = ctx.url.searchParams.get("pg_showButtons") ?? "true"
-  state playground_showValidationMessage = ctx.url.searchParams.get("pg_showValidationMessage") ?? "true"
+  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  state playground_inputDisabled = (ctx.url.searchParams.get("pg_inputDisabled") ?? "false") === "true"
+  state playground_buttonsDisabled = (ctx.url.searchParams.get("pg_buttonsDisabled") ?? "false") === "true"
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
+  state playground_allowInput = (ctx.url.searchParams.get("pg_allowInput") ?? "true") === "true"
+  state playground_keyboard = (ctx.url.searchParams.get("pg_keyboard") ?? "true") === "true"
+  state playground_wheel = (ctx.url.searchParams.get("pg_wheel") ?? "false") === "true"
+  state playground_clamp = (ctx.url.searchParams.get("pg_clamp") ?? "true") === "true"
+  state playground_fullWidth = (ctx.url.searchParams.get("pg_fullWidth") ?? "false") === "true"
+  state playground_showButtons = (ctx.url.searchParams.get("pg_showButtons") ?? "true") === "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" 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-autocomplete" name="pg_autocomplete" type="text" value="off" /></label><label class="playground-field" for="playground-input-number-inputMode"><span><strong>input Mode</strong><small>string</small></span><input id="playground-input-number-inputMode" name="pg_inputMode" type="text" value="decimal" /></label><label class="playground-field" for="playground-input-number-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-input-number-ariaLabel" name="pg_ariaLabel" type="text" value="" /></label><label class="playground-toggle" for="playground-input-number-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-input-number-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-input-number-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-inputDisabled"><span><strong>input Disabled</strong><small>boolean</small></span><input id="playground-input-number-inputDisabled" name="pg_inputDisabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-buttonsDisabled"><span><strong>buttons Disabled</strong><small>boolean</small></span><input id="playground-input-number-buttonsDisabled" name="pg_buttonsDisabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-input-number-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-allowInput"><span><strong>allow Input</strong><small>boolean</small></span><input id="playground-input-number-allowInput" name="pg_allowInput" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-keyboard"><span><strong>keyboard</strong><small>boolean</small></span><input id="playground-input-number-keyboard" name="pg_keyboard" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-wheel"><span><strong>wheel</strong><small>boolean</small></span><input id="playground-input-number-wheel" name="pg_wheel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-clamp"><span><strong>clamp</strong><small>boolean</small></span><input id="playground-input-number-clamp" name="pg_clamp" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-fullWidth"><span><strong>full Width</strong><small>boolean</small></span><input id="playground-input-number-fullWidth" name="pg_fullWidth" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-showButtons"><span><strong>show Buttons</strong><small>boolean</small></span><input id="playground-input-number-showButtons" name="pg_showButtons" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-showValidationMessage"><span><strong>show Validation Message</strong><small>boolean</small></span><input id="playground-input-number-showValidationMessage" name="pg_showValidationMessage" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-number-decrementLabel"><span><strong>decrement Label</strong><small>string</small></span><input id="playground-input-number-decrementLabel" name="pg_decrementLabel" type="text" value="Decrease value" /></label><label class="playground-field" for="playground-input-number-incrementLabel"><span><strong>increment Label</strong><small>string</small></span><input id="playground-input-number-incrementLabel" name="pg_incrementLabel" type="text" value="Increase value" /></label><label class="playground-field" for="playground-input-number-controlsLabel"><span><strong>controls Label</strong><small>string</small></span><input id="playground-input-number-controlsLabel" name="pg_controlsLabel" type="text" value="Quantity controls" /></label><label class="playground-field" for="playground-input-number-requiredMessage"><span><strong>required Message</strong><small>string</small></span><input id="playground-input-number-requiredMessage" name="pg_requiredMessage" type="text" value="A value is required." /></label><label class="playground-field" for="playground-input-number-minMessage"><span><strong>min Message</strong><small>string</small></span><input id="playground-input-number-minMessage" name="pg_minMessage" type="text" value="Value is below the minimum." /></label><label class="playground-field" for="playground-input-number-maxMessage"><span><strong>max Message</strong><small>string</small></span><input id="playground-input-number-maxMessage" name="pg_maxMessage" type="text" value="Value is above the maximum." /></label></div>
+          <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-autocomplete" name="pg_autocomplete" type="text" value="off" /></label><label class="playground-field" for="playground-input-number-inputMode"><span><strong>input Mode</strong><small>string</small></span><input id="playground-input-number-inputMode" name="pg_inputMode" type="text" value="decimal" /></label><label class="playground-field" for="playground-input-number-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-input-number-ariaLabel" name="pg_ariaLabel" type="text" value="" /></label><label class="playground-toggle" for="playground-input-number-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-input-number-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-input-number-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-inputDisabled"><span><strong>input Disabled</strong><small>boolean</small></span><input id="playground-input-number-inputDisabled" name="pg_inputDisabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-buttonsDisabled"><span><strong>buttons Disabled</strong><small>boolean</small></span><input id="playground-input-number-buttonsDisabled" name="pg_buttonsDisabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-input-number-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-allowInput"><span><strong>allow Input</strong><small>boolean</small></span><input id="playground-input-number-allowInput" name="pg_allowInput" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-keyboard"><span><strong>keyboard</strong><small>boolean</small></span><input id="playground-input-number-keyboard" name="pg_keyboard" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-wheel"><span><strong>wheel</strong><small>boolean</small></span><input id="playground-input-number-wheel" name="pg_wheel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-clamp"><span><strong>clamp</strong><small>boolean</small></span><input id="playground-input-number-clamp" name="pg_clamp" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-fullWidth"><span><strong>full Width</strong><small>boolean</small></span><input id="playground-input-number-fullWidth" name="pg_fullWidth" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-showButtons"><span><strong>show Buttons</strong><small>boolean</small></span><input id="playground-input-number-showButtons" name="pg_showButtons" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-input-number-showValidationMessage"><span><strong>show Validation Message</strong><small>boolean</small></span><input id="playground-input-number-showValidationMessage" name="pg_showValidationMessage" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-input-number-decrementLabel"><span><strong>decrement Label</strong><small>string</small></span><input id="playground-input-number-decrementLabel" name="pg_decrementLabel" type="text" value="Decrease value" /></label><label class="playground-field" for="playground-input-number-incrementLabel"><span><strong>increment Label</strong><small>string</small></span><input id="playground-input-number-incrementLabel" name="pg_incrementLabel" type="text" value="Increase value" /></label><label class="playground-field" for="playground-input-number-controlsLabel"><span><strong>controls Label</strong><small>string</small></span><input id="playground-input-number-controlsLabel" name="pg_controlsLabel" type="text" value="Quantity controls" /></label><label class="playground-field" for="playground-input-number-requiredMessage"><span><strong>required Message</strong><small>string</small></span><input id="playground-input-number-requiredMessage" name="pg_requiredMessage" type="text" value="A value is required." /></label><label class="playground-field" for="playground-input-number-minMessage"><span><strong>min Message</strong><small>string</small></span><input id="playground-input-number-minMessage" name="pg_minMessage" type="text" value="Value is below the minimum." /></label><label class="playground-field" for="playground-input-number-maxMessage"><span><strong>max Message</strong><small>string</small></span><input id="playground-input-number-maxMessage" name="pg_maxMessage" type="text" value="Value is above the maximum." /></label></div>
         </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;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("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">
diff --git a/examples/component-showcase/app/pages/components/input.wrn b/examples/component-showcase/app/pages/components/input.wrn
index 2692b16e..6853d135 100644
--- a/examples/component-showcase/app/pages/components/input.wrn
+++ b/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_name = ctx.url.searchParams.get("pg_name") ?? "inputField"
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Email address"
-  state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
-  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter input"
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? ""
-  state playground_type = ctx.url.searchParams.get("pg_type") ?? "email"
+  state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
+  state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Input"
+  state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true"
+  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
+  state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
+  state playground_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_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
-  state playground_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? "email"
+  state playground_inline = (ctx.url.searchParams.get("pg_inline") ?? "false") === "true"
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
+  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"
-  name="inputField"
-  label="Email address"
-  placeholder="Enter input"
-  type="email"
-  helperText="Helpful context for this field."
-  autocomplete="email"
+  placeholder="Enter a sample value"
+  value="sample-1"
 /&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-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"></i></label><label class="playground-field" for="playground-input-autocomplete"><span><strong>autocomplete</strong><small>string</small></span><input id="playground-input-autocomplete" name="pg_autocomplete" type="text" value="email" /></label><label class="playground-field" for="playground-input-inputmode"><span><strong>inputmode</strong><small>string</small></span><input id="playground-input-inputmode" name="pg_inputmode" type="text" value="" /></label><label class="playground-field" for="playground-input-minlength"><span><strong>minlength</strong><small>string</small></span><input id="playground-input-minlength" name="pg_minlength" type="text" value="" /></label><label class="playground-field" for="playground-input-maxlength"><span><strong>maxlength</strong><small>string</small></span><input id="playground-input-maxlength" name="pg_maxlength" type="text" value="" /></label><label class="playground-field" for="playground-input-pattern"><span><strong>pattern</strong><small>string</small></span><input id="playground-input-pattern" name="pg_pattern" type="text" value="" /></label><label class="playground-field" for="playground-input-min"><span><strong>min</strong><small>string</small></span><input id="playground-input-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-input-max"><span><strong>max</strong><small>string</small></span><input id="playground-input-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-input-step"><span><strong>step</strong><small>string</small></span><input id="playground-input-step" name="pg_step" type="text" value="" /></label><label class="playground-field" for="playground-input-class"><span><strong>class</strong><small>string</small></span><input id="playground-input-class" name="pg_class" type="text" value="" /></label></div>
+          <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"></i></label><label class="playground-field" for="playground-input-autocomplete"><span><strong>autocomplete</strong><small>string</small></span><input id="playground-input-autocomplete" name="pg_autocomplete" type="text" value="" /></label><label class="playground-field" for="playground-input-inputmode"><span><strong>inputmode</strong><small>string</small></span><input id="playground-input-inputmode" name="pg_inputmode" type="text" value="" /></label><label class="playground-field" for="playground-input-minlength"><span><strong>minlength</strong><small>string</small></span><input id="playground-input-minlength" name="pg_minlength" type="text" value="" /></label><label class="playground-field" for="playground-input-maxlength"><span><strong>maxlength</strong><small>string</small></span><input id="playground-input-maxlength" name="pg_maxlength" type="text" value="" /></label><label class="playground-field" for="playground-input-pattern"><span><strong>pattern</strong><small>string</small></span><input id="playground-input-pattern" name="pg_pattern" type="text" value="" /></label><label class="playground-field" for="playground-input-min"><span><strong>min</strong><small>string</small></span><input id="playground-input-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-input-max"><span><strong>max</strong><small>string</small></span><input id="playground-input-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-input-step"><span><strong>step</strong><small>string</small></span><input id="playground-input-step" name="pg_step" type="text" value="" /></label><label class="playground-field" for="playground-input-class"><span><strong>class</strong><small>string</small></span><input id="playground-input-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </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"
-  name="inputField"
-  label="Email address"
-  placeholder="Enter input"
-  type="email"
-  helperText="Helpful context for this field."
-  autocomplete="email"
+  placeholder="Enter a sample value"
+  value="sample-1"
 /&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"
-  name="inputField"
-  label="Email address"
-  placeholder="Enter input"
-  type="email"
-  variant="outlined"
-  icon="icon-[lucide--sparkles]"
-  autocomplete="email"
+  size="sm"
+  label="Compact example"
+  placeholder="Enter a sample value"
+  value="sample-2"
+  variant="secondary"
+  icon="icon-[lucide--arrow-right]"
 /&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"
-  name="inputField"
-  label="Email address"
-  placeholder="Enter input"
-  type="email"
-  variant="floating"
-  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"
+  size="lg"
+  label="Advanced example"
+  placeholder="Search by name, email, or identifier"
+  value="sample-3"
+  variant="success"
+  icon="icon-[lucide--trash-2]"
 /&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;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("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">
diff --git a/examples/component-showcase/app/pages/components/kbd.wrn b/examples/component-showcase/app/pages/components/kbd.wrn
index e943f5f4..ea8db112 100644
--- a/examples/component-showcase/app/pages/components/kbd.wrn
+++ b/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">
diff --git a/examples/component-showcase/app/pages/components/layout-splitter.wrn b/examples/component-showcase/app/pages/components/layout-splitter.wrn
index f115989c..943dab7d 100644
--- a/examples/component-showcase/app/pages/components/layout-splitter.wrn
+++ b/examples/component-showcase/app/pages/components/layout-splitter.wrn
@@ -3,7 +3,7 @@ page LayoutSplitterDetail {
   layout = "showcase"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "2"
+  state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "2")
   state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md"
   state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
@@ -24,21 +24,22 @@ page LayoutSplitterDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="LayoutSplitter" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="LayoutSplitter" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="resizeStart,resize,resizeEnd">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Layout Splitter</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="LayoutSplitter" size="{playground_size}" color="{playground_color}" columns="{playground_columns}" gap="{playground_gap}" maxWidth="{playground_maxWidth}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><LayoutSplitter size='{playground_size}' color='{playground_color}' columns='{playground_columns}' gap='{playground_gap}' maxWidth='{playground_maxWidth}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;LayoutSplitter /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>6 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-layout-splitter-size"><span><strong>size</strong><small>string</small></span><select id="playground-layout-splitter-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-layout-splitter-color"><span><strong>color</strong><small>string</small></span><select id="playground-layout-splitter-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-layout-splitter-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-layout-splitter-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-layout-splitter-gap"><span><strong>gap</strong><small>string</small></span><input id="playground-layout-splitter-gap" name="pg_gap" type="text" value="md" /></label><label class="playground-field" for="playground-layout-splitter-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-layout-splitter-maxWidth" name="pg_maxWidth" type="text" value="xl" /></label><label class="playground-field" for="playground-layout-splitter-class"><span><strong>class</strong><small>string</small></span><input id="playground-layout-splitter-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-layout-splitter-size"><span><strong>size</strong><small>string</small></span><select id="playground-layout-splitter-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-layout-splitter-color"><span><strong>color</strong><small>string</small></span><select id="playground-layout-splitter-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-layout-splitter-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-layout-splitter-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-layout-splitter-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-layout-splitter-gap" name="pg_gap"><option value="md" selected>md</option><option value="none">none</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-layout-splitter-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-layout-splitter-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option><option value="full">full</option></select></label><label class="playground-field" for="playground-layout-splitter-class"><span><strong>class</strong><small>string</small></span><input id="playground-layout-splitter-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -53,7 +54,8 @@ page LayoutSplitterDetail {
         <div class="demo-workbench">
           <div id="layout-splitter-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="LayoutSplitter" size="default" columns="2" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><LayoutSplitter size="default" columns="2" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -69,7 +71,8 @@ page LayoutSplitterDetail {
         <div class="demo-workbench">
           <div id="layout-splitter-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="LayoutSplitter" size="sm" columns="2" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><LayoutSplitter size="sm" columns="2" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -87,7 +90,8 @@ page LayoutSplitterDetail {
         <div class="demo-workbench">
           <div id="layout-splitter-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="LayoutSplitter" size="lg" columns="2" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><LayoutSplitter size="lg" columns="2" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -97,11 +101,23 @@ page LayoutSplitterDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@resizeStart</code><span>Fires when the component emits the resize Start event.</span></div><div><code>@resize</code><span>Fires when the component emits the resize event.</span></div><div><code>@resizeEnd</code><span>Fires when the component emits the resize End event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@resizeStart</code><span>Fires when the component emits the resizeStart event.</span></div><div><code>@resize</code><span>Fires when the component emits the resize event.</span></div><div><code>@resizeEnd</code><span>Fires when the component emits the resizeEnd event.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;LayoutSplitter
+  @resizeStart='console.log(event.detail)'
+  @resize='console.log(event.detail)'
+  @resizeEnd='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"LayoutSplitter\"], [data-component=\"LayoutSplitter\"]")
 
-component.addEventListener('resizeStart', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("resizeStart", (event) =&gt; &#123;
+  console.log("resizeStart", event.detail)
+&#125;)
+
+component?.addEventListener("resize", (event) =&gt; &#123;
+  console.log("resize", event.detail)
+&#125;)
+
+component?.addEventListener("resizeEnd", (event) =&gt; &#123;
+  console.log("resizeEnd", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
diff --git a/examples/component-showcase/app/pages/components/legend-indicator.wrn b/examples/component-showcase/app/pages/components/legend-indicator.wrn
index 60c0b06f..b58cc6a3 100644
--- a/examples/component-showcase/app/pages/components/legend-indicator.wrn
+++ b/examples/component-showcase/app/pages/components/legend-indicator.wrn
@@ -5,7 +5,7 @@ page LegendIndicatorDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Legend Indicator example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default legend indicator for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"legend-indicator-0-1\",\n    \"key\": \"legend-indicator-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#legend-indicator-demo\",\n    \"actionHref\": \"#legend-indicator-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"legend-indicator-0-2\",\n    \"key\": \"legend-indicator-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#legend-indicator-demo\",\n    \"actionHref\": \"#legend-indicator-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"legend-indicator-0-1\",\"key\":\"legend-indicator-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#legend-indicator-demo\",\"actionHref\":\"#legend-indicator-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"legend-indicator-0-2\",\"key\":\"legend-indicator-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#legend-indicator-demo\",\"actionHref\":\"#legend-indicator-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -25,12 +25,12 @@ page LegendIndicatorDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="LegendIndicator" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="LegendIndicator" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="toggle,select">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Legend Indicator</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="LegendIndicator" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><LegendIndicator size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;LegendIndicator
@@ -147,6 +147,7 @@ page LegendIndicatorDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -257,7 +258,7 @@ page LegendIndicatorDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-legend-indicator-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-legend-indicator-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-legend-indicator-class"><span><strong>class</strong><small>string</small></span><input id="playground-legend-indicator-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-legend-indicator-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-legend-indicator-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-legend-indicator-class"><span><strong>class</strong><small>string</small></span><input id="playground-legend-indicator-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page LegendIndicatorDetail {
         <div class="demo-workbench">
           <div id="legend-indicator-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="LegendIndicator" size="default" title="Legend Indicator example" description="A polished default legend indicator for a modern application." items="[{&quot;id&quot;:&quot;legend-indicator-0-1&quot;,&quot;key&quot;:&quot;legend-indicator-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionHref&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;legend-indicator-0-2&quot;,&quot;key&quot;:&quot;legend-indicator-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionHref&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><LegendIndicator size="default" title="Legend Indicator example" description="A polished default legend indicator for a modern application." items='[{"id":"legend-indicator-0-1","key":"legend-indicator-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#legend-indicator-demo","actionHref":"#legend-indicator-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"legend-indicator-0-2","key":"legend-indicator-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#legend-indicator-demo","actionHref":"#legend-indicator-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -399,7 +401,8 @@ page LegendIndicatorDetail {
         <div class="demo-workbench">
           <div id="legend-indicator-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="LegendIndicator" size="sm" title="Compact Legend Indicator" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;legend-indicator-1-1&quot;,&quot;key&quot;:&quot;legend-indicator-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionHref&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;legend-indicator-1-2&quot;,&quot;key&quot;:&quot;legend-indicator-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionHref&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><LegendIndicator size="sm" title="Compact Legend Indicator" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"legend-indicator-1-1","key":"legend-indicator-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#legend-indicator-demo","actionHref":"#legend-indicator-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"legend-indicator-1-2","key":"legend-indicator-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#legend-indicator-demo","actionHref":"#legend-indicator-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="secondary" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -528,7 +531,8 @@ page LegendIndicatorDetail {
         <div class="demo-workbench">
           <div id="legend-indicator-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="LegendIndicator" size="lg" title="Advanced Legend Indicator" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;legend-indicator-2-1&quot;,&quot;key&quot;:&quot;legend-indicator-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionHref&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;legend-indicator-2-2&quot;,&quot;key&quot;:&quot;legend-indicator-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionHref&quot;:&quot;#legend-indicator-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><LegendIndicator size="lg" title="Advanced Legend Indicator" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"legend-indicator-2-1","key":"legend-indicator-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#legend-indicator-demo","actionHref":"#legend-indicator-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"legend-indicator-2-2","key":"legend-indicator-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#legend-indicator-demo","actionHref":"#legend-indicator-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' variant="success" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -649,11 +653,18 @@ page LegendIndicatorDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@toggle</code><span>Fires when the component toggles between states.</span></div><div><code>@select</code><span>Fires when an item or option is selected.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@toggle</code><span>Fires when the component changes between open and closed or on and off states.</span></div><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;LegendIndicator
+  @toggle='console.log(event.detail)'
+  @select='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"LegendIndicator\"], [data-component=\"LegendIndicator\"]")
 
-component.addEventListener('toggle', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("toggle", (event) =&gt; &#123;
+  console.log("toggle", event.detail)
+&#125;)
+
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Legend Indicator"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
@@ -661,7 +672,7 @@ component.addEventListener('toggle', (event) =&gt; &#123;
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/hero-actions"><small>Previous</small><strong>← Hero Actions</strong></a>
+      <a href="/components/file-upload-progress"><small>Previous</small><strong>← File Upload Progress</strong></a>
       <a href="/components/list"><small>Next</small><strong>List →</strong></a>
     </nav>
   }
diff --git a/examples/component-showcase/app/pages/components/link.wrn b/examples/component-showcase/app/pages/components/link.wrn
index af94d8a9..694c1055 100644
--- a/examples/component-showcase/app/pages/components/link.wrn
+++ b/examples/component-showcase/app/pages/components/link.wrn
@@ -7,11 +7,11 @@ page LinkDetail {
   state playground_href = ctx.url.searchParams.get("pg_href") ?? "#link-demo"
   state playground_target = ctx.url.searchParams.get("pg_target") ?? ""
   state playground_rel = ctx.url.searchParams.get("pg_rel") ?? ""
-  state playground_external = ctx.url.searchParams.get("pg_external") ?? "false"
+  state playground_external = (ctx.url.searchParams.get("pg_external") ?? "false") === "true"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Link"
-    description = "Theme-aware, responsive link component."
+    description = "Render an accessible internal or external link with target, relation, size, color, and public focus or click events."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -21,17 +21,17 @@ page LinkDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Layout component</span>
         <h1>Link</h1>
-        <p>Theme-aware, responsive link component.</p>
+        <p>Render an accessible internal or external link with target, relation, size, color, and public focus or click events.</p>
         <div class="detail-badges"><span>8 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Link" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Link" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Link</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="Link" size="{playground_size}" color="{playground_color}" label="{playground_label}" href="{playground_href}" target="{playground_target}" rel="{playground_rel}" external="{playground_external}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Link size='{playground_size}' color='{playground_color}' label='{playground_label}' href='{playground_href}' target='{playground_target}' rel='{playground_rel}' external='{playground_external}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Link
@@ -39,10 +39,11 @@ page LinkDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-link-size"><span><strong>size</strong><small>string</small></span><select id="playground-link-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-link-color"><span><strong>color</strong><small>string</small></span><select id="playground-link-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option><option value="neutral">neutral</option></select></label><label class="playground-field" for="playground-link-label"><span><strong>label</strong><small>string</small></span><input id="playground-link-label" name="pg_label" type="text" value="Link" /></label><label class="playground-field" for="playground-link-href"><span><strong>href</strong><small>string</small></span><input id="playground-link-href" name="pg_href" type="text" value="#link-demo" /></label><label class="playground-field" for="playground-link-target"><span><strong>target</strong><small>string</small></span><select id="playground-link-target" name="pg_target"><option value="" selected>Auto / default</option><option value="_self">_self</option><option value="_blank">_blank</option><option value="_parent">_parent</option><option value="_top">_top</option></select></label><label class="playground-field" for="playground-link-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-link-rel" name="pg_rel" type="text" value="" /></label><label class="playground-toggle" for="playground-link-external"><span><strong>external</strong><small>boolean</small></span><input id="playground-link-external" name="pg_external" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-link-class"><span><strong>class</strong><small>string</small></span><input id="playground-link-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-link-size"><span><strong>size</strong><small>string</small></span><select id="playground-link-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-link-color"><span><strong>color</strong><small>string</small></span><select id="playground-link-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-link-label"><span><strong>label</strong><small>string</small></span><input id="playground-link-label" name="pg_label" type="text" value="Link" /></label><label class="playground-field" for="playground-link-href"><span><strong>href</strong><small>string</small></span><input id="playground-link-href" name="pg_href" type="text" value="#link-demo" /></label><label class="playground-field" for="playground-link-target"><span><strong>target</strong><small>string</small></span><select id="playground-link-target" name="pg_target"><option value="" selected>Auto / default</option><option value="_self">_self</option><option value="_blank">_blank</option><option value="_parent">_parent</option><option value="_top">_top</option></select></label><label class="playground-field" for="playground-link-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-link-rel" name="pg_rel" type="text" value="" /></label><label class="playground-toggle" for="playground-link-external"><span><strong>external</strong><small>boolean</small></span><input id="playground-link-external" name="pg_external" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-link-class"><span><strong>class</strong><small>string</small></span><input id="playground-link-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -51,72 +52,79 @@ page LinkDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Standard navigation link</h2><p>Use for routes within the current application.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="link-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Link" size="default" label="Link" href="#link-demo" external="false" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Link size="default" label="Open components" href="/base" external="false" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Standard navigation link usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Link
-  href="#link-demo"
+  label="Open components"
+  href="/base"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
+          <div><span class="demo-case-eyebrow">Compact</span><h2>External resource link</h2><p>Communicate external navigation and use safe target attributes.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="link-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Link" size="sm" label="Compact example" href="#link-demo" external="false" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Link size="sm" label="WRNexusJS documentation" href="https://wrnexusjs.dev" target="_blank" external="true" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="External resource link usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Link
   size="sm"
-  label="Compact example"
-  href="#link-demo"
+  label="WRNexusJS documentation"
+  href="https://wrnexusjs.dev"
+  target="_blank"
+  external="true"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Large emphasized link</h2><p>Use a larger link in empty states, promotional cards, and resource lists.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="link-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Link" size="lg" label="Advanced example" href="#link-demo" external="false" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Link size="lg" color="info" label="Explore framework guides" href="/framework-guides" external="false" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Large emphasized link usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Link
   size="lg"
-  label="Advanced example"
-  href="#link-demo"
+  color="info"
+  label="Explore framework guides"
+  href="/framework-guides"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
+        
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Link"</code></td><td>No</td></tr><tr><td><code>href</code></td><td>string</td><td><code>"#"</code></td><td>No</td></tr><tr><td><code>target</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>rel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>external</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#link-demo-1">Production default</a><a href="#link-demo-2">Compact application</a><a href="#link-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#link-demo-1">Standard navigation link</a><a href="#link-demo-2">External resource link</a><a href="#link-demo-3">Large emphasized link</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
       <a href="/components/layout-splitter"><small>Previous</small><strong>← Layout Splitter</strong></a>
-      <a href="/components/metric-grid"><small>Next</small><strong>Metric Grid →</strong></a>
+      <a href="/components/public-page-shell"><small>Next</small><strong>Public Page Shell →</strong></a>
     </nav>
   }
 }
diff --git a/examples/component-showcase/app/pages/components/list-group.wrn b/examples/component-showcase/app/pages/components/list-group.wrn
index 09ddf4d3..1a2255d4 100644
--- a/examples/component-showcase/app/pages/components/list-group.wrn
+++ b/examples/component-showcase/app/pages/components/list-group.wrn
@@ -5,7 +5,7 @@ page ListGroupDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "List Group example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default list group for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"list-group-0-1\",\n    \"key\": \"list-group-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#list-group-demo\",\n    \"actionHref\": \"#list-group-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"list-group-0-2\",\n    \"key\": \"list-group-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#list-group-demo\",\n    \"actionHref\": \"#list-group-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"list-group-0-1\",\"key\":\"list-group-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#list-group-demo\",\"actionHref\":\"#list-group-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"list-group-0-2\",\"key\":\"list-group-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#list-group-demo\",\"actionHref\":\"#list-group-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -25,12 +25,12 @@ page ListGroupDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="ListGroup" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="ListGroup" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="select,change">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure List Group</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="ListGroup" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><ListGroup size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;ListGroup
@@ -147,6 +147,7 @@ page ListGroupDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -257,7 +258,7 @@ page ListGroupDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-list-group-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-list-group-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-list-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-list-group-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-list-group-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-list-group-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-list-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-list-group-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page ListGroupDetail {
         <div class="demo-workbench">
           <div id="list-group-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="ListGroup" size="default" title="List Group example" description="A polished default list group for a modern application." items="[{&quot;id&quot;:&quot;list-group-0-1&quot;,&quot;key&quot;:&quot;list-group-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#list-group-demo&quot;,&quot;actionHref&quot;:&quot;#list-group-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;list-group-0-2&quot;,&quot;key&quot;:&quot;list-group-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#list-group-demo&quot;,&quot;actionHref&quot;:&quot;#list-group-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><ListGroup size="default" title="List Group example" description="A polished default list group for a modern application." items='[{"id":"list-group-0-1","key":"list-group-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#list-group-demo","actionHref":"#list-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"list-group-0-2","key":"list-group-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#list-group-demo","actionHref":"#list-group-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -399,7 +401,8 @@ page ListGroupDetail {
         <div class="demo-workbench">
           <div id="list-group-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="ListGroup" size="sm" title="Compact List Group" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;list-group-1-1&quot;,&quot;key&quot;:&quot;list-group-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#list-group-demo&quot;,&quot;actionHref&quot;:&quot;#list-group-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;list-group-1-2&quot;,&quot;key&quot;:&quot;list-group-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#list-group-demo&quot;,&quot;actionHref&quot;:&quot;#list-group-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><ListGroup size="sm" title="Compact List Group" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"list-group-1-1","key":"list-group-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#list-group-demo","actionHref":"#list-group-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"list-group-1-2","key":"list-group-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#list-group-demo","actionHref":"#list-group-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="secondary" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -528,7 +531,8 @@ page ListGroupDetail {
         <div class="demo-workbench">
           <div id="list-group-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="ListGroup" size="lg" title="Advanced List Group" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;list-group-2-1&quot;,&quot;key&quot;:&quot;list-group-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#list-group-demo&quot;,&quot;actionHref&quot;:&quot;#list-group-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;list-group-2-2&quot;,&quot;key&quot;:&quot;list-group-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#list-group-demo&quot;,&quot;actionHref&quot;:&quot;#list-group-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><ListGroup size="lg" title="Advanced List Group" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"list-group-2-1","key":"list-group-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#list-group-demo","actionHref":"#list-group-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"list-group-2-2","key":"list-group-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#list-group-demo","actionHref":"#list-group-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' variant="success" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -649,11 +653,18 @@ page ListGroupDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;ListGroup
+  @select='console.log(event.detail)'
+  @change='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"ListGroup\"], [data-component=\"ListGroup\"]")
 
-component.addEventListener('select', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"List Group"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
diff --git a/examples/component-showcase/app/pages/components/list.wrn b/examples/component-showcase/app/pages/components/list.wrn
index 3248ef60..b240e885 100644
--- a/examples/component-showcase/app/pages/components/list.wrn
+++ b/examples/component-showcase/app/pages/components/list.wrn
@@ -5,12 +5,12 @@ page ListDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "List example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default list for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"list-0-1\",\n    \"key\": \"list-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#list-demo\",\n    \"actionHref\": \"#list-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"list-0-2\",\n    \"key\": \"list-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#list-demo\",\n    \"actionHref\": \"#list-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"list-0-1\",\"key\":\"list-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#list-demo\",\"actionHref\":\"#list-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"list-0-2\",\"key\":\"list-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#list-demo\",\"actionHref\":\"#list-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "List"
-    description = "Theme-aware, responsive list component."
+    description = "Present structured responsive linked or status items with icons, descriptions, actions, and selection events."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -20,17 +20,17 @@ page ListDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Base component</span>
         <h1>List</h1>
-        <p>Theme-aware, responsive list component.</p>
+        <p>Present structured responsive linked or status items with icons, descriptions, actions, and selection events.</p>
         <div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="List" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="List" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure List</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="List" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><List size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;List
@@ -147,10 +147,11 @@ page ListDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-list-size"><span><strong>size</strong><small>string</small></span><select id="playground-list-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-list-color"><span><strong>color</strong><small>string</small></span><select id="playground-list-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-list-title"><span><strong>title</strong><small>string</small></span><input id="playground-list-title" name="pg_title" type="text" value="List example" /></label><label class="playground-field" for="playground-list-description"><span><strong>description</strong><small>string</small></span><input id="playground-list-description" name="pg_description" type="text" value="A polished default list for a modern application." /></label><label class="playground-field" for="playground-list-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-list-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+          <div class="playground-fields"><label class="playground-field" for="playground-list-size"><span><strong>size</strong><small>string</small></span><select id="playground-list-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-list-color"><span><strong>color</strong><small>string</small></span><select id="playground-list-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-list-title"><span><strong>title</strong><small>string</small></span><input id="playground-list-title" name="pg_title" type="text" value="List example" /></label><label class="playground-field" for="playground-list-description"><span><strong>description</strong><small>string</small></span><input id="playground-list-description" name="pg_description" type="text" value="A polished default list for a modern application." /></label><label class="playground-field" for="playground-list-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-list-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
     "id": "list-0-1",
     "key": "list-0-1",
@@ -257,7 +258,7 @@ page ListDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-list-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-list-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option><option value="divided">divided</option><option value="card">card</option><option value="separated">separated</option></select></label><label class="playground-field" for="playground-list-class"><span><strong>class</strong><small>string</small></span><input id="playground-list-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-list-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-list-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-list-class"><span><strong>class</strong><small>string</small></span><input id="playground-list-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -266,125 +267,35 @@ page ListDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Linked resource list</h2><p>Present related links with supporting descriptions and icons.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="list-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="List" size="default" title="List example" description="A polished default list for a modern application." items="[{&quot;id&quot;:&quot;list-0-1&quot;,&quot;key&quot;:&quot;list-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#list-demo&quot;,&quot;actionHref&quot;:&quot;#list-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;list-0-2&quot;,&quot;key&quot;:&quot;list-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#list-demo&quot;,&quot;actionHref&quot;:&quot;#list-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><List size="default" title="Citizen resources" description="Commonly requested public information." items='[{"label":"Report crime","href":"#report","icon":"icon-[lucide--shield-alert]"},{"label":"Track complaint","href":"#track","icon":"icon-[lucide--scan-search]"},{"label":"Certificates","href":"#certificates","icon":"icon-[lucide--file-check-2]"}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Linked resource list usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;List
-  title="List example"
-  description="A polished default list for a modern application."
+  title="Citizen resources"
+  description="Commonly requested public information."
   items='[
     &#123;
-      "id": "list-0-1",
-      "key": "list-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#list-demo",
-      "actionHref": "#list-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "Report crime",
+      "href": "#report",
+      "icon": "icon-[lucide--shield-alert]"
     &#125;,
     &#123;
-      "id": "list-0-2",
-      "key": "list-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#list-demo",
-      "actionHref": "#list-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "Track complaint",
+      "href": "#track",
+      "icon": "icon-[lucide--scan-search]"
+    &#125;,
+    &#123;
+      "label": "Certificates",
+      "href": "#certificates",
+      "icon": "icon-[lucide--file-check-2]"
     &#125;
   ]'
 /&gt;</code></pre>
@@ -393,267 +304,81 @@ page ListDetail {
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
+          <div><span class="demo-case-eyebrow">Compact</span><h2>Compact status list</h2><p>Use a dense list in sidebars, dashboards, and record panels.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="list-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="List" size="sm" title="Compact List" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;list-1-1&quot;,&quot;key&quot;:&quot;list-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#list-demo&quot;,&quot;actionHref&quot;:&quot;#list-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;list-1-2&quot;,&quot;key&quot;:&quot;list-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#list-demo&quot;,&quot;actionHref&quot;:&quot;#list-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><List size="sm" title="Current status" description="A compact configuration for dashboards and dense product surfaces." items='[{"label":"Application received","status":"Complete"},{"label":"Verification","status":"In progress"},{"label":"Decision","status":"Pending"}]' variant="soft" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Compact status list usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;List
   size="sm"
-  title="Compact List"
+  title="Current status"
   description="A compact configuration for dashboards and dense product surfaces."
   items='[
     &#123;
-      "id": "list-1-1",
-      "key": "list-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#list-demo",
-      "actionHref": "#list-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "Application received",
+      "status": "Complete"
     &#125;,
     &#123;
-      "id": "list-1-2",
-      "key": "list-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#list-demo",
-      "actionHref": "#list-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "Verification",
+      "status": "In progress"
+    &#125;,
+    &#123;
+      "label": "Decision",
+      "status": "Pending"
     &#125;
   ]'
-  variant="secondary"
+  variant="soft"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Rich action list</h2><p>Combine descriptions, icons, statuses, and actions in a structured collection.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="list-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="List" size="lg" title="Advanced List" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;list-2-1&quot;,&quot;key&quot;:&quot;list-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#list-demo&quot;,&quot;actionHref&quot;:&quot;#list-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;list-2-2&quot;,&quot;key&quot;:&quot;list-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#list-demo&quot;,&quot;actionHref&quot;:&quot;#list-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><List size="lg" title="Service requests" description="Recent requests and their current status." items='[{"label":"Address verification","description":"Submitted yesterday","status":"Review","href":"#request-1"},{"label":"Character certificate","description":"Submitted 3 days ago","status":"Approved","href":"#request-2"}]' variant="raised" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Rich action list usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;List
   size="lg"
-  title="Advanced List"
-  description="A richer configuration demonstrating additional content and hierarchy."
+  title="Service requests"
+  description="Recent requests and their current status."
   items='[
     &#123;
-      "id": "list-2-1",
-      "key": "list-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#list-demo",
-      "actionHref": "#list-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
+      "label": "Address verification",
+      "description": "Submitted yesterday",
+      "status": "Review",
+      "href": "#request-1"
     &#125;,
     &#123;
-      "id": "list-2-2",
-      "key": "list-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#list-demo",
-      "actionHref": "#list-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
+      "label": "Character certificate",
+      "description": "Submitted 3 days ago",
+      "status": "Approved",
+      "href": "#request-2"
     &#125;
   ]'
-  variant="success"
+  variant="raised"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
+        
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"List"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#list-demo-1">Production default</a><a href="#list-demo-2">Compact application</a><a href="#list-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#list-demo-1">Linked resource list</a><a href="#list-demo-2">Compact status list</a><a href="#list-demo-3">Rich action list</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/map.wrn b/examples/component-showcase/app/pages/components/map.wrn
index 41e9d4de..596cee60 100644
--- a/examples/component-showcase/app/pages/components/map.wrn
+++ b/examples/component-showcase/app/pages/components/map.wrn
@@ -5,12 +5,12 @@ page MapDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Map example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default map for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"map-0-1\",\n    \"key\": \"map-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#map-demo\",\n    \"actionHref\": \"#map-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"map-0-2\",\n    \"key\": \"map-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#map-demo\",\n    \"actionHref\": \"#map-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"map-0-1\",\"key\":\"map-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#map-demo\",\"actionHref\":\"#map-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"map-0-2\",\"key\":\"map-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#map-demo\",\"actionHref\":\"#map-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Map"
-    description = "Theme-aware, responsive map component."
+    description = "Present responsive location information and markers with map-ready metadata and movement or marker events."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -20,17 +20,17 @@ page MapDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Integrations component</span>
         <h1>Map</h1>
-        <p>Theme-aware, responsive map component.</p>
+        <p>Present responsive location information and markers with map-ready metadata and movement or marker events.</p>
         <div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Map" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Map" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Map</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="Map" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Map size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Map
@@ -147,10 +147,11 @@ page MapDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-map-size"><span><strong>size</strong><small>string</small></span><select id="playground-map-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-map-color"><span><strong>color</strong><small>string</small></span><select id="playground-map-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-map-title"><span><strong>title</strong><small>string</small></span><input id="playground-map-title" name="pg_title" type="text" value="Map example" /></label><label class="playground-field" for="playground-map-description"><span><strong>description</strong><small>string</small></span><input id="playground-map-description" name="pg_description" type="text" value="A polished default map for a modern application." /></label><label class="playground-field" for="playground-map-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-map-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+          <div class="playground-fields"><label class="playground-field" for="playground-map-size"><span><strong>size</strong><small>string</small></span><select id="playground-map-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-map-color"><span><strong>color</strong><small>string</small></span><select id="playground-map-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-map-title"><span><strong>title</strong><small>string</small></span><input id="playground-map-title" name="pg_title" type="text" value="Map example" /></label><label class="playground-field" for="playground-map-description"><span><strong>description</strong><small>string</small></span><input id="playground-map-description" name="pg_description" type="text" value="A polished default map for a modern application." /></label><label class="playground-field" for="playground-map-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-map-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
     "id": "map-0-1",
     "key": "map-0-1",
@@ -257,7 +258,7 @@ page MapDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-map-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-map-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-map-class"><span><strong>class</strong><small>string</small></span><input id="playground-map-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-map-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-map-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-map-class"><span><strong>class</strong><small>string</small></span><input id="playground-map-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -266,125 +267,32 @@ page MapDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Station directory map</h2><p>Present locations with supporting names, addresses, and actions.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="map-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Map" size="default" title="Map example" description="A polished default map for a modern application." items="[{&quot;id&quot;:&quot;map-0-1&quot;,&quot;key&quot;:&quot;map-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#map-demo&quot;,&quot;actionHref&quot;:&quot;#map-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;map-0-2&quot;,&quot;key&quot;:&quot;map-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#map-demo&quot;,&quot;actionHref&quot;:&quot;#map-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Map size="default" title="Nearby police stations" description="Select a station to view contact details and jurisdiction information." items='[{"title":"Central station","description":"Main Road","latitude":18.5204,"longitude":73.8567},{"title":"North station","description":"University Road","latitude":18.559,"longitude":73.807}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Station directory map usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Map
-  title="Map example"
-  description="A polished default map for a modern application."
+  title="Nearby police stations"
+  description="Select a station to view contact details and jurisdiction information."
   items='[
     &#123;
-      "id": "map-0-1",
-      "key": "map-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#map-demo",
-      "actionHref": "#map-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "title": "Central station",
+      "description": "Main Road",
+      "latitude": 18.5204,
+      "longitude": 73.8567
     &#125;,
     &#123;
-      "id": "map-0-2",
-      "key": "map-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#map-demo",
-      "actionHref": "#map-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "title": "North station",
+      "description": "University Road",
+      "latitude": 18.559,
+      "longitude": 73.807
     &#125;
   ]'
 /&gt;</code></pre>
@@ -393,267 +301,71 @@ page MapDetail {
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
+          <div><span class="demo-case-eyebrow">Compact</span><h2>Compact location preview</h2><p>Use a smaller map preview inside cards, drawers, and record details.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="map-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Map" size="sm" title="Compact Map" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;map-1-1&quot;,&quot;key&quot;:&quot;map-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#map-demo&quot;,&quot;actionHref&quot;:&quot;#map-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;map-1-2&quot;,&quot;key&quot;:&quot;map-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#map-demo&quot;,&quot;actionHref&quot;:&quot;#map-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Map size="sm" title="Service location" description="Public service office" items='[{"title":"Public office","description":"City centre"}]' variant="soft" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Compact location preview usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Map
   size="sm"
-  title="Compact Map"
-  description="A compact configuration for dashboards and dense product surfaces."
+  title="Service location"
+  description="Public service office"
   items='[
     &#123;
-      "id": "map-1-1",
-      "key": "map-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#map-demo",
-      "actionHref": "#map-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    &#125;,
-    &#123;
-      "id": "map-1-2",
-      "key": "map-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#map-demo",
-      "actionHref": "#map-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "title": "Public office",
+      "description": "City centre"
     &#125;
   ]'
-  variant="secondary"
+  variant="soft"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Operations map</h2><p>Use a larger map surface for multiple markers and operational context.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="map-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Map" size="lg" title="Advanced Map" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;map-2-1&quot;,&quot;key&quot;:&quot;map-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#map-demo&quot;,&quot;actionHref&quot;:&quot;#map-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;map-2-2&quot;,&quot;key&quot;:&quot;map-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#map-demo&quot;,&quot;actionHref&quot;:&quot;#map-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Map size="lg" color="info" title="Jurisdiction overview" description="Stations, service areas, and public facilities." items='[{"title":"Station A"},{"title":"Station B"},{"title":"Control room"}]' variant="raised" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Operations map usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Map
   size="lg"
-  title="Advanced Map"
-  description="A richer configuration demonstrating additional content and hierarchy."
+  color="info"
+  title="Jurisdiction overview"
+  description="Stations, service areas, and public facilities."
   items='[
     &#123;
-      "id": "map-2-1",
-      "key": "map-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#map-demo",
-      "actionHref": "#map-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
+      "title": "Station A"
     &#125;,
     &#123;
-      "id": "map-2-2",
-      "key": "map-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#map-demo",
-      "actionHref": "#map-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
+      "title": "Station B"
+    &#125;,
+    &#123;
+      "title": "Control room"
     &#125;
   ]'
-  variant="success"
+  variant="raised"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
+        
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Map"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#map-demo-1">Production default</a><a href="#map-demo-2">Compact application</a><a href="#map-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#map-demo-1">Station directory map</a><a href="#map-demo-2">Compact location preview</a><a href="#map-demo-3">Operations map</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/marketing-section-header.wrn b/examples/component-showcase/app/pages/components/marketing-section-header.wrn
index ba70ca36..93eff579 100644
--- a/examples/component-showcase/app/pages/components/marketing-section-header.wrn
+++ b/examples/component-showcase/app/pages/components/marketing-section-header.wrn
@@ -11,31 +11,31 @@ page MarketingSectionHeaderDetail {
   state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Marketing Section Header"
   state playground_actionHref = ctx.url.searchParams.get("pg_actionHref") ?? "#marketing-section-header-demo"
   state playground_actionIcon = ctx.url.searchParams.get("pg_actionIcon") ?? ""
-  state playground_actionExternal = ctx.url.searchParams.get("pg_actionExternal") ?? "false"
+  state playground_actionExternal = (ctx.url.searchParams.get("pg_actionExternal") ?? "false") === "true"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Marketing Section Header"
-    description = "Marketing section heading with an optional linked action."
+    description = "Introduce marketing content with an eyebrow, title, description, and optional linked action."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/blocks">Blocks</a><span aria-hidden="true">/</span><span>Marketing Section Header</span>
+      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/marketing">Marketing</a><span aria-hidden="true">/</span><span>Marketing Section Header</span>
     </nav>
     <header class="detail-hero">
       <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Blocks component</span>
+        <span class="showcase-eyebrow">Marketing component</span>
         <h1>Marketing Section Header</h1>
-        <p>Marketing section heading with an optional linked action.</p>
+        <p>Introduce marketing content with an eyebrow, title, description, and optional linked action.</p>
         <div class="detail-badges"><span>12 props</span><span>3 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="MarketingSectionHeader" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="MarketingSectionHeader" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Marketing Section Header</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="MarketingSectionHeader" id="{playground_id}" eyebrow="{playground_eyebrow}" title="{playground_title}" description="{playground_description}" align="{playground_align}" size="{playground_size}" color="{playground_color}" actionLabel="{playground_actionLabel}" actionHref="{playground_actionHref}" actionIcon="{playground_actionIcon}" actionExternal="{playground_actionExternal}" class="{playground_class}"><div slot="icon" class="showcase-slot">icon slot</div><div slot="actions" class="showcase-slot">actions slot</div></div></div>
+          <div class="playground-preview-source" data-playground-preview><MarketingSectionHeader id='{playground_id}' eyebrow='{playground_eyebrow}' title='{playground_title}' description='{playground_description}' align='{playground_align}' size='{playground_size}' color='{playground_color}' actionLabel='{playground_actionLabel}' actionHref='{playground_actionHref}' actionIcon='{playground_actionIcon}' actionExternal='{playground_actionExternal}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;MarketingSectionHeader
@@ -44,14 +44,20 @@ page MarketingSectionHeaderDetail {
   align="start"
   actionLabel="Marketing Section Header"
   actionHref="#marketing-section-header-demo"&gt;
-  &lt;!-- Add icon, actions, default slot content here --&gt;
+  &lt;div data-slot="icon"&gt;
+    &lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="actions"&gt;
+    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/MarketingSectionHeader&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>12 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-marketing-section-header-id"><span><strong>id</strong><small>string</small></span><input id="playground-marketing-section-header-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-marketing-section-header-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-marketing-section-header-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-marketing-section-header-title"><span><strong>title</strong><small>string</small></span><input id="playground-marketing-section-header-title" name="pg_title" type="text" value="Marketing Section Header example" /></label><label class="playground-field" for="playground-marketing-section-header-description"><span><strong>description</strong><small>string</small></span><input id="playground-marketing-section-header-description" name="pg_description" type="text" value="A polished default marketing section header for a modern application." /></label><label class="playground-field" for="playground-marketing-section-header-align"><span><strong>align</strong><small>string</small></span><select id="playground-marketing-section-header-align" name="pg_align"><option value="start" selected>start</option><option value="split">split</option><option value="center">center</option><option value="end">end</option></select></label><label class="playground-field" for="playground-marketing-section-header-size"><span><strong>size</strong><small>string</small></span><select id="playground-marketing-section-header-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-marketing-section-header-color"><span><strong>color</strong><small>string</small></span><select id="playground-marketing-section-header-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-marketing-section-header-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-marketing-section-header-actionLabel" name="pg_actionLabel" type="text" value="Marketing Section Header" /></label><label class="playground-field" for="playground-marketing-section-header-actionHref"><span><strong>action Href</strong><small>string</small></span><input id="playground-marketing-section-header-actionHref" name="pg_actionHref" type="text" value="#marketing-section-header-demo" /></label><label class="playground-field" for="playground-marketing-section-header-actionIcon"><span><strong>action Icon</strong><small>string</small></span><input id="playground-marketing-section-header-actionIcon" name="pg_actionIcon" type="text" value="" /></label><label class="playground-toggle" for="playground-marketing-section-header-actionExternal"><span><strong>action External</strong><small>boolean</small></span><input id="playground-marketing-section-header-actionExternal" name="pg_actionExternal" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-marketing-section-header-class"><span><strong>class</strong><small>string</small></span><input id="playground-marketing-section-header-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-marketing-section-header-id"><span><strong>id</strong><small>string</small></span><input id="playground-marketing-section-header-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-marketing-section-header-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-marketing-section-header-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-marketing-section-header-title"><span><strong>title</strong><small>string</small></span><input id="playground-marketing-section-header-title" name="pg_title" type="text" value="Marketing Section Header example" /></label><label class="playground-field" for="playground-marketing-section-header-description"><span><strong>description</strong><small>string</small></span><input id="playground-marketing-section-header-description" name="pg_description" type="text" value="A polished default marketing section header for a modern application." /></label><label class="playground-field" for="playground-marketing-section-header-align"><span><strong>align</strong><small>string</small></span><select id="playground-marketing-section-header-align" name="pg_align"><option value="start" selected>start</option><option value="split">split</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-marketing-section-header-size"><span><strong>size</strong><small>string</small></span><select id="playground-marketing-section-header-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="large">large</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-marketing-section-header-color"><span><strong>color</strong><small>string</small></span><select id="playground-marketing-section-header-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-marketing-section-header-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-marketing-section-header-actionLabel" name="pg_actionLabel" type="text" value="Marketing Section Header" /></label><label class="playground-field" for="playground-marketing-section-header-actionHref"><span><strong>action Href</strong><small>string</small></span><input id="playground-marketing-section-header-actionHref" name="pg_actionHref" type="text" value="#marketing-section-header-demo" /></label><label class="playground-field" for="playground-marketing-section-header-actionIcon"><span><strong>action Icon</strong><small>string</small></span><input id="playground-marketing-section-header-actionIcon" name="pg_actionIcon" type="text" value="" /></label><label class="playground-toggle" for="playground-marketing-section-header-actionExternal"><span><strong>action External</strong><small>boolean</small></span><input id="playground-marketing-section-header-actionExternal" name="pg_actionExternal" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-marketing-section-header-class"><span><strong>class</strong><small>string</small></span><input id="playground-marketing-section-header-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -60,85 +66,106 @@ page MarketingSectionHeaderDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Split header with action</h2><p>Pair marketing copy with a clear secondary navigation action.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="marketing-section-header-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="MarketingSectionHeader" title="Marketing Section Header example" description="A polished default marketing section header for a modern application." align="start" size="default" actionLabel="Marketing Section Header" actionHref="#marketing-section-header-demo" actionExternal="false" class="showcase-instance showcase-instance--1"><div slot="icon" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>icon slot</span></div><div slot="actions" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>actions slot</span></div></div></div>
+            
+            <div class="demo-render"><MarketingSectionHeader eyebrow="Platform capabilities" title="Build complete public experiences" description="Use reusable sections, cards, metrics, heroes, and CTAs." align="split" size="default" actionLabel="Explore components" actionHref="#components" actionIcon="icon-[lucide--arrow-right]" actionExternal="false" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Split header with action usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;MarketingSectionHeader
-  title="Marketing Section Header example"
-  description="A polished default marketing section header for a modern application."
-  align="start"
-  actionLabel="Marketing Section Header"
-  actionHref="#marketing-section-header-demo"&gt;
-  &lt;!-- Add icon, actions, default slot content here --&gt;
+  eyebrow="Platform capabilities"
+  title="Build complete public experiences"
+  description="Use reusable sections, cards, metrics, heroes, and CTAs."
+  actionLabel="Explore components"
+  actionHref="#components"
+  actionIcon="icon-[lucide--arrow-right]"&gt;
+  &lt;div data-slot="icon"&gt;
+    &lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="actions"&gt;
+    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/MarketingSectionHeader&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
+          <div><span class="demo-case-eyebrow">Compact</span><h2>Centered marketing header</h2><p>Use a centered configuration above campaigns, proof, and feature collections.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="marketing-section-header-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="MarketingSectionHeader" title="Compact Marketing Section Header" description="A compact configuration for dashboards and dense product surfaces." align="center" size="sm" actionLabel="Compact example" actionHref="#marketing-section-header-demo" actionExternal="false" class="showcase-instance showcase-instance--2"><div slot="icon" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>icon slot</span></div><div slot="actions" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>actions slot</span></div></div></div>
+            
+            <div class="demo-render"><MarketingSectionHeader eyebrow="Why WRNexusJS" title="One coherent design system" description="Consistent presentation across public pages and product applications." align="center" size="compact" actionLabel="Compact example" actionHref="#marketing-section-header-demo" actionExternal="false" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Centered marketing header usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;MarketingSectionHeader
-  title="Compact Marketing Section Header"
-  description="A compact configuration for dashboards and dense product surfaces."
+  eyebrow="Why WRNexusJS"
+  title="One coherent design system"
+  description="Consistent presentation across public pages and product applications."
   align="center"
-  size="sm"
+  size="compact"
   actionLabel="Compact example"
   actionHref="#marketing-section-header-demo"&gt;
-  &lt;!-- Add icon, actions, default slot content here --&gt;
+  &lt;div data-slot="icon"&gt;
+    &lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="actions"&gt;
+    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/MarketingSectionHeader&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>External resource header</h2><p>Link to supporting documentation or an external resource.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="marketing-section-header-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="MarketingSectionHeader" title="Advanced Marketing Section Header" description="A richer configuration demonstrating additional content and hierarchy." align="end" size="lg" actionLabel="Advanced example" actionHref="#marketing-section-header-demo" actionExternal="false" class="showcase-instance showcase-instance--3"><div slot="icon" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>icon slot</span></div><div slot="actions" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>actions slot</span></div></div></div>
+            
+            <div class="demo-render"><MarketingSectionHeader eyebrow="Developer resources" title="Learn the framework through working examples" description="Every component page includes live demos, playground controls, events, and API details." align="split" size="large" actionLabel="Open documentation" actionHref="https://wrnexusjs.dev" actionExternal="true" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="External resource header usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;MarketingSectionHeader
-  title="Advanced Marketing Section Header"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  align="end"
-  size="lg"
-  actionLabel="Advanced example"
-  actionHref="#marketing-section-header-demo"&gt;
-  &lt;!-- Add icon, actions, default slot content here --&gt;
+  eyebrow="Developer resources"
+  title="Learn the framework through working examples"
+  description="Every component page includes live demos, playground controls, events, and API details."
+  size="large"
+  actionLabel="Open documentation"
+  actionHref="https://wrnexusjs.dev"
+  actionExternal="true"&gt;
+  &lt;div data-slot="icon"&gt;
+    &lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="actions"&gt;
+    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/MarketingSectionHeader&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
+        
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>id</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>eyebrow</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"split"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>actionLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>actionExternal</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#marketing-section-header-demo-1">Production default</a><a href="#marketing-section-header-demo-2">Compact application</a><a href="#marketing-section-header-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#marketing-section-header-demo-1">Split header with action</a><a href="#marketing-section-header-demo-2">Centered marketing header</a><a href="#marketing-section-header-demo-3">External resource header</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/hero"><small>Previous</small><strong>← Hero</strong></a>
-      <a href="/components/metric-card"><small>Next</small><strong>Metric Card →</strong></a>
+      <a href="/components/hero-actions"><small>Previous</small><strong>← Hero Actions</strong></a>
+      <a href="/components/page-header"><small>Next</small><strong>Page Header →</strong></a>
     </nav>
   }
 }
diff --git a/examples/component-showcase/app/pages/components/marquee.wrn b/examples/component-showcase/app/pages/components/marquee.wrn
index 2eaa930c..1d8f0b62 100644
--- a/examples/component-showcase/app/pages/components/marquee.wrn
+++ b/examples/component-showcase/app/pages/components/marquee.wrn
@@ -5,12 +5,12 @@ page MarqueeDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Marquee example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default marquee for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"marquee-0-1\",\n    \"key\": \"marquee-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#marquee-demo\",\n    \"actionHref\": \"#marquee-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"marquee-0-2\",\n    \"key\": \"marquee-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#marquee-demo\",\n    \"actionHref\": \"#marquee-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"marquee-0-1\",\"key\":\"marquee-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#marquee-demo\",\"actionHref\":\"#marquee-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"marquee-0-2\",\"key\":\"marquee-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#marquee-demo\",\"actionHref\":\"#marquee-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Marquee"
-    description = "Theme-aware, responsive marquee component."
+    description = "Continuously present responsive labels, partners, notices, or capabilities with pause and resume behavior."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -20,17 +20,17 @@ page MarqueeDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Base component</span>
         <h1>Marquee</h1>
-        <p>Theme-aware, responsive marquee component.</p>
+        <p>Continuously present responsive labels, partners, notices, or capabilities with pause and resume behavior.</p>
         <div class="detail-badges"><span>7 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Marquee" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Marquee" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Marquee</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="Marquee" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Marquee size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Marquee
@@ -147,10 +147,11 @@ page MarqueeDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-marquee-size"><span><strong>size</strong><small>string</small></span><select id="playground-marquee-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-marquee-color"><span><strong>color</strong><small>string</small></span><select id="playground-marquee-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-marquee-title"><span><strong>title</strong><small>string</small></span><input id="playground-marquee-title" name="pg_title" type="text" value="Marquee example" /></label><label class="playground-field" for="playground-marquee-description"><span><strong>description</strong><small>string</small></span><input id="playground-marquee-description" name="pg_description" type="text" value="A polished default marquee for a modern application." /></label><label class="playground-field" for="playground-marquee-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-marquee-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+          <div class="playground-fields"><label class="playground-field" for="playground-marquee-size"><span><strong>size</strong><small>string</small></span><select id="playground-marquee-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-marquee-color"><span><strong>color</strong><small>string</small></span><select id="playground-marquee-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-marquee-title"><span><strong>title</strong><small>string</small></span><input id="playground-marquee-title" name="pg_title" type="text" value="Marquee example" /></label><label class="playground-field" for="playground-marquee-description"><span><strong>description</strong><small>string</small></span><input id="playground-marquee-description" name="pg_description" type="text" value="A polished default marquee for a modern application." /></label><label class="playground-field" for="playground-marquee-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-marquee-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
     "id": "marquee-0-1",
     "key": "marquee-0-1",
@@ -257,7 +258,7 @@ page MarqueeDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-marquee-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-marquee-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-marquee-class"><span><strong>class</strong><small>string</small></span><input id="playground-marquee-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-marquee-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-marquee-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-marquee-class"><span><strong>class</strong><small>string</small></span><input id="playground-marquee-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -266,125 +267,35 @@ page MarqueeDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Partner and capability strip</h2><p>Continuously present short labels, partners, channels, or capabilities.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="marquee-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Marquee" size="default" title="Marquee example" description="A polished default marquee for a modern application." items="[{&quot;id&quot;:&quot;marquee-0-1&quot;,&quot;key&quot;:&quot;marquee-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#marquee-demo&quot;,&quot;actionHref&quot;:&quot;#marquee-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;marquee-0-2&quot;,&quot;key&quot;:&quot;marquee-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#marquee-demo&quot;,&quot;actionHref&quot;:&quot;#marquee-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Marquee size="default" title="Supported capabilities" description="A polished default marquee for a modern application." items='[{"label":"SSR"},{"label":"CSR"},{"label":"Themes"},{"label":"Accessibility"},{"label":"Responsive UI"}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Partner and capability strip usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Marquee
-  title="Marquee example"
+  title="Supported capabilities"
   description="A polished default marquee for a modern application."
   items='[
     &#123;
-      "id": "marquee-0-1",
-      "key": "marquee-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#marquee-demo",
-      "actionHref": "#marquee-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "SSR"
     &#125;,
     &#123;
-      "id": "marquee-0-2",
-      "key": "marquee-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#marquee-demo",
-      "actionHref": "#marquee-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "CSR"
+    &#125;,
+    &#123;
+      "label": "Themes"
+    &#125;,
+    &#123;
+      "label": "Accessibility"
+    &#125;,
+    &#123;
+      "label": "Responsive UI"
     &#125;
   ]'
 /&gt;</code></pre>
@@ -393,15 +304,16 @@ page MarqueeDetail {
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
+          <div><span class="demo-case-eyebrow">Compact</span><h2>Compact announcement ticker</h2><p>Use a dense ticker for short operational updates.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="marquee-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Marquee" size="sm" title="Compact Marquee" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;marquee-1-1&quot;,&quot;key&quot;:&quot;marquee-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#marquee-demo&quot;,&quot;actionHref&quot;:&quot;#marquee-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;marquee-1-2&quot;,&quot;key&quot;:&quot;marquee-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#marquee-demo&quot;,&quot;actionHref&quot;:&quot;#marquee-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Marquee size="sm" title="Compact Marquee" description="A compact configuration for dashboards and dense product surfaces." items='[{"label":"All services operational"},{"label":"New components published"},{"label":"Documentation updated"}]' variant="soft" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Compact announcement ticker usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Marquee
   size="sm"
@@ -409,251 +321,62 @@ page MarqueeDetail {
   description="A compact configuration for dashboards and dense product surfaces."
   items='[
     &#123;
-      "id": "marquee-1-1",
-      "key": "marquee-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#marquee-demo",
-      "actionHref": "#marquee-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "All services operational"
     &#125;,
     &#123;
-      "id": "marquee-1-2",
-      "key": "marquee-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#marquee-demo",
-      "actionHref": "#marquee-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "New components published"
+    &#125;,
+    &#123;
+      "label": "Documentation updated"
     &#125;
   ]'
-  variant="secondary"
+  variant="soft"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Large visual marquee</h2><p>Use stronger spacing and richer items on marketing pages.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="marquee-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Marquee" size="lg" title="Advanced Marquee" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;marquee-2-1&quot;,&quot;key&quot;:&quot;marquee-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#marquee-demo&quot;,&quot;actionHref&quot;:&quot;#marquee-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;marquee-2-2&quot;,&quot;key&quot;:&quot;marquee-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#marquee-demo&quot;,&quot;actionHref&quot;:&quot;#marquee-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Marquee size="lg" color="info" title="Built for complete digital platforms" description="A richer configuration demonstrating additional content and hierarchy." items='[{"label":"Public portals","icon":"icon-[lucide--landmark]"},{"label":"Enterprise systems","icon":"icon-[lucide--building-2]"},{"label":"Developer tools","icon":"icon-[lucide--code-2]"}]' variant="raised" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Large visual marquee usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Marquee
   size="lg"
-  title="Advanced Marquee"
+  color="info"
+  title="Built for complete digital platforms"
   description="A richer configuration demonstrating additional content and hierarchy."
   items='[
     &#123;
-      "id": "marquee-2-1",
-      "key": "marquee-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#marquee-demo",
-      "actionHref": "#marquee-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
+      "label": "Public portals",
+      "icon": "icon-[lucide--landmark]"
     &#125;,
     &#123;
-      "id": "marquee-2-2",
-      "key": "marquee-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#marquee-demo",
-      "actionHref": "#marquee-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
+      "label": "Enterprise systems",
+      "icon": "icon-[lucide--building-2]"
+    &#125;,
+    &#123;
+      "label": "Developer tools",
+      "icon": "icon-[lucide--code-2]"
     &#125;
   ]'
-  variant="success"
+  variant="raised"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
+        
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Marquee"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#marquee-demo-1">Production default</a><a href="#marquee-demo-2">Compact application</a><a href="#marquee-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#marquee-demo-1">Partner and capability strip</a><a href="#marquee-demo-2">Compact announcement ticker</a><a href="#marquee-demo-3">Large visual marquee</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/mega-menu.wrn b/examples/component-showcase/app/pages/components/mega-menu.wrn
index e858dfb9..8d7697ca 100644
--- a/examples/component-showcase/app/pages/components/mega-menu.wrn
+++ b/examples/component-showcase/app/pages/components/mega-menu.wrn
@@ -4,7 +4,7 @@ page MegaMenuDetail {
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_label = ctx.url.searchParams.get("pg_label") ?? "Mega Menu"
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"mega-menu-0-1\",\n    \"key\": \"mega-menu-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#mega-menu-demo\",\n    \"actionHref\": \"#mega-menu-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"mega-menu-0-2\",\n    \"key\": \"mega-menu-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#mega-menu-demo\",\n    \"actionHref\": \"#mega-menu-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"mega-menu-0-1\",\"key\":\"mega-menu-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#mega-menu-demo\",\"actionHref\":\"#mega-menu-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"mega-menu-0-2\",\"key\":\"mega-menu-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#mega-menu-demo\",\"actionHref\":\"#mega-menu-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
   state playground_active = ctx.url.searchParams.get("pg_active") ?? ""
   state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
@@ -25,12 +25,12 @@ page MegaMenuDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="MegaMenu" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="MegaMenu" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="open,close,select">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Mega Menu</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="MegaMenu" size="{playground_size}" color="{playground_color}" label="{playground_label}" items="{playground_items}" active="{playground_active}" orientation="{playground_orientation}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><MegaMenu size='{playground_size}' color='{playground_color}' label='{playground_label}' items='{playground_items}' active='{playground_active}' orientation='{playground_orientation}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;MegaMenu
@@ -145,6 +145,7 @@ page MegaMenuDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -270,7 +271,8 @@ page MegaMenuDetail {
         <div class="demo-workbench">
           <div id="mega-menu-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="MegaMenu" size="default" label="Mega Menu" items="[{&quot;id&quot;:&quot;mega-menu-0-1&quot;,&quot;key&quot;:&quot;mega-menu-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#mega-menu-demo&quot;,&quot;actionHref&quot;:&quot;#mega-menu-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;mega-menu-0-2&quot;,&quot;key&quot;:&quot;mega-menu-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#mega-menu-demo&quot;,&quot;actionHref&quot;:&quot;#mega-menu-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><MegaMenu size="default" label="Mega Menu" items='[{"id":"mega-menu-0-1","key":"mega-menu-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#mega-menu-demo","actionHref":"#mega-menu-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"mega-menu-0-2","key":"mega-menu-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#mega-menu-demo","actionHref":"#mega-menu-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -395,7 +397,8 @@ page MegaMenuDetail {
         <div class="demo-workbench">
           <div id="mega-menu-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="MegaMenu" size="sm" label="Compact example" items="[{&quot;id&quot;:&quot;mega-menu-1-1&quot;,&quot;key&quot;:&quot;mega-menu-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#mega-menu-demo&quot;,&quot;actionHref&quot;:&quot;#mega-menu-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;mega-menu-1-2&quot;,&quot;key&quot;:&quot;mega-menu-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#mega-menu-demo&quot;,&quot;actionHref&quot;:&quot;#mega-menu-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><MegaMenu size="sm" label="Compact example" items='[{"id":"mega-menu-1-1","key":"mega-menu-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#mega-menu-demo","actionHref":"#mega-menu-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"mega-menu-1-2","key":"mega-menu-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#mega-menu-demo","actionHref":"#mega-menu-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -522,7 +525,8 @@ page MegaMenuDetail {
         <div class="demo-workbench">
           <div id="mega-menu-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="MegaMenu" size="lg" label="Advanced example" items="[{&quot;id&quot;:&quot;mega-menu-2-1&quot;,&quot;key&quot;:&quot;mega-menu-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#mega-menu-demo&quot;,&quot;actionHref&quot;:&quot;#mega-menu-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;mega-menu-2-2&quot;,&quot;key&quot;:&quot;mega-menu-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#mega-menu-demo&quot;,&quot;actionHref&quot;:&quot;#mega-menu-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><MegaMenu size="lg" label="Advanced example" items='[{"id":"mega-menu-2-1","key":"mega-menu-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#mega-menu-demo","actionHref":"#mega-menu-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"mega-menu-2-2","key":"mega-menu-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#mega-menu-demo","actionHref":"#mega-menu-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -641,11 +645,23 @@ page MegaMenuDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</span></div><div><code>@select</code><span>Fires when an item or option is selected.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@open</code><span>Fires after the component opens.</span></div><div><code>@close</code><span>Fires after the component closes.</span></div><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;MegaMenu
+  @open='console.log(event.detail)'
+  @close='console.log(event.detail)'
+  @select='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"MegaMenu\"], [data-component=\"MegaMenu\"]")
 
-component.addEventListener('open', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("open", (event) =&gt; &#123;
+  console.log("open", event.detail)
+&#125;)
+
+component?.addEventListener("close", (event) =&gt; &#123;
+  console.log("close", event.detail)
+&#125;)
+
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Mega Menu"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
@@ -653,7 +669,7 @@ component.addEventListener('open', (event) =&gt; &#123;
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/footer"><small>Previous</small><strong>← Footer</strong></a>
+      <a href="/components/breadcrumb"><small>Previous</small><strong>← Breadcrumb</strong></a>
       <a href="/components/nav"><small>Next</small><strong>Nav →</strong></a>
     </nav>
   }
diff --git a/examples/component-showcase/app/pages/components/metric-card.wrn b/examples/component-showcase/app/pages/components/metric-card.wrn
index 6b233b41..bbf6b060 100644
--- a/examples/component-showcase/app/pages/components/metric-card.wrn
+++ b/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>
-        <div class="detail-badges"><span>16 props</span><span>0 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <p>Display one operational metric with value, suffix, description, icon, trend, progress, and optional action.</p>
+        <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"
-/&gt;</code></pre>
+  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 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>
-          <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>
+          <header><div><span>Component props</span><strong>28 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-metric-card-label"><span><strong>label</strong><small>string</small></span><input id="playground-metric-card-label" name="pg_label" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-value"><span><strong>value</strong><small>string</small></span><input id="playground-metric-card-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-metric-card-description"><span><strong>description</strong><small>string</small></span><input id="playground-metric-card-description" name="pg_description" type="text" value="A polished default metric card for a modern application." /></label><label class="playground-field" for="playground-metric-card-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-metric-card-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-iconStyle"><span><strong>icon Style</strong><small>string</small></span><select id="playground-metric-card-iconStyle" name="pg_iconStyle"><option value="soft" selected>soft</option><option value="plain">plain</option><option value="solid">solid</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-metric-card-prefix"><span><strong>prefix</strong><small>string</small></span><input id="playground-metric-card-prefix" name="pg_prefix" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-suffix"><span><strong>suffix</strong><small>string</small></span><input id="playground-metric-card-suffix" name="pg_suffix" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-badge"><span><strong>badge</strong><small>string</small></span><input id="playground-metric-card-badge" name="pg_badge" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-trend"><span><strong>trend</strong><small>string</small></span><input id="playground-metric-card-trend" name="pg_trend" type="text" value="" /></label><label class="playground-field" for="playground-metric-card-trendLabel"><span><strong>trend Label</strong><small>string</small></span><input id="playground-metric-card-trendLabel" name="pg_trendLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-trendDirection"><span><strong>trend Direction</strong><small>string</small></span><select id="playground-metric-card-trendDirection" name="pg_trendDirection"><option value="neutral" selected>neutral</option><option value="up">up</option><option value="down">down</option><option value="positive">positive</option><option value="negative">negative</option></select></label><label class="playground-field" for="playground-metric-card-progress"><span><strong>progress</strong><small>number</small></span><input id="playground-metric-card-progress" name="pg_progress" type="number" value="-1" /></label><label class="playground-field" for="playground-metric-card-progressLabel"><span><strong>progress Label</strong><small>string</small></span><input id="playground-metric-card-progressLabel" name="pg_progressLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-href"><span><strong>href</strong><small>string</small></span><input id="playground-metric-card-href" name="pg_href" type="text" value="#metric-card-demo" /></label><label class="playground-field" for="playground-metric-card-target"><span><strong>target</strong><small>string</small></span><select id="playground-metric-card-target" name="pg_target"><option value="" selected>Auto / default</option><option value="_self">_self</option><option value="_blank">_blank</option><option value="_parent">_parent</option><option value="_top">_top</option></select></label><label class="playground-field" for="playground-metric-card-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-metric-card-rel" name="pg_rel" type="text" value="" /></label><label class="playground-toggle" for="playground-metric-card-external"><span><strong>external</strong><small>boolean</small></span><input id="playground-metric-card-external" name="pg_external" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-metric-card-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-metric-card-actionLabel" name="pg_actionLabel" type="text" value="Metric Card" /></label><label class="playground-field" for="playground-metric-card-actionIcon"><span><strong>action Icon</strong><small>string</small></span><input id="playground-metric-card-actionIcon" name="pg_actionIcon" type="text" value="" /></label><label class="playground-toggle" for="playground-metric-card-showArrow"><span><strong>show Arrow</strong><small>boolean</small></span><input id="playground-metric-card-showArrow" name="pg_showArrow" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-metric-card-selectable"><span><strong>selectable</strong><small>boolean</small></span><input id="playground-metric-card-selectable" name="pg_selectable" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-metric-card-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-metric-card-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></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="raised">raised</option><option value="soft">soft</option><option value="outline">outline</option><option value="minimal">minimal</option><option value="solid">solid</option><option value="gradient">gradient</option></select></label><label class="playground-field" for="playground-metric-card-hover"><span><strong>hover</strong><small>string</small></span><select id="playground-metric-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-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="right">right</option><option value="end">end</option><option value="stretch">stretch</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>
         </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"
-  value="sample-1"
-  description="A polished default metric card for a modern application."
-  trendLabel="Metric Card"
-  href="#metric-card-demo"
-  actionLabel="Metric Card"
-  align="start"
-/&gt;</code></pre>
+  label="Availability"
+  value="99.9"
+  description="Target service availability."
+  icon="icon-[lucide--activity]"
+  suffix="%"
+  trend="Stable"
+  trendLabel="30 days"
+  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"
-  value="sample-2"
-  description="A compact configuration for dashboards and dense product surfaces."
-  icon="icon-[lucide--arrow-right]"
+  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"
   actionLabel="Compact example"
   size="sm"
-  variant="secondary"
-  align="center"
-/&gt;</code></pre>
+  color="info"
+  variant="soft"
+  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"
-  value="sample-3"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  icon="icon-[lucide--trash-2]"
+  label="Open complaints"
+  value="38"
+  description="Cases waiting for review or assignment."
+  icon="icon-[lucide--inbox]"
+  badge="Needs review"
   trendLabel="Advanced example"
-  href="#metric-card-demo"
-  actionLabel="Advanced example"
+  progressLabel="Advanced example"
+  href="#queue"
+  actionLabel="Review queue"
+  selectable="true"
   size="lg"
-  variant="success"
-  align="end"
-/&gt;</code></pre>
+  color="warning"
+  variant="raised"
+  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="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>
+        <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
+  @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>
-      <a href="/components/page-header"><small>Next</small><strong>Page Header →</strong></a>
+      <span></span>
+      <a href="/components/metric-grid"><small>Next</small><strong>Metric Grid →</strong></a>
     </nav>
   }
 }
diff --git a/examples/component-showcase/app/pages/components/metric-grid.wrn b/examples/component-showcase/app/pages/components/metric-grid.wrn
index 34761d19..d281742a 100644
--- a/examples/component-showcase/app/pages/components/metric-grid.wrn
+++ b/examples/component-showcase/app/pages/components/metric-grid.wrn
@@ -1,40 +1,42 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page MetricGridDetail {
   layout = "showcase"
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"metric-grid-0-1\",\n    \"key\": \"metric-grid-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#metric-grid-demo\",\n    \"actionHref\": \"#metric-grid-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"metric-grid-0-2\",\n    \"key\": \"metric-grid-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#metric-grid-demo\",\n    \"actionHref\": \"#metric-grid-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
-  state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "4"
-  state playground_tabletColumns = ctx.url.searchParams.get("pg_tabletColumns") ?? "2"
-  state playground_mobileColumns = ctx.url.searchParams.get("pg_mobileColumns") ?? "1"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"label\":\"Public services\",\"value\":\"24\",\"description\":\"Citizen-facing services available online.\",\"icon\":\"icon-[lucide--hand-heart]\",\"trend\":\"+4\",\"trendLabel\":\"this release\",\"trendDirection\":\"up\",\"color\":\"primary\"},{\"label\":\"Police stations\",\"value\":\"126\",\"description\":\"Searchable station and jurisdiction entries.\",\"icon\":\"icon-[lucide--landmark]\",\"trend\":\"Updated\",\"trendLabel\":\"today\",\"color\":\"info\"},{\"label\":\"Availability\",\"value\":\"99.9\",\"suffix\":\"%\",\"description\":\"Target service availability.\",\"icon\":\"icon-[lucide--activity]\",\"trend\":\"Stable\",\"trendLabel\":\"30 days\",\"trendDirection\":\"positive\",\"color\":\"success\"}]")
+  state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "3")
+  state playground_tabletColumns = Number(ctx.url.searchParams.get("pg_tabletColumns") ?? "2")
+  state playground_mobileColumns = Number(ctx.url.searchParams.get("pg_mobileColumns") ?? "1")
   state playground_gap = ctx.url.searchParams.get("pg_gap") ?? "md"
-  state playground_equalHeight = ctx.url.searchParams.get("pg_equalHeight") ?? "true"
-  state playground_dividers = ctx.url.searchParams.get("pg_dividers") ?? "false"
+  state playground_equalHeight = (ctx.url.searchParams.get("pg_equalHeight") ?? "true") === "true"
+  state playground_dividers = (ctx.url.searchParams.get("pg_dividers") ?? "false") === "true"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
+  state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "full"
+  state playground_minItemWidth = ctx.url.searchParams.get("pg_minItemWidth") ?? ""
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Metric Grid"
-    description = "Responsive collection of metric cards."
+    description = "Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/layout">Layout</a><span aria-hidden="true">/</span><span>Metric Grid</span>
+      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/data">Data</a><span aria-hidden="true">/</span><span>Metric Grid</span>
     </nav>
     <header class="detail-hero">
       <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Layout component</span>
+        <span class="showcase-eyebrow">Data component</span>
         <h1>Metric Grid</h1>
-        <p>Responsive collection of metric cards.</p>
-        <div class="detail-badges"><span>11 props</span><span>1 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <p>Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.</p>
+        <div class="detail-badges"><span>13 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="MetricGrid" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="MetricGrid" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="select,action">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Metric Grid</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="MetricGrid" items="{playground_items}" columns="{playground_columns}" tabletColumns="{playground_tabletColumns}" mobileColumns="{playground_mobileColumns}" gap="{playground_gap}" equalHeight="{playground_equalHeight}" dividers="{playground_dividers}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><MetricGrid items='{playground_items}' columns='{playground_columns}' tabletColumns='{playground_tabletColumns}' mobileColumns='{playground_mobileColumns}' gap='{playground_gap}' equalHeight='{playground_equalHeight}' dividers='{playground_dividers}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' maxWidth='{playground_maxWidth}' minItemWidth='{playground_minItemWidth}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;MetricGrid
@@ -149,117 +151,42 @@ page MetricGridDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>11 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
           <div class="playground-fields"><label class="playground-field" for="playground-metric-grid-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-metric-grid-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
-    "id": "metric-grid-0-1",
-    "key": "metric-grid-0-1",
-    "value": "primary",
-    "label": "Primary workflow",
-    "title": "Primary workflow",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "A configurable sample message.",
-    "href": "#metric-grid-demo",
-    "actionHref": "#metric-grid-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": true,
-    "selected": true,
-    "checked": true,
-    "disabled": false,
-    "outgoing": false,
-    "open": true,
-    "number": 1,
-    "count": 16,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 1",
-    "items": [
-      {
-        "label": "Nested option A",
-        "value": "nested-a"
-      },
-      {
-        "label": "Nested option B",
-        "value": "nested-b"
-      }
-    ],
-    "links": [
-      {
-        "label": "Documentation",
-        "href": "#documentation"
-      },
-      {
-        "label": "API reference",
-        "href": "#api-reference"
-      }
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
+    "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"
   },
   {
-    "id": "metric-grid-0-2",
-    "key": "metric-grid-0-2",
-    "value": "secondary",
-    "label": "Additional option",
-    "title": "Supporting example",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "Another configurable message.",
-    "href": "#metric-grid-demo",
-    "actionHref": "#metric-grid-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": false,
-    "selected": false,
-    "checked": false,
-    "disabled": false,
-    "outgoing": true,
-    "open": true,
-    "number": 2,
-    "count": 32,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 2",
-    "items": [
-      {
-        "label": "Nested option A",
-        "value": "nested-a"
-      },
-      {
-        "label": "Nested option B",
-        "value": "nested-b"
-      }
-    ],
-    "links": [
-      {
-        "label": "Documentation",
-        "href": "#documentation"
-      },
-      {
-        "label": "API reference",
-        "href": "#api-reference"
-      }
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
+    "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"
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-metric-grid-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-metric-grid-columns" name="pg_columns" type="number" value="4" /></label><label class="playground-field" for="playground-metric-grid-tabletColumns"><span><strong>tablet Columns</strong><small>number</small></span><input id="playground-metric-grid-tabletColumns" name="pg_tabletColumns" type="number" value="2" /></label><label class="playground-field" for="playground-metric-grid-mobileColumns"><span><strong>mobile Columns</strong><small>number</small></span><input id="playground-metric-grid-mobileColumns" name="pg_mobileColumns" type="number" value="1" /></label><label class="playground-field" for="playground-metric-grid-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-metric-grid-gap" name="pg_gap"><option value="md" selected>md</option><option value="sm">sm</option><option value="lg">lg</option></select></label><label class="playground-toggle" for="playground-metric-grid-equalHeight"><span><strong>equal Height</strong><small>boolean</small></span><input id="playground-metric-grid-equalHeight" name="pg_equalHeight" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-metric-grid-dividers"><span><strong>dividers</strong><small>boolean</small></span><input id="playground-metric-grid-dividers" name="pg_dividers" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-metric-grid-size"><span><strong>size</strong><small>string</small></span><select id="playground-metric-grid-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-metric-grid-color"><span><strong>color</strong><small>string</small></span><select id="playground-metric-grid-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-metric-grid-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-metric-grid-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-metric-grid-class"><span><strong>class</strong><small>string</small></span><input id="playground-metric-grid-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-metric-grid-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-metric-grid-columns" name="pg_columns" type="number" value="3" /></label><label class="playground-field" for="playground-metric-grid-tabletColumns"><span><strong>tablet Columns</strong><small>number</small></span><input id="playground-metric-grid-tabletColumns" name="pg_tabletColumns" type="number" value="2" /></label><label class="playground-field" for="playground-metric-grid-mobileColumns"><span><strong>mobile Columns</strong><small>number</small></span><input id="playground-metric-grid-mobileColumns" name="pg_mobileColumns" type="number" value="1" /></label><label class="playground-field" for="playground-metric-grid-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-metric-grid-gap" name="pg_gap"><option value="md" selected>md</option><option value="none">none</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="xs">xs</option><option value="2xl">2xl</option></select></label><label class="playground-toggle" for="playground-metric-grid-equalHeight"><span><strong>equal Height</strong><small>boolean</small></span><input id="playground-metric-grid-equalHeight" name="pg_equalHeight" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-metric-grid-dividers"><span><strong>dividers</strong><small>boolean</small></span><input id="playground-metric-grid-dividers" name="pg_dividers" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-metric-grid-size"><span><strong>size</strong><small>string</small></span><select id="playground-metric-grid-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-metric-grid-color"><span><strong>color</strong><small>string</small></span><select id="playground-metric-grid-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-metric-grid-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-metric-grid-variant" name="pg_variant"><option value="default" selected>default</option><option value="panel">panel</option><option value="soft">soft</option></select></label><label class="playground-field" for="playground-metric-grid-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-metric-grid-maxWidth" name="pg_maxWidth"><option value="full" selected>full</option><option value="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="wide">wide</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-metric-grid-minItemWidth"><span><strong>min Item Width</strong><small>string</small></span><input id="playground-metric-grid-minItemWidth" name="pg_minItemWidth" type="text" value="" /></label><label class="playground-field" for="playground-metric-grid-class"><span><strong>class</strong><small>string</small></span><input id="playground-metric-grid-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -268,393 +195,196 @@ page MetricGridDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Three-column KPI grid</h2><p>Display operational values in a full-width, responsive grid.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="metric-grid-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="MetricGrid" items="[{&quot;id&quot;:&quot;metric-grid-0-1&quot;,&quot;key&quot;:&quot;metric-grid-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#metric-grid-demo&quot;,&quot;actionHref&quot;:&quot;#metric-grid-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;metric-grid-0-2&quot;,&quot;key&quot;:&quot;metric-grid-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#metric-grid-demo&quot;,&quot;actionHref&quot;:&quot;#metric-grid-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" columns="4" tabletColumns="2" mobileColumns="1" equalHeight="true" dividers="false" size="default" variant="default" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><MetricGrid items='[{"label":"Public services","value":"24","description":"Citizen-facing services available online.","icon":"icon-[lucide--hand-heart]","trend":"+4","trendLabel":"this release","trendDirection":"up","color":"primary"},{"label":"Police stations","value":"126","description":"Searchable station and jurisdiction entries.","icon":"icon-[lucide--landmark]","trend":"Updated","trendLabel":"today","color":"info"},{"label":"Availability","value":"99.9","suffix":"%","description":"Target service availability.","icon":"icon-[lucide--activity]","trend":"Stable","trendLabel":"30 days","trendDirection":"positive","color":"success"}]' columns="3" tabletColumns="2" mobileColumns="1" gap="lg" equalHeight="true" dividers="false" size="default" variant="default" maxWidth="full" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Three-column KPI grid usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;MetricGrid
   items='[
     &#123;
-      "id": "metric-grid-0-1",
-      "key": "metric-grid-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#metric-grid-demo",
-      "actionHref": "#metric-grid-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "Public services",
+      "value": "24",
+      "description": "Citizen-facing services available online.",
+      "icon": "icon-[lucide--hand-heart]",
+      "trend": "+4",
+      "trendLabel": "this release",
+      "trendDirection": "up",
+      "color": "primary"
     &#125;,
     &#123;
-      "id": "metric-grid-0-2",
-      "key": "metric-grid-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#metric-grid-demo",
-      "actionHref": "#metric-grid-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "Police stations",
+      "value": "126",
+      "description": "Searchable station and jurisdiction entries.",
+      "icon": "icon-[lucide--landmark]",
+      "trend": "Updated",
+      "trendLabel": "today",
+      "color": "info"
+    &#125;,
+    &#123;
+      "label": "Availability",
+      "value": "99.9",
+      "suffix": "%",
+      "description": "Target service availability.",
+      "icon": "icon-[lucide--activity]",
+      "trend": "Stable",
+      "trendLabel": "30 days",
+      "trendDirection": "positive",
+      "color": "success"
     &#125;
   ]'
+  columns="3"
+  gap="lg"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
+          <div><span class="demo-case-eyebrow">Compact</span><h2>Unified metrics bar</h2><p>Use dividers to present compact metrics as one cohesive surface.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="metric-grid-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="MetricGrid" items="[{&quot;id&quot;:&quot;metric-grid-1-1&quot;,&quot;key&quot;:&quot;metric-grid-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#metric-grid-demo&quot;,&quot;actionHref&quot;:&quot;#metric-grid-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;metric-grid-1-2&quot;,&quot;key&quot;:&quot;metric-grid-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#metric-grid-demo&quot;,&quot;actionHref&quot;:&quot;#metric-grid-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" columns="4" tabletColumns="2" mobileColumns="1" equalHeight="true" dividers="false" size="sm" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><MetricGrid items='[{"label":"Public services","value":"24","description":"Citizen-facing services available online.","icon":"icon-[lucide--hand-heart]","trend":"+4","trendLabel":"this release","trendDirection":"up","color":"primary"},{"label":"Police stations","value":"126","description":"Searchable station and jurisdiction entries.","icon":"icon-[lucide--landmark]","trend":"Updated","trendLabel":"today","color":"info"},{"label":"Availability","value":"99.9","suffix":"%","description":"Target service availability.","icon":"icon-[lucide--activity]","trend":"Stable","trendLabel":"30 days","trendDirection":"positive","color":"success"}]' columns="3" tabletColumns="2" mobileColumns="1" gap="none" equalHeight="true" dividers="true" size="sm" variant="secondary" maxWidth="wide" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Unified metrics bar usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;MetricGrid
   items='[
     &#123;
-      "id": "metric-grid-1-1",
-      "key": "metric-grid-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#metric-grid-demo",
-      "actionHref": "#metric-grid-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "Public services",
+      "value": "24",
+      "description": "Citizen-facing services available online.",
+      "icon": "icon-[lucide--hand-heart]",
+      "trend": "+4",
+      "trendLabel": "this release",
+      "trendDirection": "up",
+      "color": "primary"
     &#125;,
     &#123;
-      "id": "metric-grid-1-2",
-      "key": "metric-grid-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#metric-grid-demo",
-      "actionHref": "#metric-grid-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "Police stations",
+      "value": "126",
+      "description": "Searchable station and jurisdiction entries.",
+      "icon": "icon-[lucide--landmark]",
+      "trend": "Updated",
+      "trendLabel": "today",
+      "color": "info"
+    &#125;,
+    &#123;
+      "label": "Availability",
+      "value": "99.9",
+      "suffix": "%",
+      "description": "Target service availability.",
+      "icon": "icon-[lucide--activity]",
+      "trend": "Stable",
+      "trendLabel": "30 days",
+      "trendDirection": "positive",
+      "color": "success"
     &#125;
   ]'
+  columns="3"
+  gap="none"
+  dividers="true"
   size="sm"
   variant="secondary"
+  maxWidth="wide"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Auto-fit monitoring grid</h2><p>Allow cards to wrap automatically when the number of metrics changes.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="metric-grid-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="MetricGrid" items="[{&quot;id&quot;:&quot;metric-grid-2-1&quot;,&quot;key&quot;:&quot;metric-grid-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#metric-grid-demo&quot;,&quot;actionHref&quot;:&quot;#metric-grid-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;metric-grid-2-2&quot;,&quot;key&quot;:&quot;metric-grid-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#metric-grid-demo&quot;,&quot;actionHref&quot;:&quot;#metric-grid-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" columns="4" tabletColumns="2" mobileColumns="1" equalHeight="true" dividers="false" size="lg" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><MetricGrid items='[{"label":"Public services","value":"24","description":"Citizen-facing services available online.","icon":"icon-[lucide--hand-heart]","trend":"+4","trendLabel":"this release","trendDirection":"up","color":"primary"},{"label":"Police stations","value":"126","description":"Searchable station and jurisdiction entries.","icon":"icon-[lucide--landmark]","trend":"Updated","trendLabel":"today","color":"info"},{"label":"Availability","value":"99.9","suffix":"%","description":"Target service availability.","icon":"icon-[lucide--activity]","trend":"Stable","trendLabel":"30 days","trendDirection":"positive","color":"success"},{"label":"Response time","value":"1.8","suffix":"s","description":"Median API response","icon":"icon-[lucide--timer]","color":"warning","progress":72,"progressLabel":"Target"}]' columns="4" tabletColumns="2" mobileColumns="1" equalHeight="true" dividers="false" size="lg" variant="soft" maxWidth="full" minItemWidth="17rem" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Auto-fit monitoring grid usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;MetricGrid
   items='[
     &#123;
-      "id": "metric-grid-2-1",
-      "key": "metric-grid-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#metric-grid-demo",
-      "actionHref": "#metric-grid-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
+      "label": "Public services",
+      "value": "24",
+      "description": "Citizen-facing services available online.",
+      "icon": "icon-[lucide--hand-heart]",
+      "trend": "+4",
+      "trendLabel": "this release",
+      "trendDirection": "up",
+      "color": "primary"
     &#125;,
     &#123;
-      "id": "metric-grid-2-2",
-      "key": "metric-grid-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#metric-grid-demo",
-      "actionHref": "#metric-grid-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
+      "label": "Police stations",
+      "value": "126",
+      "description": "Searchable station and jurisdiction entries.",
+      "icon": "icon-[lucide--landmark]",
+      "trend": "Updated",
+      "trendLabel": "today",
+      "color": "info"
+    &#125;,
+    &#123;
+      "label": "Availability",
+      "value": "99.9",
+      "suffix": "%",
+      "description": "Target service availability.",
+      "icon": "icon-[lucide--activity]",
+      "trend": "Stable",
+      "trendLabel": "30 days",
+      "trendDirection": "positive",
+      "color": "success"
+    &#125;,
+    &#123;
+      "label": "Response time",
+      "value": "1.8",
+      "suffix": "s",
+      "description": "Median API response",
+      "icon": "icon-[lucide--timer]",
+      "color": "warning",
+      "progress": 72,
+      "progressLabel": "Target"
     &#125;
   ]'
   size="lg"
-  variant="success"
+  variant="soft"
+  minItemWidth="17rem"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>4</code></td><td>No</td></tr><tr><td><code>tabletColumns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>mobileColumns</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>equalHeight</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>dividers</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div><div><code>@action</code><span>Fires when the component's primary or item action is activated.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;MetricGrid
+  @select='console.log(event.detail)'
+  @action='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"MetricGrid\"], [data-component=\"MetricGrid\"]")
+
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)
+
+component?.addEventListener("action", (event) =&gt; &#123;
+  console.log("action", event.detail)
+&#125;)</code></pre></section></div></div></section>
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>4</code></td><td>No</td></tr><tr><td><code>tabletColumns</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>mobileColumns</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>gap</code></td><td>string</td><td><code>"md"</code></td><td>No</td></tr><tr><td><code>equalHeight</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>dividers</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"full"</code></td><td>No</td></tr><tr><td><code>minItemWidth</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#metric-grid-demo-1">Production default</a><a href="#metric-grid-demo-2">Compact application</a><a href="#metric-grid-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#metric-grid-demo-1">Three-column KPI grid</a><a href="#metric-grid-demo-2">Unified metrics bar</a><a href="#metric-grid-demo-3">Auto-fit monitoring grid</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/link"><small>Previous</small><strong>← Link</strong></a>
-      <a href="/components/public-page-shell"><small>Next</small><strong>Public Page Shell →</strong></a>
+      <a href="/components/metric-card"><small>Previous</small><strong>← Metric Card</strong></a>
+      <a href="/components/stats-bar"><small>Next</small><strong>Stats Bar →</strong></a>
     </nav>
   }
 }
diff --git a/examples/component-showcase/app/pages/components/modal.wrn b/examples/component-showcase/app/pages/components/modal.wrn
index abd58100..4695ae95 100644
--- a/examples/component-showcase/app/pages/components/modal.wrn
+++ b/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_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_title = ctx.url.searchParams.get("pg_title") ?? "Modal example"
+  state playground_open = (ctx.url.searchParams.get("pg_open") ?? "false") === "true"
+  state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true"
+  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_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom"
+  state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
+  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>
-        <div class="detail-badges"><span>8 props</span><span>1 slots</span><span>4 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <p>Present an accessible modal dialog with focus management, confirmation, cancellation, slots, and responsive sizing.</p>
+        <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>
-          <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>
+          <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-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 class="playground-toggle" for="playground-modal-closeOnConfirm"><span><strong>close On Confirm</strong><small>boolean</small></span><input id="playground-modal-closeOnConfirm" name="pg_closeOnConfirm" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-modal-showFooter"><span><strong>show Footer</strong><small>boolean</small></span><input id="playground-modal-showFooter" name="pg_showFooter" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-modal-cancelLabel"><span><strong>cancel Label</strong><small>string</small></span><input id="playground-modal-cancelLabel" name="pg_cancelLabel" type="text" value="Modal" /></label><label class="playground-field" for="playground-modal-cancelIcon"><span><strong>cancel Icon</strong><small>string</small></span><input id="playground-modal-cancelIcon" name="pg_cancelIcon" type="text" value="" /></label><label class="playground-field" for="playground-modal-confirmLabel"><span><strong>confirm Label</strong><small>string</small></span><input id="playground-modal-confirmLabel" name="pg_confirmLabel" type="text" value="Modal" /></label><label class="playground-field" for="playground-modal-confirmIcon"><span><strong>confirm Icon</strong><small>string</small></span><input id="playground-modal-confirmIcon" name="pg_confirmIcon" type="text" value="" /></label><label class="playground-toggle" for="playground-modal-confirmDisabled"><span><strong>confirm Disabled</strong><small>boolean</small></span><input id="playground-modal-confirmDisabled" name="pg_confirmDisabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-modal-confirmLoading"><span><strong>confirm Loading</strong><small>boolean</small></span><input id="playground-modal-confirmLoading" name="pg_confirmLoading" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-modal-destructive"><span><strong>destructive</strong><small>boolean</small></span><input id="playground-modal-destructive" name="pg_destructive" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-modal-triggerLabel"><span><strong>trigger Label</strong><small>string</small></span><input id="playground-modal-triggerLabel" name="pg_triggerLabel" type="text" value="Open playground modal" /></label><label class="playground-field" for="playground-modal-triggerIcon"><span><strong>trigger Icon</strong><small>string</small></span><input id="playground-modal-triggerIcon" name="pg_triggerIcon" type="text" value="" /></label><label class="playground-toggle" for="playground-modal-scrollable"><span><strong>scrollable</strong><small>boolean</small></span><input id="playground-modal-scrollable" name="pg_scrollable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></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>
         </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"
-  description="A polished default modal for a modern application."
-  open="true"
+  title="Confirm service request"
+  description="Review the information before continuing."
+  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"
-  description="A compact configuration for dashboards and dense product surfaces."
-  open="true"
+  variant="outline"
   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"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  open="true"
+  variant="soft"
   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;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>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("open", (event) =&gt; &#123;
+  console.log("open", event.detail)
+&#125;)
+
+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">
diff --git a/examples/component-showcase/app/pages/components/nav.wrn b/examples/component-showcase/app/pages/components/nav.wrn
index dd80454f..4503acea 100644
--- a/examples/component-showcase/app/pages/components/nav.wrn
+++ b/examples/component-showcase/app/pages/components/nav.wrn
@@ -4,7 +4,7 @@ page NavDetail {
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_label = ctx.url.searchParams.get("pg_label") ?? "Nav"
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"nav-0-1\",\n    \"key\": \"nav-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#nav-demo\",\n    \"actionHref\": \"#nav-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"nav-0-2\",\n    \"key\": \"nav-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#nav-demo\",\n    \"actionHref\": \"#nav-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"nav-0-1\",\"key\":\"nav-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#nav-demo\",\"actionHref\":\"#nav-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"nav-0-2\",\"key\":\"nav-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#nav-demo\",\"actionHref\":\"#nav-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
   state playground_active = ctx.url.searchParams.get("pg_active") ?? ""
   state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
@@ -25,12 +25,12 @@ page NavDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Nav" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Nav" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="select,change">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Nav</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="Nav" size="{playground_size}" color="{playground_color}" label="{playground_label}" items="{playground_items}" active="{playground_active}" orientation="{playground_orientation}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Nav size='{playground_size}' color='{playground_color}' label='{playground_label}' items='{playground_items}' active='{playground_active}' orientation='{playground_orientation}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Nav
@@ -145,6 +145,7 @@ page NavDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -270,7 +271,8 @@ page NavDetail {
         <div class="demo-workbench">
           <div id="nav-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Nav" size="default" label="Nav" items="[{&quot;id&quot;:&quot;nav-0-1&quot;,&quot;key&quot;:&quot;nav-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#nav-demo&quot;,&quot;actionHref&quot;:&quot;#nav-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;nav-0-2&quot;,&quot;key&quot;:&quot;nav-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#nav-demo&quot;,&quot;actionHref&quot;:&quot;#nav-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Nav size="default" label="Nav" items='[{"id":"nav-0-1","key":"nav-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#nav-demo","actionHref":"#nav-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"nav-0-2","key":"nav-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#nav-demo","actionHref":"#nav-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -395,7 +397,8 @@ page NavDetail {
         <div class="demo-workbench">
           <div id="nav-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Nav" size="sm" label="Compact example" items="[{&quot;id&quot;:&quot;nav-1-1&quot;,&quot;key&quot;:&quot;nav-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#nav-demo&quot;,&quot;actionHref&quot;:&quot;#nav-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;nav-1-2&quot;,&quot;key&quot;:&quot;nav-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#nav-demo&quot;,&quot;actionHref&quot;:&quot;#nav-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Nav size="sm" label="Compact example" items='[{"id":"nav-1-1","key":"nav-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#nav-demo","actionHref":"#nav-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"nav-1-2","key":"nav-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#nav-demo","actionHref":"#nav-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -522,7 +525,8 @@ page NavDetail {
         <div class="demo-workbench">
           <div id="nav-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Nav" size="lg" label="Advanced example" items="[{&quot;id&quot;:&quot;nav-2-1&quot;,&quot;key&quot;:&quot;nav-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#nav-demo&quot;,&quot;actionHref&quot;:&quot;#nav-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;nav-2-2&quot;,&quot;key&quot;:&quot;nav-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#nav-demo&quot;,&quot;actionHref&quot;:&quot;#nav-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Nav size="lg" label="Advanced example" items='[{"id":"nav-2-1","key":"nav-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#nav-demo","actionHref":"#nav-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"nav-2-2","key":"nav-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#nav-demo","actionHref":"#nav-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -641,11 +645,18 @@ page NavDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item or option is selected.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;Nav
+  @select='console.log(event.detail)'
+  @change='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"Nav\"], [data-component=\"Nav\"]")
 
-component.addEventListener('select', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Nav"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
diff --git a/examples/component-showcase/app/pages/components/navbar.wrn b/examples/component-showcase/app/pages/components/navbar.wrn
index 93df5ef6..07a3b3b8 100644
--- a/examples/component-showcase/app/pages/components/navbar.wrn
+++ b/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_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_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_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 = 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 = 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_openOnHover = ctx.url.searchParams.get("pg_openOnHover") ?? "false"
+  state playground_sticky = (ctx.url.searchParams.get("pg_sticky") ?? "false") === "true"
+  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;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;]}]" sticky="false" openOnHover="false" mobileLabel="Navbar" class="showcase-instance showcase-instance--1"><div slot="topbar" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>topbar 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"><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;,&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;]}]" sticky="false" openOnHover="false" mobileLabel="Compact example" class="showcase-instance showcase-instance--2"><div slot="topbar" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>topbar 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"><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;:&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;]}]" sticky="false" openOnHover="false" mobileLabel="Advanced example" class="showcase-instance showcase-instance--3"><div slot="topbar" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>topbar 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"><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;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("toggle", (event) =&gt; &#123;
+  console.log("toggle", 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("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">
diff --git a/examples/component-showcase/app/pages/components/page-header.wrn b/examples/component-showcase/app/pages/components/page-header.wrn
index d0c5340f..f0804fbb 100644
--- a/examples/component-showcase/app/pages/components/page-header.wrn
+++ b/examples/component-showcase/app/pages/components/page-header.wrn
@@ -5,11 +5,17 @@ page PageHeaderDetail {
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Page Header example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default page header for a modern application."
   state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
+  state playground_id = ctx.url.searchParams.get("pg_id") ?? "page-title"
   state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
+  state playground_centered = (ctx.url.searchParams.get("pg_centered") ?? "false") === "true"
+  state playground_compact = (ctx.url.searchParams.get("pg_compact") ?? "false") === "true"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
-  state playground_compact = ctx.url.searchParams.get("pg_compact") ?? "false"
-  state playground_showBreadcrumbs = ctx.url.searchParams.get("pg_showBreadcrumbs") ?? "true"
-  state playground_breadcrumbs = ctx.url.searchParams.get("pg_breadcrumbs") ?? "[\n  {\n    \"id\": \"page-header-0-1\",\n    \"key\": \"page-header-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#page-header-demo\",\n    \"actionHref\": \"#page-header-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"page-header-0-2\",\n    \"key\": \"page-header-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#page-header-demo\",\n    \"actionHref\": \"#page-header-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "full"
+  state playground_showBreadcrumbs = (ctx.url.searchParams.get("pg_showBreadcrumbs") ?? "true") === "true"
+  state playground_breadcrumbs = JSON.parse(ctx.url.searchParams.get("pg_breadcrumbs") ?? "[{\"label\":\"Home\",\"href\":\"/\",\"icon\":\"icon-[lucide--house]\"},{\"label\":\"Components\",\"href\":\"/base\"},{\"label\":\"Page header\",\"current\":true}]")
+  state playground_breadcrumbParent = ctx.url.searchParams.get("pg_breadcrumbParent") ?? ""
+  state playground_breadcrumbParentHref = ctx.url.searchParams.get("pg_breadcrumbParentHref") ?? "#page-header-demo"
+  state playground_breadcrumbCurrent = ctx.url.searchParams.get("pg_breadcrumbCurrent") ?? ""
   state playground_primaryLabel = ctx.url.searchParams.get("pg_primaryLabel") ?? "Page Header"
   state playground_primaryHref = ctx.url.searchParams.get("pg_primaryHref") ?? "#page-header-demo"
   state playground_primaryIcon = ctx.url.searchParams.get("pg_primaryIcon") ?? ""
@@ -18,30 +24,31 @@ page PageHeaderDetail {
   state playground_secondaryIcon = ctx.url.searchParams.get("pg_secondaryIcon") ?? ""
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
+  state playground_borderBottom = (ctx.url.searchParams.get("pg_borderBottom") ?? "true") === "true"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Page Header"
-    description = "Public and application page header with breadcrumbs, metadata, and actions."
+    description = "Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/blocks">Blocks</a><span aria-hidden="true">/</span><span>Page Header</span>
+      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/marketing">Marketing</a><span aria-hidden="true">/</span><span>Page Header</span>
     </nav>
     <header class="detail-hero">
       <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Blocks component</span>
+        <span class="showcase-eyebrow">Marketing component</span>
         <h1>Page Header</h1>
-        <p>Public and application page header with breadcrumbs, metadata, and actions.</p>
-        <div class="detail-badges"><span>18 props</span><span>3 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <p>Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.</p>
+        <div class="detail-badges"><span>25 props</span><span>3 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="PageHeader" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="PageHeader" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Page Header</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="PageHeader" eyebrow="{playground_eyebrow}" title="{playground_title}" description="{playground_description}" icon="{playground_icon}" align="{playground_align}" size="{playground_size}" compact="{playground_compact}" showBreadcrumbs="{playground_showBreadcrumbs}" breadcrumbs="{playground_breadcrumbs}" primaryLabel="{playground_primaryLabel}" primaryHref="{playground_primaryHref}" primaryIcon="{playground_primaryIcon}" secondaryLabel="{playground_secondaryLabel}" secondaryHref="{playground_secondaryHref}" secondaryIcon="{playground_secondaryIcon}" color="{playground_color}" variant="{playground_variant}" class="{playground_class}"><div slot="meta" class="showcase-slot">meta slot</div><div slot="actions" class="showcase-slot">actions slot</div></div></div>
+          <div class="playground-preview-source" data-playground-preview><PageHeader eyebrow='{playground_eyebrow}' title='{playground_title}' description='{playground_description}' icon='{playground_icon}' id='{playground_id}' align='{playground_align}' centered='{playground_centered}' compact='{playground_compact}' size='{playground_size}' maxWidth='{playground_maxWidth}' showBreadcrumbs='{playground_showBreadcrumbs}' breadcrumbs='{playground_breadcrumbs}' breadcrumbParent='{playground_breadcrumbParent}' breadcrumbParentHref='{playground_breadcrumbParentHref}' breadcrumbCurrent='{playground_breadcrumbCurrent}' primaryLabel='{playground_primaryLabel}' primaryHref='{playground_primaryHref}' primaryIcon='{playground_primaryIcon}' secondaryLabel='{playground_secondaryLabel}' secondaryHref='{playground_secondaryHref}' secondaryIcon='{playground_secondaryIcon}' color='{playground_color}' variant='{playground_variant}' borderBottom='{playground_borderBottom}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;PageHeader
@@ -157,125 +164,39 @@ page PageHeaderDetail {
       ]
     &#125;
   ]'
+  breadcrumbParentHref="#page-header-demo"
   primaryLabel="Page Header"
   primaryHref="#page-header-demo"
   secondaryLabel="Page Header"
   secondaryHref="#page-header-demo"&gt;
-  &lt;!-- Add meta, actions, default slot content here --&gt;
+  &lt;div data-slot="meta"&gt;
+    &lt;div class="showcase-slot"&gt;meta slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="actions"&gt;
+    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/PageHeader&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>18 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-page-header-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-page-header-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-page-header-title"><span><strong>title</strong><small>string</small></span><input id="playground-page-header-title" name="pg_title" type="text" value="Page Header example" /></label><label class="playground-field" for="playground-page-header-description"><span><strong>description</strong><small>string</small></span><input id="playground-page-header-description" name="pg_description" type="text" value="A polished default page header for a modern application." /></label><label class="playground-field" for="playground-page-header-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-page-header-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-page-header-align"><span><strong>align</strong><small>string</small></span><select id="playground-page-header-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="end">end</option></select></label><label class="playground-field" for="playground-page-header-size"><span><strong>size</strong><small>string</small></span><select id="playground-page-header-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option><option value="compact">compact</option></select></label><label class="playground-toggle" for="playground-page-header-compact"><span><strong>compact</strong><small>boolean</small></span><input id="playground-page-header-compact" name="pg_compact" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-page-header-showBreadcrumbs"><span><strong>show Breadcrumbs</strong><small>boolean</small></span><input id="playground-page-header-showBreadcrumbs" name="pg_showBreadcrumbs" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-page-header-breadcrumbs"><span><strong>breadcrumbs</strong><small>string</small></span><textarea id="playground-page-header-breadcrumbs" name="pg_breadcrumbs" rows="5" spellcheck="false" data-playground-json>[
+          <header><div><span>Component props</span><strong>25 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
+          <div class="playground-fields"><label class="playground-field" for="playground-page-header-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-page-header-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-page-header-title"><span><strong>title</strong><small>string</small></span><input id="playground-page-header-title" name="pg_title" type="text" value="Page Header example" /></label><label class="playground-field" for="playground-page-header-description"><span><strong>description</strong><small>string</small></span><input id="playground-page-header-description" name="pg_description" type="text" value="A polished default page header for a modern application." /></label><label class="playground-field" for="playground-page-header-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-page-header-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-page-header-id"><span><strong>id</strong><small>string</small></span><input id="playground-page-header-id" name="pg_id" type="text" value="page-title" /></label><label class="playground-field" for="playground-page-header-align"><span><strong>align</strong><small>string</small></span><select id="playground-page-header-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-toggle" for="playground-page-header-centered"><span><strong>centered</strong><small>boolean</small></span><input id="playground-page-header-centered" name="pg_centered" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-page-header-compact"><span><strong>compact</strong><small>boolean</small></span><input id="playground-page-header-compact" name="pg_compact" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-page-header-size"><span><strong>size</strong><small>string</small></span><select id="playground-page-header-size" name="pg_size"><option value="default" selected>default</option><option value="small">small</option><option value="large">large</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-page-header-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-page-header-maxWidth" name="pg_maxWidth"><option value="full" selected>full</option><option value="xl">xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option></select></label><label class="playground-toggle" for="playground-page-header-showBreadcrumbs"><span><strong>show Breadcrumbs</strong><small>boolean</small></span><input id="playground-page-header-showBreadcrumbs" name="pg_showBreadcrumbs" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-page-header-breadcrumbs"><span><strong>breadcrumbs</strong><small>string</small></span><textarea id="playground-page-header-breadcrumbs" name="pg_breadcrumbs" rows="5" spellcheck="false" data-playground-json>[
   {
-    "id": "page-header-0-1",
-    "key": "page-header-0-1",
-    "value": "primary",
-    "label": "Primary workflow",
-    "title": "Primary workflow",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "A configurable sample message.",
-    "href": "#page-header-demo",
-    "actionHref": "#page-header-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": true,
-    "selected": true,
-    "checked": true,
-    "disabled": false,
-    "outgoing": false,
-    "open": true,
-    "number": 1,
-    "count": 16,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 1",
-    "items": [
-      {
-        "label": "Nested option A",
-        "value": "nested-a"
-      },
-      {
-        "label": "Nested option B",
-        "value": "nested-b"
-      }
-    ],
-    "links": [
-      {
-        "label": "Documentation",
-        "href": "#documentation"
-      },
-      {
-        "label": "API reference",
-        "href": "#api-reference"
-      }
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
+    "label": "Home",
+    "href": "/",
+    "icon": "icon-[lucide--house]"
   },
   {
-    "id": "page-header-0-2",
-    "key": "page-header-0-2",
-    "value": "secondary",
-    "label": "Additional option",
-    "title": "Supporting example",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "Another configurable message.",
-    "href": "#page-header-demo",
-    "actionHref": "#page-header-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": false,
-    "selected": false,
-    "checked": false,
-    "disabled": false,
-    "outgoing": true,
-    "open": true,
-    "number": 2,
-    "count": 32,
-    "percentage": 72,
-    "color": "#7c3aed",
-    "target": "_self",
-    "ariaLabel": "Open primary workflow 2",
-    "items": [
-      {
-        "label": "Nested option A",
-        "value": "nested-a"
-      },
-      {
-        "label": "Nested option B",
-        "value": "nested-b"
-      }
-    ],
-    "links": [
-      {
-        "label": "Documentation",
-        "href": "#documentation"
-      },
-      {
-        "label": "API reference",
-        "href": "#api-reference"
-      }
-    ],
-    "values": [
-      "Included",
-      "Standard"
-    ]
+    "label": "Components",
+    "href": "/base"
+  },
+  {
+    "label": "Page header",
+    "current": true
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-page-header-primaryLabel"><span><strong>primary Label</strong><small>string</small></span><input id="playground-page-header-primaryLabel" name="pg_primaryLabel" type="text" value="Page Header" /></label><label class="playground-field" for="playground-page-header-primaryHref"><span><strong>primary Href</strong><small>string</small></span><input id="playground-page-header-primaryHref" name="pg_primaryHref" type="text" value="#page-header-demo" /></label><label class="playground-field" for="playground-page-header-primaryIcon"><span><strong>primary Icon</strong><small>string</small></span><input id="playground-page-header-primaryIcon" name="pg_primaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-page-header-secondaryLabel"><span><strong>secondary Label</strong><small>string</small></span><input id="playground-page-header-secondaryLabel" name="pg_secondaryLabel" type="text" value="Page Header" /></label><label class="playground-field" for="playground-page-header-secondaryHref"><span><strong>secondary Href</strong><small>string</small></span><input id="playground-page-header-secondaryHref" name="pg_secondaryHref" type="text" value="#page-header-demo" /></label><label class="playground-field" for="playground-page-header-secondaryIcon"><span><strong>secondary Icon</strong><small>string</small></span><input id="playground-page-header-secondaryIcon" name="pg_secondaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-page-header-color"><span><strong>color</strong><small>string</small></span><select id="playground-page-header-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-page-header-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-page-header-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-page-header-class"><span><strong>class</strong><small>string</small></span><input id="playground-page-header-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-page-header-breadcrumbParent"><span><strong>breadcrumb Parent</strong><small>string</small></span><input id="playground-page-header-breadcrumbParent" name="pg_breadcrumbParent" type="text" value="" /></label><label class="playground-field" for="playground-page-header-breadcrumbParentHref"><span><strong>breadcrumb Parent Href</strong><small>string</small></span><input id="playground-page-header-breadcrumbParentHref" name="pg_breadcrumbParentHref" type="text" value="#page-header-demo" /></label><label class="playground-field" for="playground-page-header-breadcrumbCurrent"><span><strong>breadcrumb Current</strong><small>string</small></span><input id="playground-page-header-breadcrumbCurrent" name="pg_breadcrumbCurrent" type="text" value="" /></label><label class="playground-field" for="playground-page-header-primaryLabel"><span><strong>primary Label</strong><small>string</small></span><input id="playground-page-header-primaryLabel" name="pg_primaryLabel" type="text" value="Page Header" /></label><label class="playground-field" for="playground-page-header-primaryHref"><span><strong>primary Href</strong><small>string</small></span><input id="playground-page-header-primaryHref" name="pg_primaryHref" type="text" value="#page-header-demo" /></label><label class="playground-field" for="playground-page-header-primaryIcon"><span><strong>primary Icon</strong><small>string</small></span><input id="playground-page-header-primaryIcon" name="pg_primaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-page-header-secondaryLabel"><span><strong>secondary Label</strong><small>string</small></span><input id="playground-page-header-secondaryLabel" name="pg_secondaryLabel" type="text" value="Page Header" /></label><label class="playground-field" for="playground-page-header-secondaryHref"><span><strong>secondary Href</strong><small>string</small></span><input id="playground-page-header-secondaryHref" name="pg_secondaryHref" type="text" value="#page-header-demo" /></label><label class="playground-field" for="playground-page-header-secondaryIcon"><span><strong>secondary Icon</strong><small>string</small></span><input id="playground-page-header-secondaryIcon" name="pg_secondaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-page-header-color"><span><strong>color</strong><small>string</small></span><select id="playground-page-header-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="info">info</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option></select></label><label class="playground-field" for="playground-page-header-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-page-header-variant" name="pg_variant"><option value="default" selected>default</option><option value="minimal">minimal</option><option value="soft">soft</option><option value="raised">raised</option><option value="tinted">tinted</option><option value="solid">solid</option></select></label><label class="playground-toggle" for="playground-page-header-borderBottom"><span><strong>border Bottom</strong><small>boolean</small></span><input id="playground-page-header-borderBottom" name="pg_borderBottom" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-page-header-class"><span><strong>class</strong><small>string</small></span><input id="playground-page-header-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -284,157 +205,78 @@ page PageHeaderDetail {
         <section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
+          <div><span class="demo-case-eyebrow">Recommended</span><h2>Page header with actions</h2><p>Introduce a service or documentation page with breadcrumbs and clear actions.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="page-header-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PageHeader" title="Page Header example" description="A polished default page header for a modern application." icon="" align="start" size="default" compact="false" showBreadcrumbs="true" breadcrumbs="[{&quot;id&quot;:&quot;page-header-0-1&quot;,&quot;key&quot;:&quot;page-header-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#page-header-demo&quot;,&quot;actionHref&quot;:&quot;#page-header-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;page-header-0-2&quot;,&quot;key&quot;:&quot;page-header-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#page-header-demo&quot;,&quot;actionHref&quot;:&quot;#page-header-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" primaryLabel="Page Header" primaryHref="#page-header-demo" secondaryLabel="Page Header" secondaryHref="#page-header-demo" variant="default" class="showcase-instance showcase-instance--1"><div slot="meta" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>meta slot</span></div><div slot="actions" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>actions slot</span></div></div></div>
+            
+            <div class="demo-render"><PageHeader eyebrow="Component showcase" title="Page headers with clear hierarchy" description="Use PageHeader for services, directories, legal pages, guides, dashboards, and public information." icon="icon-[lucide--panel-top]" align="start" centered="false" compact="false" size="default" maxWidth="full" showBreadcrumbs="true" breadcrumbs='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' breadcrumbParentHref="#page-header-demo" primaryLabel="Primary action" primaryHref="#primary" primaryIcon="icon-[lucide--arrow-down]" secondaryLabel="Secondary action" secondaryHref="#secondary" secondaryIcon="icon-[lucide--house]" variant="default" borderBottom="true" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Page header with actions usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;PageHeader
-  title="Page Header example"
-  description="A polished default page header for a modern application."
+  eyebrow="Component showcase"
+  title="Page headers with clear hierarchy"
+  description="Use PageHeader for services, directories, legal pages, guides, dashboards, and public information."
+  icon="icon-[lucide--panel-top]"
   align="start"
+  maxWidth="full"
   showBreadcrumbs="true"
   breadcrumbs='[
     &#123;
-      "id": "page-header-0-1",
-      "key": "page-header-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#page-header-demo",
-      "actionHref": "#page-header-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "Home",
+      "href": "/",
+      "icon": "icon-[lucide--house]"
     &#125;,
     &#123;
-      "id": "page-header-0-2",
-      "key": "page-header-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#page-header-demo",
-      "actionHref": "#page-header-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "Components",
+      "href": "/base"
+    &#125;,
+    &#123;
+      "label": "Page header",
+      "current": true
     &#125;
   ]'
-  primaryLabel="Page Header"
-  primaryHref="#page-header-demo"
-  secondaryLabel="Page Header"
-  secondaryHref="#page-header-demo"&gt;
-  &lt;!-- Add meta, actions, default slot content here --&gt;
+  breadcrumbParentHref="#page-header-demo"
+  primaryLabel="Primary action"
+  primaryHref="#primary"
+  primaryIcon="icon-[lucide--arrow-down]"
+  secondaryLabel="Secondary action"
+  secondaryHref="#secondary"
+  secondaryIcon="icon-[lucide--house]"&gt;
+  &lt;div data-slot="meta"&gt;
+    &lt;div class="showcase-slot"&gt;meta slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="actions"&gt;
+    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/PageHeader&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
+          <div><span class="demo-case-eyebrow">Compact</span><h2>Compact service header</h2><p>Use reduced spacing when a page already sits inside an application shell.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="page-header-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PageHeader" title="Compact Page Header" description="A compact configuration for dashboards and dense product surfaces." icon="icon-[lucide--arrow-right]" align="center" size="sm" compact="true" showBreadcrumbs="true" breadcrumbs="[{&quot;id&quot;:&quot;page-header-1-1&quot;,&quot;key&quot;:&quot;page-header-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#page-header-demo&quot;,&quot;actionHref&quot;:&quot;#page-header-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;page-header-1-2&quot;,&quot;key&quot;:&quot;page-header-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#page-header-demo&quot;,&quot;actionHref&quot;:&quot;#page-header-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" primaryLabel="Compact example" primaryHref="#page-header-demo" secondaryLabel="Compact example" secondaryHref="#page-header-demo" variant="secondary" class="showcase-instance showcase-instance--2"><div slot="meta" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>meta slot</span></div><div slot="actions" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>actions slot</span></div></div></div>
+            
+            <div class="demo-render"><PageHeader eyebrow="Citizen service" title="Track a complaint" description="Check the latest status using your complaint reference." icon="icon-[lucide--scan-search]" align="center" centered="false" compact="true" size="sm" showBreadcrumbs="true" breadcrumbs='[{"id":"page-header-1-1","key":"page-header-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#page-header-demo","actionHref":"#page-header-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"page-header-1-2","key":"page-header-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#page-header-demo","actionHref":"#page-header-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' breadcrumbParentHref="#page-header-demo" primaryLabel="Track status" primaryHref="#track" secondaryLabel="Compact example" secondaryHref="#page-header-demo" variant="soft" borderBottom="true" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Compact service header usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;PageHeader
-  title="Compact Page Header"
-  description="A compact configuration for dashboards and dense product surfaces."
-  icon="icon-[lucide--arrow-right]"
+  eyebrow="Citizen service"
+  title="Track a complaint"
+  description="Check the latest status using your complaint reference."
+  icon="icon-[lucide--scan-search]"
   align="center"
-  size="sm"
   compact="true"
+  size="sm"
   showBreadcrumbs="true"
   breadcrumbs='[
     &#123;
@@ -544,34 +386,44 @@ page PageHeaderDetail {
       ]
     &#125;
   ]'
-  primaryLabel="Compact example"
-  primaryHref="#page-header-demo"
+  breadcrumbParentHref="#page-header-demo"
+  primaryLabel="Track status"
+  primaryHref="#track"
   secondaryLabel="Compact example"
   secondaryHref="#page-header-demo"
-  variant="secondary"&gt;
-  &lt;!-- Add meta, actions, default slot content here --&gt;
+  variant="soft"&gt;
+  &lt;div data-slot="meta"&gt;
+    &lt;div class="showcase-slot"&gt;meta slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="actions"&gt;
+    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/PageHeader&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
+          <div><span class="demo-case-eyebrow">Advanced</span><h2>Centered campaign header</h2><p>Use a centered header for campaigns, guides, and high-level public information.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="page-header-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PageHeader" title="Advanced Page Header" description="A richer configuration demonstrating additional content and hierarchy." icon="icon-[lucide--trash-2]" align="end" size="lg" compact="false" showBreadcrumbs="true" breadcrumbs="[{&quot;id&quot;:&quot;page-header-2-1&quot;,&quot;key&quot;:&quot;page-header-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#page-header-demo&quot;,&quot;actionHref&quot;:&quot;#page-header-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;page-header-2-2&quot;,&quot;key&quot;:&quot;page-header-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#page-header-demo&quot;,&quot;actionHref&quot;:&quot;#page-header-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" primaryLabel="Advanced example" primaryHref="#page-header-demo" secondaryLabel="Advanced example" secondaryHref="#page-header-demo" variant="success" class="showcase-instance showcase-instance--3"><div slot="meta" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>meta slot</span></div><div slot="actions" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>actions slot</span></div></div></div>
+            
+            <div class="demo-render"><PageHeader eyebrow="Safety guide" title="Prepare your family for emergencies" description="Practical guidance for creating a plan, preparing supplies, and staying informed." icon="icon-[lucide--trash-2]" align="center" centered="true" compact="false" size="lg" maxWidth="wide" showBreadcrumbs="true" breadcrumbs='[{"id":"page-header-2-1","key":"page-header-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#page-header-demo","actionHref":"#page-header-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"page-header-2-2","key":"page-header-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#page-header-demo","actionHref":"#page-header-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' breadcrumbParentHref="#page-header-demo" primaryLabel="Advanced example" primaryHref="#page-header-demo" secondaryLabel="Advanced example" secondaryHref="#page-header-demo" variant="minimal" borderBottom="true" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Centered campaign header usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;PageHeader
-  title="Advanced Page Header"
-  description="A richer configuration demonstrating additional content and hierarchy."
+  eyebrow="Safety guide"
+  title="Prepare your family for emergencies"
+  description="Practical guidance for creating a plan, preparing supplies, and staying informed."
   icon="icon-[lucide--trash-2]"
-  align="end"
+  align="center"
+  centered="true"
   size="lg"
+  maxWidth="wide"
   showBreadcrumbs="true"
   breadcrumbs='[
     &#123;
@@ -681,26 +533,32 @@ page PageHeaderDetail {
       ]
     &#125;
   ]'
+  breadcrumbParentHref="#page-header-demo"
   primaryLabel="Advanced example"
   primaryHref="#page-header-demo"
   secondaryLabel="Advanced example"
   secondaryHref="#page-header-demo"
-  variant="success"&gt;
-  &lt;!-- Add meta, actions, default slot content here --&gt;
+  variant="minimal"&gt;
+  &lt;div data-slot="meta"&gt;
+    &lt;div class="showcase-slot"&gt;meta slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="actions"&gt;
+    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/PageHeader&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>compact</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>showBreadcrumbs</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>breadcrumbs</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>primaryLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>primaryHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>primaryIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>eyebrow</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>id</code></td><td>string</td><td><code>"page-title"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"left"</code></td><td>No</td></tr><tr><td><code>centered</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>compact</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"xl"</code></td><td>No</td></tr><tr><td><code>showBreadcrumbs</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>breadcrumbs</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>breadcrumbParent</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>breadcrumbParentHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>breadcrumbCurrent</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>primaryLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>primaryHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>primaryIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryLabel</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryHref</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>secondaryIcon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>borderBottom</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#page-header-demo-1">Production default</a><a href="#page-header-demo-2">Compact application</a><a href="#page-header-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#page-header-demo-1">Page header with actions</a><a href="#page-header-demo-2">Compact service header</a><a href="#page-header-demo-3">Centered campaign header</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/metric-card"><small>Previous</small><strong>← Metric Card</strong></a>
-      <a href="/components/portal-dashboard"><small>Next</small><strong>Portal Dashboard →</strong></a>
+      <a href="/components/marketing-section-header"><small>Previous</small><strong>← Marketing Section Header</strong></a>
+      <a href="/components/split-hero"><small>Next</small><strong>Split Hero →</strong></a>
     </nav>
   }
 }
diff --git a/examples/component-showcase/app/pages/components/pagination.wrn b/examples/component-showcase/app/pages/components/pagination.wrn
index 3f58f7db..f79d54e1 100644
--- a/examples/component-showcase/app/pages/components/pagination.wrn
+++ b/examples/component-showcase/app/pages/components/pagination.wrn
@@ -4,7 +4,7 @@ page PaginationDetail {
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_label = ctx.url.searchParams.get("pg_label") ?? "Pagination"
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"pagination-0-1\",\n    \"key\": \"pagination-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#pagination-demo\",\n    \"actionHref\": \"#pagination-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"pagination-0-2\",\n    \"key\": \"pagination-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#pagination-demo\",\n    \"actionHref\": \"#pagination-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"pagination-0-1\",\"key\":\"pagination-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#pagination-demo\",\"actionHref\":\"#pagination-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"pagination-0-2\",\"key\":\"pagination-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#pagination-demo\",\"actionHref\":\"#pagination-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
   state playground_active = ctx.url.searchParams.get("pg_active") ?? ""
   state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
@@ -25,12 +25,12 @@ page PaginationDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Pagination" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Pagination" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="change,previous,next">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Pagination</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="Pagination" size="{playground_size}" color="{playground_color}" label="{playground_label}" items="{playground_items}" active="{playground_active}" orientation="{playground_orientation}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Pagination size='{playground_size}' color='{playground_color}' label='{playground_label}' items='{playground_items}' active='{playground_active}' orientation='{playground_orientation}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Pagination
@@ -145,6 +145,7 @@ page PaginationDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -270,7 +271,8 @@ page PaginationDetail {
         <div class="demo-workbench">
           <div id="pagination-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Pagination" size="default" label="Pagination" items="[{&quot;id&quot;:&quot;pagination-0-1&quot;,&quot;key&quot;:&quot;pagination-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#pagination-demo&quot;,&quot;actionHref&quot;:&quot;#pagination-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;pagination-0-2&quot;,&quot;key&quot;:&quot;pagination-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#pagination-demo&quot;,&quot;actionHref&quot;:&quot;#pagination-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Pagination size="default" label="Pagination" items='[{"id":"pagination-0-1","key":"pagination-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#pagination-demo","actionHref":"#pagination-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"pagination-0-2","key":"pagination-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#pagination-demo","actionHref":"#pagination-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -395,7 +397,8 @@ page PaginationDetail {
         <div class="demo-workbench">
           <div id="pagination-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Pagination" size="sm" label="Compact example" items="[{&quot;id&quot;:&quot;pagination-1-1&quot;,&quot;key&quot;:&quot;pagination-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#pagination-demo&quot;,&quot;actionHref&quot;:&quot;#pagination-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;pagination-1-2&quot;,&quot;key&quot;:&quot;pagination-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#pagination-demo&quot;,&quot;actionHref&quot;:&quot;#pagination-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Pagination size="sm" label="Compact example" items='[{"id":"pagination-1-1","key":"pagination-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#pagination-demo","actionHref":"#pagination-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"pagination-1-2","key":"pagination-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#pagination-demo","actionHref":"#pagination-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -522,7 +525,8 @@ page PaginationDetail {
         <div class="demo-workbench">
           <div id="pagination-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Pagination" size="lg" label="Advanced example" items="[{&quot;id&quot;:&quot;pagination-2-1&quot;,&quot;key&quot;:&quot;pagination-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#pagination-demo&quot;,&quot;actionHref&quot;:&quot;#pagination-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;pagination-2-2&quot;,&quot;key&quot;:&quot;pagination-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#pagination-demo&quot;,&quot;actionHref&quot;:&quot;#pagination-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Pagination size="lg" label="Advanced example" items='[{"id":"pagination-2-1","key":"pagination-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#pagination-demo","actionHref":"#pagination-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"pagination-2-2","key":"pagination-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#pagination-demo","actionHref":"#pagination-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -641,11 +645,23 @@ page PaginationDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@previous</code><span>Fires when the component emits the previous event.</span></div><div><code>@next</code><span>Fires when the component emits the next event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div><div><code>@previous</code><span>Fires when the component emits the previous event.</span></div><div><code>@next</code><span>Fires when the component emits the next event.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;Pagination
+  @change='console.log(event.detail)'
+  @previous='console.log(event.detail)'
+  @next='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"Pagination\"], [data-component=\"Pagination\"]")
 
-component.addEventListener('change', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("previous", (event) =&gt; &#123;
+  console.log("previous", event.detail)
+&#125;)
+
+component?.addEventListener("next", (event) =&gt; &#123;
+  console.log("next", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Pagination"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
@@ -654,7 +670,7 @@ component.addEventListener('change', (event) =&gt; &#123;
     </div>
     <nav class="detail-pagination">
       <a href="/components/navbar"><small>Previous</small><strong>← Navbar</strong></a>
-      <a href="/components/preference-switcher"><small>Next</small><strong>Preference Switcher →</strong></a>
+      <a href="/components/scrollspy"><small>Next</small><strong>Scrollspy →</strong></a>
     </nav>
   }
 }
diff --git a/examples/component-showcase/app/pages/components/pin-input.wrn b/examples/component-showcase/app/pages/components/pin-input.wrn
index 7143a777..b580216c 100644
--- a/examples/component-showcase/app/pages/components/pin-input.wrn
+++ b/examples/component-showcase/app/pages/components/pin-input.wrn
@@ -6,25 +6,25 @@ page PinInputDetail {
   state playground_label = ctx.url.searchParams.get("pg_label") ?? "Default four-digit PIN"
   state playground_name = ctx.url.searchParams.get("pg_name") ?? "pin-input-1"
   state playground_value = ctx.url.searchParams.get("pg_value") ?? ""
-  state playground_length = ctx.url.searchParams.get("pg_length") ?? "4"
+  state playground_length = Number(ctx.url.searchParams.get("pg_length") ?? "4")
   state playground_pattern = ctx.url.searchParams.get("pg_pattern") ?? "[0-9]"
   state playground_type = ctx.url.searchParams.get("pg_type") ?? "text"
   state playground_inputMode = ctx.url.searchParams.get("pg_inputMode") ?? "numeric"
   state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "○"
   state playground_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? "one-time-code"
-  state playground_masked = ctx.url.searchParams.get("pg_masked") ?? "false"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
-  state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
-  state playground_autoFocus = ctx.url.searchParams.get("pg_autoFocus") ?? "false"
-  state playground_autoSubmit = ctx.url.searchParams.get("pg_autoSubmit") ?? "false"
-  state playground_allowPaste = ctx.url.searchParams.get("pg_allowPaste") ?? "true"
-  state playground_clearable = ctx.url.searchParams.get("pg_clearable") ?? "true"
+  state playground_masked = (ctx.url.searchParams.get("pg_masked") ?? "false") === "true"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
+  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
+  state playground_autoFocus = (ctx.url.searchParams.get("pg_autoFocus") ?? "false") === "true"
+  state playground_autoSubmit = (ctx.url.searchParams.get("pg_autoSubmit") ?? "false") === "true"
+  state playground_allowPaste = (ctx.url.searchParams.get("pg_allowPaste") ?? "true") === "true"
+  state playground_clearable = (ctx.url.searchParams.get("pg_clearable") ?? "true") === "true"
   state playground_clearLabel = ctx.url.searchParams.get("pg_clearLabel") ?? "Clear code"
   state playground_separator = ctx.url.searchParams.get("pg_separator") ?? ""
-  state playground_groupSize = ctx.url.searchParams.get("pg_groupSize") ?? "0"
+  state playground_groupSize = Number(ctx.url.searchParams.get("pg_groupSize") ?? "0")
   state playground_helpText = ctx.url.searchParams.get("pg_helpText") ?? ""
-  state playground_invalid = ctx.url.searchParams.get("pg_invalid") ?? "false"
+  state playground_invalid = (ctx.url.searchParams.get("pg_invalid") ?? "false") === "true"
   state playground_validationMessage = ctx.url.searchParams.get("pg_validationMessage") ?? ""
   state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
   seo {
@@ -44,12 +44,12 @@ page PinInputDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="PinInput" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="PinInput" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="input,change,complete,paste,clear,error">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Pin Input</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="PinInput" size="{playground_size}" color="{playground_color}" label="{playground_label}" name="{playground_name}" value="{playground_value}" length="{playground_length}" pattern="{playground_pattern}" type="{playground_type}" inputMode="{playground_inputMode}" placeholder="{playground_placeholder}" autocomplete="{playground_autocomplete}" masked="{playground_masked}" disabled="{playground_disabled}" readonly="{playground_readonly}" required="{playground_required}" autoFocus="{playground_autoFocus}" autoSubmit="{playground_autoSubmit}" allowPaste="{playground_allowPaste}" clearable="{playground_clearable}" clearLabel="{playground_clearLabel}" separator="{playground_separator}" groupSize="{playground_groupSize}" helpText="{playground_helpText}" invalid="{playground_invalid}" validationMessage="{playground_validationMessage}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><PinInput size='{playground_size}' color='{playground_color}' label='{playground_label}' name='{playground_name}' value='{playground_value}' length='{playground_length}' pattern='{playground_pattern}' type='{playground_type}' inputMode='{playground_inputMode}' placeholder='{playground_placeholder}' autocomplete='{playground_autocomplete}' masked='{playground_masked}' disabled='{playground_disabled}' readonly='{playground_readonly}' required='{playground_required}' autoFocus='{playground_autoFocus}' autoSubmit='{playground_autoSubmit}' allowPaste='{playground_allowPaste}' clearable='{playground_clearable}' clearLabel='{playground_clearLabel}' separator='{playground_separator}' groupSize='{playground_groupSize}' helpText='{playground_helpText}' invalid='{playground_invalid}' validationMessage='{playground_validationMessage}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;PinInput
@@ -58,6 +58,7 @@ page PinInputDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>26 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -76,7 +77,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="default" label="Default four-digit PIN" name="pin-input-1" value="" length="4" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="Default four-digit PIN" name="pin-input-1" value="" length="4" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Default four-digit PIN usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -95,7 +97,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div class="pin-length-demo"><div data-component="PinInput" size="default" label="3-digit code" name="pin-length-3" value="" length="3" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div><div data-component="PinInput" size="default" label="5-digit code" name="pin-length-5" value="" length="5" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div><div data-component="PinInput" size="default" label="7-digit code" name="pin-length-7" value="" length="7" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div></div>
+            
+            <div class="demo-render"><div class="pin-length-demo"><PinInput size="default" label="3-digit code" name="pin-length-3" value="" length="3" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /><PinInput size="default" label="5-digit code" name="pin-length-5" value="" length="5" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /><PinInput size="default" label="7-digit code" name="pin-length-7" value="" length="7" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div></div>
           </div>
           <section class="demo-code" aria-label="Different lengths usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -127,7 +130,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="default" label="Pre-filled verification code" name="pin-input-3" value="482915" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="Pre-filled verification code" name="pin-input-3" value="482915" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Pre-filled verification code usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -148,7 +152,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-4" class="demo-canvas demo-canvas--4">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="default" label="Masked security PIN" name="pin-input-4" value="" length="4" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="true" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="Masked security PIN" name="pin-input-4" value="" length="4" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="true" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Masked security PIN usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -168,7 +173,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-5" class="demo-canvas demo-canvas--5">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="default" label="Alphanumeric regex" name="pin-input-5" value="" length="6" pattern="[A-Z0-9]" inputMode="text" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="Alphanumeric regex" name="pin-input-5" value="" length="6" pattern="[A-Z0-9]" inputMode="text" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Alphanumeric regex usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -190,7 +196,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-6" class="demo-canvas demo-canvas--6">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="default" label="Grouped code with separator" name="pin-input-6" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="–" groupSize="3" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="Grouped code with separator" name="pin-input-6" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="–" groupSize="3" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Grouped code with separator usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -212,7 +219,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-7" class="demo-canvas demo-canvas--7">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="default" label="Paste from clipboard" name="pin-input-7" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="Paste from clipboard" name="pin-input-7" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Paste from clipboard usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -232,7 +240,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-8" class="demo-canvas demo-canvas--8">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="default" label="Disabled PIN input" name="pin-input-8" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="true" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="Disabled PIN input" name="pin-input-8" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="true" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Disabled PIN input usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -253,7 +262,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-9" class="demo-canvas demo-canvas--9">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="default" label="Read-only code" name="pin-input-9" value="739204" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="true" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="Read-only code" name="pin-input-9" value="739204" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="true" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Read-only code usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -275,7 +285,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-10" class="demo-canvas demo-canvas--10">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><form data-schema="pin-input-validation" class="demo-validation-form"><div data-component="PinInput" size="default" label="Validation state" name="pin-input-10" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="true" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
+            
+            <div class="demo-render"><form data-schema="pin-input-validation" class="demo-validation-form"><PinInput size="default" label="Validation state" name="pin-input-10" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="true" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
           </div>
           <section class="demo-code" aria-label="Validation state usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -296,7 +307,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-11" class="demo-canvas demo-canvas--11">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="default" label="Supporting help text" name="pin-input-11" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="Enter the code sent to your registered email address." invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="Supporting help text" name="pin-input-11" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="Enter the code sent to your registered email address." invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Supporting help text usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -317,7 +329,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-12" class="demo-canvas demo-canvas--12">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="lg" label="Large PIN cells" name="pin-input-12" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="lg" label="Large PIN cells" name="pin-input-12" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Large PIN cells usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -338,7 +351,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-13" class="demo-canvas demo-canvas--13">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="default" label="Custom placeholder" name="pin-input-13" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="•" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="Custom placeholder" name="pin-input-13" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="•" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Custom placeholder usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -359,7 +373,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-14" class="demo-canvas demo-canvas--14">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="default" label="Automatic form submission" name="pin-input-14" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="true" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="Automatic form submission" name="pin-input-14" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="true" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Automatic form submission usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -380,7 +395,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-15" class="demo-canvas demo-canvas--15">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="default" label="Completion events" name="pin-input-15" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="Completion events" name="pin-input-15" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Completion events usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -400,7 +416,8 @@ page PinInputDetail {
         <div class="demo-workbench">
           <div id="pin-input-demo-16" class="demo-canvas demo-canvas--16">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PinInput" size="default" label="JavaScript methods" name="pin-input-16" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><PinInput size="default" label="JavaScript methods" name="pin-input-16" value="" length="6" pattern="[0-9]" inputMode="numeric" placeholder="○" masked="false" disabled="false" readonly="false" required="false" autoSubmit="false" allowPaste="true" separator="" groupSize="0" helpText="" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="JavaScript methods usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -412,11 +429,38 @@ page PinInputDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@complete</code><span>Fires when the component's operation completes.</span></div><div><code>@paste</code><span>Fires when the component emits the paste event.</span></div><div><code>@clear</code><span>Fires after the current value or collection is cleared.</span></div><div><code>@error</code><span>Fires when the component encounters an error.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires as the editable value changes.</span></div><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div><div><code>@complete</code><span>Fires when the component emits the complete event.</span></div><div><code>@paste</code><span>Fires after clipboard content is processed.</span></div><div><code>@clear</code><span>Fires after the current value or selection is cleared.</span></div><div><code>@error</code><span>Fires when the component cannot complete an operation.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;PinInput
+  @input='console.log(event.detail)'
+  @change='console.log(event.detail)'
+  @complete='console.log(event.detail)'
+  @paste='console.log(event.detail)'
+  @clear='console.log(event.detail)'
+  @error='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"PinInput\"], [data-component=\"PinInput\"]")
 
-component.addEventListener('input', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("complete", (event) =&gt; &#123;
+  console.log("complete", event.detail)
+&#125;)
+
+component?.addEventListener("paste", (event) =&gt; &#123;
+  console.log("paste", event.detail)
+&#125;)
+
+component?.addEventListener("clear", (event) =&gt; &#123;
+  console.log("clear", event.detail)
+&#125;)
+
+component?.addEventListener("error", (event) =&gt; &#123;
+  console.log("error", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Verification code"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>"pin"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>length</code></td><td>number</td><td><code>4</code></td><td>No</td></tr><tr><td><code>pattern</code></td><td>string</td><td><code>"[0-9]"</code></td><td>No</td></tr><tr><td><code>type</code></td><td>string</td><td><code>"text"</code></td><td>No</td></tr><tr><td><code>inputMode</code></td><td>string</td><td><code>"numeric"</code></td><td>No</td></tr><tr><td><code>placeholder</code></td><td>string</td><td><code>"○"</code></td><td>No</td></tr><tr><td><code>autocomplete</code></td><td>string</td><td><code>"one-time-code"</code></td><td>No</td></tr><tr><td><code>masked</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>readonly</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>required</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>autoFocus</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>autoSubmit</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>allowPaste</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>clearable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>clearLabel</code></td><td>string</td><td><code>"Clear code"</code></td><td>No</td></tr><tr><td><code>separator</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>groupSize</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>helpText</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>invalid</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>validationMessage</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
@@ -425,7 +469,7 @@ component.addEventListener('input', (event) =&gt; &#123;
     </div>
     <nav class="detail-pagination">
       <a href="/components/input-number"><small>Previous</small><strong>← Input Number</strong></a>
-      <a href="/components/search-box"><small>Next</small><strong>Search Box →</strong></a>
+      <a href="/components/strong-password"><small>Next</small><strong>Strong Password →</strong></a>
     </nav>
   }
 }
diff --git a/examples/component-showcase/app/pages/components/popover.wrn b/examples/component-showcase/app/pages/components/popover.wrn
index e9aafe7d..ffb58109 100644
--- a/examples/component-showcase/app/pages/components/popover.wrn
+++ b/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_description = ctx.url.searchParams.get("pg_description") ?? "A polished default popover for a modern application."
-  state playground_open = ctx.url.searchParams.get("pg_open") ?? "true"
-  state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom"
+  state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "raised"
+  state playground_showArrow = (ctx.url.searchParams.get("pg_showArrow") ?? "true") === "true"
+  state playground_showClose = (ctx.url.searchParams.get("pg_showClose") ?? "true") === "true"
   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>
-        <div class="detail-badges"><span>8 props</span><span>1 slots</span><span>2 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <p>Display anchored supporting content with configurable trigger, placement, responsive sizing, and open or close events.</p>
+        <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>
-          <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>
+          <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-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 id="playground-popover-closeLabel" name="pg_closeLabel" type="text" value="Popover" /></label><label class="playground-toggle" for="playground-popover-closeOnOutside"><span><strong>close On Outside</strong><small>boolean</small></span><input id="playground-popover-closeOnOutside" name="pg_closeOnOutside" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-popover-closeOnEscape"><span><strong>close On Escape</strong><small>boolean</small></span><input id="playground-popover-closeOnEscape" name="pg_closeOnEscape" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-popover-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-popover-actionLabel" name="pg_actionLabel" type="text" value="Popover" /></label><label class="playground-field" for="playground-popover-actionHref"><span><strong>action Href</strong><small>string</small></span><input id="playground-popover-actionHref" name="pg_actionHref" type="text" value="#popover-demo" /></label><label class="playground-field" for="playground-popover-actionIcon"><span><strong>action Icon</strong><small>string</small></span><input id="playground-popover-actionIcon" name="pg_actionIcon" type="text" value="" /></label><label class="playground-toggle" for="playground-popover-closeOnAction"><span><strong>close On Action</strong><small>boolean</small></span><input id="playground-popover-closeOnAction" name="pg_closeOnAction" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-popover-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-popover-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></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>
         </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"
-  description="A polished default popover for a modern application."
-  open="true"
+  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"
+  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"
-  title="Compact Popover"
+  triggerLabel="Quick actions"
+  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"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  open="true"
+  showClose="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;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>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("toggle", (event) =&gt; &#123;
+  console.log("toggle", 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("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">
diff --git a/examples/component-showcase/app/pages/components/portal-dashboard.wrn b/examples/component-showcase/app/pages/components/portal-dashboard.wrn
index 4a562ef8..c1612476 100644
--- a/examples/component-showcase/app/pages/components/portal-dashboard.wrn
+++ b/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_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_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_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_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 = 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 = 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 = 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;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;]}]" updates="[{&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;]}]" tasks="[{&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;]}]" class="showcase-instance showcase-instance--1"><div slot="hero-action" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>hero-action slot</span></div></div></div>
+            
+            <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","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"]}]' 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"]}]' 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>
@@ -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;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;]}]" updates="[{&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;]}]" tasks="[{&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;]}]" class="showcase-instance showcase-instance--2"><div slot="hero-action" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>hero-action slot</span></div></div></div>
+            
+            <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":"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"]}]' tasks='[{"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"]}]' 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>
@@ -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&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;]}]" updates="[{&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;]}]" tasks="[{&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;]}]" class="showcase-instance showcase-instance--3"><div slot="hero-action" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>hero-action slot</span></div></div></div>
+            
+            <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-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"]}]' tasks='[{"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"]}]' 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>
@@ -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;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("action", (event) =&gt; &#123;
+  console.log("action", event.detail)
+&#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/split-hero"><small>Next</small><strong>Split Hero →</strong></a>
+      <a href="/components/auth-split-layout"><small>Previous</small><strong>← Auth Split Layout</strong></a>
+      <a href="/components/preference-switcher"><small>Next</small><strong>Preference Switcher →</strong></a>
     </nav>
   }
 }
diff --git a/examples/component-showcase/app/pages/components/preference-switcher.wrn b/examples/component-showcase/app/pages/components/preference-switcher.wrn
index 6b9d5dd7..ed5846ae 100644
--- a/examples/component-showcase/app/pages/components/preference-switcher.wrn
+++ b/examples/component-showcase/app/pages/components/preference-switcher.wrn
@@ -8,31 +8,31 @@ page PreferenceSwitcherDetail {
   state playground_languageLabel = ctx.url.searchParams.get("pg_languageLabel") ?? "Preference Switcher"
   state playground_languages = ctx.url.searchParams.get("pg_languages") ?? ""
   state playground_colors = ctx.url.searchParams.get("pg_colors") ?? ""
-  state playground_compact = ctx.url.searchParams.get("pg_compact") ?? "false"
+  state playground_compact = (ctx.url.searchParams.get("pg_compact") ?? "false") === "true"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Preference Switcher"
-    description = "Accessible theme, accent color, and language preference controls."
+    description = "Reusable preference switcher component."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/navigation">Navigation</a><span aria-hidden="true">/</span><span>Preference Switcher</span>
+      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/core">Core</a><span aria-hidden="true">/</span><span>Preference Switcher</span>
     </nav>
     <header class="detail-hero">
       <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Navigation component</span>
+        <span class="showcase-eyebrow">Core component</span>
         <h1>Preference Switcher</h1>
-        <p>Accessible theme, accent color, and language preference controls.</p>
+        <p>Reusable preference switcher component.</p>
         <div class="detail-badges"><span>9 props</span><span>0 slots</span><span>3 events</span><span>Theme ready</span><span>Responsive</span></div>
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="PreferenceSwitcher" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="PreferenceSwitcher" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="theme,color,language">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Preference Switcher</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="PreferenceSwitcher" size="{playground_size}" color="{playground_color}" themeLabel="{playground_themeLabel}" colorLabel="{playground_colorLabel}" languageLabel="{playground_languageLabel}" languages="{playground_languages}" colors="{playground_colors}" compact="{playground_compact}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><PreferenceSwitcher size='{playground_size}' color='{playground_color}' themeLabel='{playground_themeLabel}' colorLabel='{playground_colorLabel}' languageLabel='{playground_languageLabel}' languages='{playground_languages}' colors='{playground_colors}' compact='{playground_compact}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;PreferenceSwitcher
@@ -43,6 +43,7 @@ page PreferenceSwitcherDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>9 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -61,7 +62,8 @@ page PreferenceSwitcherDetail {
         <div class="demo-workbench">
           <div id="preference-switcher-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PreferenceSwitcher" size="default" themeLabel="Preference Switcher" colorLabel="Preference Switcher" languageLabel="Preference Switcher" compact="false" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><PreferenceSwitcher size="default" themeLabel="Preference Switcher" colorLabel="Preference Switcher" languageLabel="Preference Switcher" compact="false" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -82,7 +84,8 @@ page PreferenceSwitcherDetail {
         <div class="demo-workbench">
           <div id="preference-switcher-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PreferenceSwitcher" size="sm" themeLabel="Compact example" colorLabel="Compact example" languageLabel="Compact example" compact="true" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><PreferenceSwitcher size="sm" themeLabel="Compact example" colorLabel="Compact example" languageLabel="Compact example" compact="true" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -103,7 +106,8 @@ page PreferenceSwitcherDetail {
         <div class="demo-workbench">
           <div id="preference-switcher-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="PreferenceSwitcher" size="lg" themeLabel="Advanced example" colorLabel="Advanced example" languageLabel="Advanced example" compact="false" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><PreferenceSwitcher size="lg" themeLabel="Advanced example" colorLabel="Advanced example" languageLabel="Advanced example" compact="false" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -117,11 +121,23 @@ page PreferenceSwitcherDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@theme</code><span>Fires when the component emits the theme event.</span></div><div><code>@color</code><span>Fires when the component emits the color event.</span></div><div><code>@language</code><span>Fires when the component emits the language event.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@theme</code><span>Fires when the component emits the theme event.</span></div><div><code>@color</code><span>Fires when the component emits the color event.</span></div><div><code>@language</code><span>Fires when the component emits the language event.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;PreferenceSwitcher
+  @theme='console.log(event.detail)'
+  @color='console.log(event.detail)'
+  @language='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"PreferenceSwitcher\"], [data-component=\"PreferenceSwitcher\"]")
 
-component.addEventListener('theme', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("theme", (event) =&gt; &#123;
+  console.log("theme", event.detail)
+&#125;)
+
+component?.addEventListener("color", (event) =&gt; &#123;
+  console.log("color", event.detail)
+&#125;)
+
+component?.addEventListener("language", (event) =&gt; &#123;
+  console.log("language", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>themeLabel</code></td><td>string</td><td><code>"Theme"</code></td><td>No</td></tr><tr><td><code>colorLabel</code></td><td>string</td><td><code>"Accent color"</code></td><td>No</td></tr><tr><td><code>languageLabel</code></td><td>string</td><td><code>"Language"</code></td><td>No</td></tr><tr><td><code>languages</code></td><td>string</td><td><code>[</code></td><td>No</td></tr><tr><td><code>colors</code></td><td>string</td><td><code>[</code></td><td>No</td></tr><tr><td><code>compact</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
@@ -129,8 +145,8 @@ component.addEventListener('theme', (event) =&gt; &#123;
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/pagination"><small>Previous</small><strong>← Pagination</strong></a>
-      <a href="/components/scrollspy"><small>Next</small><strong>Scrollspy →</strong></a>
+      <a href="/components/portal-dashboard"><small>Previous</small><strong>← Portal Dashboard</strong></a>
+      <span></span>
     </nav>
   }
 }
diff --git a/examples/component-showcase/app/pages/components/progress.wrn b/examples/component-showcase/app/pages/components/progress.wrn
index 551e7117..d37950c5 100644
--- a/examples/component-showcase/app/pages/components/progress.wrn
+++ b/examples/component-showcase/app/pages/components/progress.wrn
@@ -4,9 +4,9 @@ page ProgressDetail {
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_label = ctx.url.searchParams.get("pg_label") ?? "Progress"
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? "36"
-  state playground_max = ctx.url.searchParams.get("pg_max") ?? "100"
-  state playground_showValue = ctx.url.searchParams.get("pg_showValue") ?? "true"
+  state playground_value = Number(ctx.url.searchParams.get("pg_value") ?? "36")
+  state playground_max = Number(ctx.url.searchParams.get("pg_max") ?? "100")
+  state playground_showValue = (ctx.url.searchParams.get("pg_showValue") ?? "true") === "true"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Progress"
@@ -25,12 +25,12 @@ page ProgressDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Progress" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Progress" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Progress</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="Progress" size="{playground_size}" color="{playground_color}" label="{playground_label}" value="{playground_value}" max="{playground_max}" showValue="{playground_showValue}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Progress size='{playground_size}' color='{playground_color}' label='{playground_label}' value='{playground_value}' max='{playground_max}' showValue='{playground_showValue}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Progress
@@ -38,6 +38,7 @@ page ProgressDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -56,7 +57,8 @@ page ProgressDetail {
         <div class="demo-workbench">
           <div id="progress-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Progress" size="default" label="Progress" value="36" max="100" showValue="true" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Progress size="default" label="Progress" value="36" max="100" showValue="true" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -74,7 +76,8 @@ page ProgressDetail {
         <div class="demo-workbench">
           <div id="progress-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Progress" size="sm" label="Compact example" value="60" max="100" showValue="true" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Progress size="sm" label="Compact example" value="60" max="100" showValue="true" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -94,7 +97,8 @@ page ProgressDetail {
         <div class="demo-workbench">
           <div id="progress-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Progress" size="lg" label="Advanced example" value="84" max="100" showValue="true" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Progress size="lg" label="Advanced example" value="84" max="100" showValue="true" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -106,11 +110,11 @@ page ProgressDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
+        
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Progress"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>number</td><td><code>50</code></td><td>No</td></tr><tr><td><code>max</code></td><td>number</td><td><code>100</code></td><td>No</td></tr><tr><td><code>showValue</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#progress-demo-1">Production default</a><a href="#progress-demo-2">Compact application</a><a href="#progress-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
+        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#progress-demo-1">Production default</a><a href="#progress-demo-2">Compact application</a><a href="#progress-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/public-page-shell.wrn b/examples/component-showcase/app/pages/components/public-page-shell.wrn
index b99ed1c0..b0f34ce8 100644
--- a/examples/component-showcase/app/pages/components/public-page-shell.wrn
+++ b/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>
   }
diff --git a/examples/component-showcase/app/pages/components/radio.wrn b/examples/component-showcase/app/pages/components/radio.wrn
index e0cdb406..4db0e9de 100644
--- a/examples/component-showcase/app/pages/components/radio.wrn
+++ b/examples/component-showcase/app/pages/components/radio.wrn
@@ -3,29 +3,29 @@ page RadioDetail {
   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") ?? "radio-1"
-  state playground_name = ctx.url.searchParams.get("pg_name") ?? "radioField"
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Standard plan"
-  state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
-  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter radio"
+  state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
+  state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Radio"
+  state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true"
+  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
   state playground_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") ?? "standard"
-  state playground_options = ctx.url.searchParams.get("pg_options") ?? "[]"
-  state playground_checked = ctx.url.searchParams.get("pg_checked") ?? "true"
+  state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
+  state playground_options = JSON.parse(ctx.url.searchParams.get("pg_options") ?? "[{\"id\":\"radio-0-1\",\"key\":\"radio-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#radio-demo\",\"actionHref\":\"#radio-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"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\":\"radio-0-2\",\"key\":\"radio-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#radio-demo\",\"actionHref\":\"#radio-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"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_checked = (ctx.url.searchParams.get("pg_checked") ?? "false") === "true"
   state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "vertical"
-  state playground_card = ctx.url.searchParams.get("pg_card") ?? "false"
-  state playground_rightAligned = ctx.url.searchParams.get("pg_rightAligned") ?? "false"
-  state playground_list = ctx.url.searchParams.get("pg_list") ?? "false"
+  state playground_card = (ctx.url.searchParams.get("pg_card") ?? "false") === "true"
+  state playground_rightAligned = (ctx.url.searchParams.get("pg_rightAligned") ?? "false") === "true"
+  state playground_list = (ctx.url.searchParams.get("pg_list") ?? "false") === "true"
   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_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
+  state playground_inline = (ctx.url.searchParams.get("pg_inline") ?? "false") === "true"
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  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 = "Radio"
     description = "Theme-aware, responsive radio component."
@@ -43,29 +43,240 @@ page RadioDetail {
       </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="Radio" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Radio" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="input,change,focus,blur,invalid">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Radio</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="Radio" size="{playground_size}" color="{playground_color}" id="{playground_id}" name="{playground_name}" label="{playground_label}" hiddenLabel="{playground_hiddenLabel}" placeholder="{playground_placeholder}" variant="{playground_variant}" icon="{playground_icon}" iconPosition="{playground_iconPosition}" value="{playground_value}" options="{playground_options}" checked="{playground_checked}" orientation="{playground_orientation}" card="{playground_card}" rightAligned="{playground_rightAligned}" list="{playground_list}" helperText="{playground_helperText}" cornerHint="{playground_cornerHint}" error="{playground_error}" inline="{playground_inline}" readonly="{playground_readonly}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Radio size='{playground_size}' color='{playground_color}' id='{playground_id}' name='{playground_name}' label='{playground_label}' hiddenLabel='{playground_hiddenLabel}' placeholder='{playground_placeholder}' variant='{playground_variant}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' value='{playground_value}' options='{playground_options}' checked='{playground_checked}' orientation='{playground_orientation}' card='{playground_card}' rightAligned='{playground_rightAligned}' list='{playground_list}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' inline='{playground_inline}' readonly='{playground_readonly}' disabled='{playground_disabled}' required='{playground_required}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Radio
-  id="radio-1"
-  name="radioField"
-  label="Standard plan"
-  placeholder="Enter radio"
-  value="standard"
-  options='[]'
-  checked="true"
+  placeholder="Enter a sample value"
+  value="sample-1"
+  options='[
+    &#123;
+      "id": "radio-0-1",
+      "key": "radio-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#radio-demo",
+      "actionHref": "#radio-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        &#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": "radio-0-2",
+      "key": "radio-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#radio-demo",
+      "actionHref": "#radio-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        &#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>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-radio-size"><span><strong>size</strong><small>string</small></span><select id="playground-radio-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-radio-color"><span><strong>color</strong><small>string</small></span><select id="playground-radio-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-radio-id"><span><strong>id</strong><small>string</small></span><input id="playground-radio-id" name="pg_id" type="text" value="radio-1" /></label><label class="playground-field" for="playground-radio-name"><span><strong>name</strong><small>string</small></span><input id="playground-radio-name" name="pg_name" type="text" value="radioField" /></label><label class="playground-field" for="playground-radio-label"><span><strong>label</strong><small>string</small></span><input id="playground-radio-label" name="pg_label" type="text" value="Standard plan" /></label><label class="playground-toggle" for="playground-radio-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-radio-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-radio-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-radio-placeholder" name="pg_placeholder" type="text" value="Enter radio" /></label><label class="playground-field" for="playground-radio-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-radio-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-radio-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-radio-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-radio-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-radio-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-radio-value"><span><strong>value</strong><small>string</small></span><input id="playground-radio-value" name="pg_value" type="text" value="standard" /></label><label class="playground-field" for="playground-radio-options"><span><strong>options</strong><small>string</small></span><textarea id="playground-radio-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-radio-checked"><span><strong>checked</strong><small>boolean</small></span><input id="playground-radio-checked" name="pg_checked" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-radio-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-radio-orientation" name="pg_orientation"><option value="vertical" selected>vertical</option><option value="horizontal">horizontal</option></select></label><label class="playground-toggle" for="playground-radio-card"><span><strong>card</strong><small>boolean</small></span><input id="playground-radio-card" name="pg_card" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-radio-rightAligned"><span><strong>right Aligned</strong><small>boolean</small></span><input id="playground-radio-rightAligned" name="pg_rightAligned" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-radio-list"><span><strong>list</strong><small>boolean</small></span><input id="playground-radio-list" name="pg_list" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-radio-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-radio-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-radio-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-radio-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-radio-error"><span><strong>error</strong><small>string</small></span><input id="playground-radio-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-radio-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-radio-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-radio-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-radio-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-radio-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-radio-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-radio-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-radio-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-radio-class"><span><strong>class</strong><small>string</small></span><input id="playground-radio-class" name="pg_class" type="text" value="" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-radio-size"><span><strong>size</strong><small>string</small></span><select id="playground-radio-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-radio-color"><span><strong>color</strong><small>string</small></span><select id="playground-radio-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-radio-id"><span><strong>id</strong><small>string</small></span><input id="playground-radio-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-radio-name"><span><strong>name</strong><small>string</small></span><input id="playground-radio-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-radio-label"><span><strong>label</strong><small>string</small></span><input id="playground-radio-label" name="pg_label" type="text" value="Radio" /></label><label class="playground-toggle" for="playground-radio-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-radio-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-radio-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-radio-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-radio-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-radio-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-radio-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-radio-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-radio-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-radio-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-radio-value"><span><strong>value</strong><small>string</small></span><input id="playground-radio-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-radio-options"><span><strong>options</strong><small>string</small></span><textarea id="playground-radio-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[
+  {
+    "id": "radio-0-1",
+    "key": "radio-0-1",
+    "value": "primary",
+    "label": "Primary workflow",
+    "title": "Primary workflow",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "A configurable sample message.",
+    "href": "#radio-demo",
+    "actionHref": "#radio-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": true,
+    "selected": true,
+    "checked": true,
+    "disabled": false,
+    "outgoing": false,
+    "open": true,
+    "number": 1,
+    "count": 16,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 1",
+    "items": [
+      {
+        "label": "Nested option A",
+        "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": "radio-0-2",
+    "key": "radio-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#radio-demo",
+    "actionHref": "#radio-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": false,
+    "selected": false,
+    "checked": false,
+    "disabled": false,
+    "outgoing": true,
+    "open": true,
+    "number": 2,
+    "count": 32,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 2",
+    "items": [
+      {
+        "label": "Nested option A",
+        "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-radio-checked"><span><strong>checked</strong><small>boolean</small></span><input id="playground-radio-checked" name="pg_checked" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-radio-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-radio-orientation" name="pg_orientation"><option value="vertical" selected>vertical</option><option value="horizontal">horizontal</option></select></label><label class="playground-toggle" for="playground-radio-card"><span><strong>card</strong><small>boolean</small></span><input id="playground-radio-card" name="pg_card" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-radio-rightAligned"><span><strong>right Aligned</strong><small>boolean</small></span><input id="playground-radio-rightAligned" name="pg_rightAligned" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-radio-list"><span><strong>list</strong><small>boolean</small></span><input id="playground-radio-list" name="pg_list" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-radio-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-radio-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-radio-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-radio-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-radio-error"><span><strong>error</strong><small>string</small></span><input id="playground-radio-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-radio-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-radio-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-radio-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-radio-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-radio-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-radio-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-radio-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-radio-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-radio-class"><span><strong>class</strong><small>string</small></span><input id="playground-radio-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -74,422 +285,427 @@ page RadioDetail {
         <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 radio</h2><p>Use a single radio control for one selectable option.</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="radio-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="Radio" size="default" color="primary" id="radio-1" name="radioField" label="Standard plan" placeholder="Enter radio" variant="normal" icon="" iconPosition="start" value="standard" options="[]" checked="true" orientation="vertical" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><Radio size="default" label="Radio" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" options='[{"id":"radio-0-1","key":"radio-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#radio-demo","actionHref":"#radio-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","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":"radio-0-2","key":"radio-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#radio-demo","actionHref":"#radio-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' checked="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Default radio 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;Radio
-  id="radio-1"
-  name="radioField"
-  label="Standard plan"
-  placeholder="Enter radio"
-  value="standard"
-  options='[]'
-  checked="true"
+  placeholder="Enter a sample value"
+  value="sample-1"
+  options='[
+    &#123;
+      "id": "radio-0-1",
+      "key": "radio-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#radio-demo",
+      "actionHref": "#radio-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        &#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": "radio-0-2",
+      "key": "radio-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#radio-demo",
+      "actionHref": "#radio-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        &#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">States</span><h2>Disabled</h2><p>Disable an option when it is unavailable.</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="radio-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="Radio" size="default" color="primary" id="radio-2" name="radioField" label="Choose a plan" placeholder="Enter radio" variant="outlined" icon="icon-[lucide--sparkles]" iconPosition="start" value="" options="[]" checked="false" orientation="vertical" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="true" required="false"></div></div>
+            
+            <div class="demo-render"><Radio size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" variant="secondary" icon="icon-[lucide--arrow-right]" value="sample-2" options='[{"id":"radio-1-1","key":"radio-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#radio-demo","actionHref":"#radio-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","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":"radio-1-2","key":"radio-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#radio-demo","actionHref":"#radio-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' checked="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Disabled 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;Radio
-  id="radio-2"
-  name="radioField"
-  label="Choose a plan"
-  placeholder="Enter radio"
-  variant="outlined"
-  icon="icon-[lucide--sparkles]"
-  options='[]'
-  disabled="true"
+  size="sm"
+  label="Compact example"
+  placeholder="Enter a sample value"
+  variant="secondary"
+  icon="icon-[lucide--arrow-right]"
+  value="sample-2"
+  options='[
+    &#123;
+      "id": "radio-1-1",
+      "key": "radio-1-1",
+      "value": "primary",
+      "label": "Secondary workflow",
+      "title": "Secondary workflow",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "A configurable sample message.",
+      "href": "#radio-demo",
+      "actionHref": "#radio-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 24,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 1",
+      "items": [
+        &#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": "radio-1-2",
+      "key": "radio-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#radio-demo",
+      "actionHref": "#radio-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--zap]",
+      "iconClass": "icon-[lucide--zap]",
+      "variant": "secondary",
+      "status": "Active",
+      "time": "10:15",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 48,
+      "percentage": 48,
+      "color": "#0284c7",
+      "target": "_self",
+      "ariaLabel": "Open secondary workflow 2",
+      "items": [
+        &#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">Groups</span><h2>Inline radio group</h2><p>Arrange compact radio options on one horizontal line.</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="radio-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="Radio" size="default" color="primary" id="radio-3" name="radioField" label="Choose a plan" placeholder="Enter radio" variant="floating" icon="icon-[lucide--circle-user-round]" iconPosition="end" value="" options="[{&quot;label&quot;:&quot;Starter&quot;,&quot;value&quot;:&quot;starter&quot;,&quot;description&quot;:&quot;&quot;},{&quot;label&quot;:&quot;Professional&quot;,&quot;value&quot;:&quot;professional&quot;,&quot;description&quot;:&quot;&quot;},{&quot;label&quot;:&quot;Enterprise&quot;,&quot;value&quot;:&quot;enterprise&quot;,&quot;description&quot;:&quot;&quot;}]" checked="false" orientation="horizontal" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><Radio size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" variant="success" icon="icon-[lucide--trash-2]" value="sample-3" options='[{"id":"radio-2-1","key":"radio-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#radio-demo","actionHref":"#radio-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option 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":"radio-2-2","key":"radio-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#radio-demo","actionHref":"#radio-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option 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"]}]' checked="false" card="false" rightAligned="false" list="false" inline="false" readonly="false" disabled="false" required="false" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Inline radio group 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;Radio
-  id="radio-3"
-  name="radioField"
-  label="Choose a plan"
-  placeholder="Enter radio"
-  variant="floating"
-  icon="icon-[lucide--circle-user-round]"
-  iconPosition="end"
+  size="lg"
+  label="Advanced example"
+  placeholder="Search by name, email, or identifier"
+  variant="success"
+  icon="icon-[lucide--trash-2]"
+  value="sample-3"
   options='[
     &#123;
-      "label": "Starter",
-      "value": "starter",
-      "description": ""
+      "id": "radio-2-1",
+      "key": "radio-2-1",
+      "value": "primary",
+      "label": "Advanced workflow",
+      "title": "Advanced workflow",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "A configurable sample message.",
+      "href": "#radio-demo",
+      "actionHref": "#radio-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 32,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 1",
+      "items": [
+        &#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": "Professional",
-      "value": "professional",
-      "description": ""
-    &#125;,
-    &#123;
-      "label": "Enterprise",
-      "value": "enterprise",
-      "description": ""
+      "id": "radio-2-2",
+      "key": "radio-2-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A richer configuration with more supporting information and actions.",
+      "text": "Another configurable message.",
+      "href": "#radio-demo",
+      "actionHref": "#radio-demo",
+      "actionLabel": "Explore workflow",
+      "icon": "icon-[lucide--circle-check]",
+      "iconClass": "icon-[lucide--circle-check]",
+      "variant": "success",
+      "status": "Complete",
+      "time": "11:45",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": true,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 64,
+      "percentage": 91,
+      "color": "#059669",
+      "target": "_self",
+      "ariaLabel": "Open advanced workflow 2",
+      "items": [
+        &#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;
   ]'
-  orientation="horizontal"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Groups</span><h2>Vertical radio group</h2><p>Stack radio options for easy scanning.</p></div>
-          <span class="demo-case-number">04</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="radio-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="Radio" size="sm" color="primary" id="radio-4" name="radioField" label="Choose a plan" placeholder="Enter radio" variant="pill" icon="" iconPosition="start" value="" options="[{&quot;label&quot;:&quot;Starter&quot;,&quot;value&quot;:&quot;starter&quot;,&quot;description&quot;:&quot;&quot;},{&quot;label&quot;:&quot;Professional&quot;,&quot;value&quot;:&quot;professional&quot;,&quot;description&quot;:&quot;&quot;},{&quot;label&quot;:&quot;Enterprise&quot;,&quot;value&quot;:&quot;enterprise&quot;,&quot;description&quot;:&quot;&quot;}]" checked="false" orientation="vertical" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Vertical radio group usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Radio
-  size="sm"
-  id="radio-4"
-  name="radioField"
-  label="Choose a plan"
-  placeholder="Enter radio"
-  variant="pill"
-  options='[
-    &#123;
-      "label": "Starter",
-      "value": "starter",
-      "description": ""
-    &#125;,
-    &#123;
-      "label": "Professional",
-      "value": "professional",
-      "description": ""
-    &#125;,
-    &#123;
-      "label": "Enterprise",
-      "value": "enterprise",
-      "description": ""
-    &#125;
-  ]'
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Content</span><h2>Radios with descriptions</h2><p>Add supporting copy to clarify each choice.</p></div>
-          <span class="demo-case-number">05</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="radio-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="Radio" size="default" color="primary" id="radio-5" name="radioField" label="Choose a plan" placeholder="Enter radio" variant="normal" icon="" iconPosition="start" value="" options="[{&quot;label&quot;:&quot;Starter&quot;,&quot;value&quot;:&quot;starter&quot;,&quot;description&quot;:&quot;For individuals and small projects.&quot;},{&quot;label&quot;:&quot;Professional&quot;,&quot;value&quot;:&quot;professional&quot;,&quot;description&quot;:&quot;For growing teams and products.&quot;},{&quot;label&quot;:&quot;Enterprise&quot;,&quot;value&quot;:&quot;enterprise&quot;,&quot;description&quot;:&quot;For organizations needing advanced controls.&quot;}]" checked="false" orientation="vertical" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="true" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Radios with descriptions usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Radio
-  id="radio-5"
-  name="radioField"
-  label="Choose a plan"
-  placeholder="Enter radio"
-  options='[
-    &#123;
-      "label": "Starter",
-      "value": "starter",
-      "description": "For individuals and small projects."
-    &#125;,
-    &#123;
-      "label": "Professional",
-      "value": "professional",
-      "description": "For growing teams and products."
-    &#125;,
-    &#123;
-      "label": "Enterprise",
-      "value": "enterprise",
-      "description": "For organizations needing advanced controls."
-    &#125;
-  ]'
-  readonly="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Cards</span><h2>Radio cards</h2><p>Present options as selectable horizontal cards.</p></div>
-          <span class="demo-case-number">06</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="radio-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="Radio" size="default" color="primary" id="radio-6" name="radioField" label="Choose a plan" placeholder="Enter radio" variant="normal" icon="" iconPosition="start" value="" options="[{&quot;label&quot;:&quot;Starter&quot;,&quot;value&quot;:&quot;starter&quot;,&quot;description&quot;:&quot;For individuals and small projects.&quot;},{&quot;label&quot;:&quot;Professional&quot;,&quot;value&quot;:&quot;professional&quot;,&quot;description&quot;:&quot;For growing teams and products.&quot;},{&quot;label&quot;:&quot;Enterprise&quot;,&quot;value&quot;:&quot;enterprise&quot;,&quot;description&quot;:&quot;For organizations needing advanced controls.&quot;}]" checked="false" orientation="horizontal" card="true" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Radio cards usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Radio
-  id="radio-6"
-  name="radioField"
-  label="Choose a plan"
-  placeholder="Enter radio"
-  options='[
-    &#123;
-      "label": "Starter",
-      "value": "starter",
-      "description": "For individuals and small projects."
-    &#125;,
-    &#123;
-      "label": "Professional",
-      "value": "professional",
-      "description": "For growing teams and products."
-    &#125;,
-    &#123;
-      "label": "Enterprise",
-      "value": "enterprise",
-      "description": "For organizations needing advanced controls."
-    &#125;
-  ]'
-  orientation="horizontal"
-  card="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Cards</span><h2>Vertical radio cards</h2><p>Stack selectable cards in a vertical layout.</p></div>
-          <span class="demo-case-number">07</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="radio-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="Radio" size="default" color="primary" id="radio-7" name="radioField" label="Choose a plan" placeholder="Enter radio" variant="normal" icon="" iconPosition="start" value="" options="[{&quot;label&quot;:&quot;Starter&quot;,&quot;value&quot;:&quot;starter&quot;,&quot;description&quot;:&quot;For individuals and small projects.&quot;},{&quot;label&quot;:&quot;Professional&quot;,&quot;value&quot;:&quot;professional&quot;,&quot;description&quot;:&quot;For growing teams and products.&quot;},{&quot;label&quot;:&quot;Enterprise&quot;,&quot;value&quot;:&quot;enterprise&quot;,&quot;description&quot;:&quot;For organizations needing advanced controls.&quot;}]" checked="false" orientation="vertical" card="true" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="true" readonly="false" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Vertical radio cards usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Radio
-  id="radio-7"
-  name="radioField"
-  label="Choose a plan"
-  placeholder="Enter radio"
-  options='[
-    &#123;
-      "label": "Starter",
-      "value": "starter",
-      "description": "For individuals and small projects."
-    &#125;,
-    &#123;
-      "label": "Professional",
-      "value": "professional",
-      "description": "For growing teams and products."
-    &#125;,
-    &#123;
-      "label": "Enterprise",
-      "value": "enterprise",
-      "description": "For organizations needing advanced controls."
-    &#125;
-  ]'
-  card="true"
-  inline="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Alignment</span><h2>Right-aligned radio</h2><p>Place controls at the far edge of their labels.</p></div>
-          <span class="demo-case-number">08</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="radio-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="Radio" size="default" color="primary" id="radio-8" name="radioField" label="Choose a plan" placeholder="Enter radio" variant="normal" icon="" iconPosition="start" value="" options="[{&quot;label&quot;:&quot;Starter&quot;,&quot;value&quot;:&quot;starter&quot;,&quot;description&quot;:&quot;For individuals and small projects.&quot;},{&quot;label&quot;:&quot;Professional&quot;,&quot;value&quot;:&quot;professional&quot;,&quot;description&quot;:&quot;For growing teams and products.&quot;},{&quot;label&quot;:&quot;Enterprise&quot;,&quot;value&quot;:&quot;enterprise&quot;,&quot;description&quot;:&quot;For organizations needing advanced controls.&quot;}]" checked="false" orientation="vertical" card="false" rightAligned="true" list="false" helperText="" cornerHint="Optional" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Right-aligned radio usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Radio
-  id="radio-8"
-  name="radioField"
-  label="Choose a plan"
-  placeholder="Enter radio"
-  options='[
-    &#123;
-      "label": "Starter",
-      "value": "starter",
-      "description": "For individuals and small projects."
-    &#125;,
-    &#123;
-      "label": "Professional",
-      "value": "professional",
-      "description": "For growing teams and products."
-    &#125;,
-    &#123;
-      "label": "Enterprise",
-      "value": "enterprise",
-      "description": "For organizations needing advanced controls."
-    &#125;
-  ]'
-  rightAligned="true"
-  cornerHint="Optional"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Lists</span><h2>Radio list group</h2><p>Separate options with list dividers.</p></div>
-          <span class="demo-case-number">09</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="radio-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="Radio" size="default" color="primary" id="radio-9" name="radioField" label="Choose a plan" placeholder="Enter radio" variant="normal" icon="" iconPosition="start" value="" options="[{&quot;label&quot;:&quot;Starter&quot;,&quot;value&quot;:&quot;starter&quot;,&quot;description&quot;:&quot;For individuals and small projects.&quot;},{&quot;label&quot;:&quot;Professional&quot;,&quot;value&quot;:&quot;professional&quot;,&quot;description&quot;:&quot;For growing teams and products.&quot;},{&quot;label&quot;:&quot;Enterprise&quot;,&quot;value&quot;:&quot;enterprise&quot;,&quot;description&quot;:&quot;For organizations needing advanced controls.&quot;}]" checked="false" orientation="vertical" card="false" rightAligned="false" list="true" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Radio list group usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Radio
-  id="radio-9"
-  name="radioField"
-  label="Choose a plan"
-  placeholder="Enter radio"
-  options='[
-    &#123;
-      "label": "Starter",
-      "value": "starter",
-      "description": "For individuals and small projects."
-    &#125;,
-    &#123;
-      "label": "Professional",
-      "value": "professional",
-      "description": "For growing teams and products."
-    &#125;,
-    &#123;
-      "label": "Enterprise",
-      "value": "enterprise",
-      "description": "For organizations needing advanced controls."
-    &#125;
-  ]'
-  list="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Lists</span><h2>Horizontal radio list group</h2><p>Combine list styling with a horizontal layout.</p></div>
-          <span class="demo-case-number">010</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="radio-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="Radio" size="default" color="primary" id="radio-10" name="radioField" label="Choose a plan" placeholder="Enter radio" variant="normal" icon="" iconPosition="start" value="" options="[{&quot;label&quot;:&quot;Starter&quot;,&quot;value&quot;:&quot;starter&quot;,&quot;description&quot;:&quot;For individuals and small projects.&quot;},{&quot;label&quot;:&quot;Professional&quot;,&quot;value&quot;:&quot;professional&quot;,&quot;description&quot;:&quot;For growing teams and products.&quot;},{&quot;label&quot;:&quot;Enterprise&quot;,&quot;value&quot;:&quot;enterprise&quot;,&quot;description&quot;:&quot;For organizations needing advanced controls.&quot;}]" checked="false" orientation="horizontal" card="false" rightAligned="false" list="true" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Horizontal radio list group usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Radio
-  id="radio-10"
-  name="radioField"
-  label="Choose a plan"
-  placeholder="Enter radio"
-  options='[
-    &#123;
-      "label": "Starter",
-      "value": "starter",
-      "description": "For individuals and small projects."
-    &#125;,
-    &#123;
-      "label": "Professional",
-      "value": "professional",
-      "description": "For growing teams and products."
-    &#125;,
-    &#123;
-      "label": "Enterprise",
-      "value": "enterprise",
-      "description": "For organizations needing advanced controls."
-    &#125;
-  ]'
-  orientation="horizontal"
-  list="true"
-/&gt;</code></pre>
-          </section>
-        </div>
-      </article>
-      <article class="demo-case">
-        <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Validation</span><h2>Validation states</h2><p>Validate the selected group with @wrnexus/validation.</p></div>
-          <span class="demo-case-number">011</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="radio-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"><form data-schema="basic-form-validation" class="demo-validation-form"><div data-component="Radio" size="default" color="primary" id="radio-11" name="validatedField" label="Choose a plan" placeholder="Enter radio" variant="normal" icon="" iconPosition="start" value="" options="[{&quot;label&quot;:&quot;Starter&quot;,&quot;value&quot;:&quot;starter&quot;,&quot;description&quot;:&quot;For individuals and small projects.&quot;},{&quot;label&quot;:&quot;Professional&quot;,&quot;value&quot;:&quot;professional&quot;,&quot;description&quot;:&quot;For growing teams and products.&quot;},{&quot;label&quot;:&quot;Enterprise&quot;,&quot;value&quot;:&quot;enterprise&quot;,&quot;description&quot;:&quot;For organizations needing advanced controls.&quot;}]" checked="false" orientation="vertical" card="false" rightAligned="false" list="false" helperText="Select one plan to continue." 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="Validation states usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Radio
-  id="radio-11"
-  name="validatedField"
-  label="Choose a plan"
-  placeholder="Enter radio"
-  options='[
-    &#123;
-      "label": "Starter",
-      "value": "starter",
-      "description": "For individuals and small projects."
-    &#125;,
-    &#123;
-      "label": "Professional",
-      "value": "professional",
-      "description": "For growing teams and products."
-    &#125;,
-    &#123;
-      "label": "Enterprise",
-      "value": "enterprise",
-      "description": "For organizations needing advanced controls."
-    &#125;
-  ]'
-  helperText="Select one plan to continue."
-  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>@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>@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;Radio
+  @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)'
+/&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=\"Radio\"], [data-component=\"Radio\"]")
 
-component.addEventListener('input', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("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>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>"Radio"</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>string</td><td><code>"on"</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>checked</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"vertical"</code></td><td>No</td></tr><tr><td><code>card</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>rightAligned</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>list</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>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="#radio-demo-1">Default radio</a><a href="#radio-demo-2">Disabled</a><a href="#radio-demo-3">Inline radio group</a><a href="#radio-demo-4">Vertical radio group</a><a href="#radio-demo-5">Radios with descriptions</a><a href="#radio-demo-6">Radio cards</a><a href="#radio-demo-7">Vertical radio cards</a><a href="#radio-demo-8">Right-aligned radio</a><a href="#radio-demo-9">Radio list group</a><a href="#radio-demo-10">Horizontal radio list group</a><a href="#radio-demo-11">Validation states</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="#radio-demo-1">Production default</a><a href="#radio-demo-2">Compact application</a><a href="#radio-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/range-slider.wrn b/examples/component-showcase/app/pages/components/range-slider.wrn
index f38a6a48..55fe9365 100644
--- a/examples/component-showcase/app/pages/components/range-slider.wrn
+++ b/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_name = ctx.url.searchParams.get("pg_name") ?? "range-sliderField"
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Volume"
-  state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
-  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter range slider"
+  state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
+  state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Range Slider"
+  state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true"
+  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_min = ctx.url.searchParams.get("pg_min") ?? "0"
-  state playground_max = ctx.url.searchParams.get("pg_max") ?? "100"
-  state playground_step = ctx.url.searchParams.get("pg_step") ?? "5"
-  state playground_showValue = ctx.url.searchParams.get("pg_showValue") ?? "true"
-  state playground_showBounds = ctx.url.searchParams.get("pg_showBounds") ?? "true"
-  state playground_showSteps = ctx.url.searchParams.get("pg_showSteps") ?? "false"
-  state playground_marks = ctx.url.searchParams.get("pg_marks") ?? "[]"
-  state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "Helpful context for this field."
+  state playground_value = Number(ctx.url.searchParams.get("pg_value") ?? "36")
+  state playground_min = Number(ctx.url.searchParams.get("pg_min") ?? "0")
+  state playground_max = Number(ctx.url.searchParams.get("pg_max") ?? "100")
+  state playground_step = Number(ctx.url.searchParams.get("pg_step") ?? "1")
+  state playground_showValue = (ctx.url.searchParams.get("pg_showValue") ?? "true") === "true"
+  state playground_showBounds = (ctx.url.searchParams.get("pg_showBounds") ?? "true") === "true"
+  state playground_showSteps = (ctx.url.searchParams.get("pg_showSteps") ?? "true") === "true"
+  state playground_marks = JSON.parse(ctx.url.searchParams.get("pg_marks") ?? "[{\"id\":\"range-slider-0-1\",\"key\":\"range-slider-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#range-slider-demo\",\"actionHref\":\"#range-slider-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"range-slider-0-2\",\"key\":\"range-slider-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#range-slider-demo\",\"actionHref\":\"#range-slider-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
+  state playground_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_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
+  state playground_inline = (ctx.url.searchParams.get("pg_inline") ?? "false") === "true"
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  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 = "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"
-  name="range-sliderField"
-  label="Volume"
-  placeholder="Enter range slider"
-  value="60"
-  step="5"
-  marks='[]'
-  helperText="Helpful context for this field."
+  label="Range Slider"
+  placeholder="Enter a sample value"
+  value="36"
+  showSteps="true"
+  marks='[
+    &#123;
+      "id": "range-slider-0-1",
+      "key": "range-slider-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#range-slider-demo",
+      "actionHref": "#range-slider-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    &#125;,
+    &#123;
+      "id": "range-slider-0-2",
+      "key": "range-slider-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#range-slider-demo",
+      "actionHref": "#range-slider-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    &#125;
+  ]'
 /&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><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" data-playground-json>[]</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="Helpful context for this field." /></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="" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-range-slider-size"><span><strong>size</strong><small>string</small></span><select id="playground-range-slider-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-range-slider-color"><span><strong>color</strong><small>string</small></span><select id="playground-range-slider-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-range-slider-id"><span><strong>id</strong><small>string</small></span><input id="playground-range-slider-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-range-slider-name"><span><strong>name</strong><small>string</small></span><input id="playground-range-slider-name" name="pg_name" type="text" value="" /></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" data-playground-json>[
+  {
+    "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"
-  name="range-sliderField"
-  label="Volume"
-  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"
+  label="Range Slider"
+  placeholder="Enter a sample value"
+  value="36"
   showSteps="true"
   marks='[
     &#123;
-      "value": 0,
-      "label": "0"
+      "id": "range-slider-0-1",
+      "key": "range-slider-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#range-slider-demo",
+      "actionHref": "#range-slider-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        &#123;
+          "label": "Nested option A",
+          "value": "nested-a"
+        &#125;,
+        &#123;
+          "label": "Nested option B",
+          "value": "nested-b"
+        &#125;
+      ],
+      "links": [
+        &#123;
+          "label": "Documentation",
+          "href": "#documentation"
+        &#125;,
+        &#123;
+          "label": "API reference",
+          "href": "#api-reference"
+        &#125;
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
     &#125;,
     &#123;
-      "value": 25,
-      "label": "25"
-    &#125;,
-    &#123;
-      "value": 50,
-      "label": "50"
-    &#125;,
-    &#123;
-      "value": 75,
-      "label": "75"
-    &#125;,
-    &#123;
-      "value": 100,
-      "label": "100"
+      "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>
@@ -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"
-  name="range-sliderField"
-  label="Volume"
-  placeholder="Enter range slider"
-  variant="floating"
-  icon="icon-[lucide--circle-user-round]"
-  iconPosition="end"
-  value="60"
-  step="5"
-  marks='[]'
-/&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="range-slider-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="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>
-          </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;RangeSlider
-  size="sm"
-  id="range-slider-4"
-  name="range-sliderField"
-  label="Volume"
-  placeholder="Enter range slider"
-  variant="pill"
-  value="60"
-  step="5"
-  marks='[]'
-/&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="range-slider-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="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>
-          </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;RangeSlider
-  id="range-slider-5"
-  name="range-sliderField"
-  label="Volume"
-  placeholder="Enter range slider"
-  value="60"
-  step="5"
-  marks='[]'
-  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="range-slider-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="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>
-          </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;RangeSlider
-  id="range-slider-6"
-  name="range-sliderField"
-  label="Volume"
-  placeholder="Enter range slider"
-  value="60"
-  step="5"
-  marks='[]'
-  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="range-slider-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="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>
-          <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;RangeSlider
-  id="range-slider-7"
-  name="range-sliderField"
-  label="Volume"
-  placeholder="Enter range slider"
-  value="60"
-  step="5"
-  marks='[]'
-  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="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"
+  size="lg"
+  label="Advanced example"
+  placeholder="Search by name, email, or identifier"
+  variant="success"
+  icon="icon-[lucide--trash-2]"
+  value="84"
+  showSteps="true"
+  marks='[
+    &#123;
+      "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": [
+        &#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": "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": [
+        &#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;</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;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("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>
   }
 }
diff --git a/examples/component-showcase/app/pages/components/rating.wrn b/examples/component-showcase/app/pages/components/rating.wrn
index 63ce06e8..13743ba5 100644
--- a/examples/component-showcase/app/pages/components/rating.wrn
+++ b/examples/component-showcase/app/pages/components/rating.wrn
@@ -5,7 +5,7 @@ page RatingDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Rating example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default rating for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"rating-0-1\",\n    \"key\": \"rating-0-1\",\n    \"value\": \"primary\",\n    \"label\": \"Primary workflow\",\n    \"title\": \"Primary workflow\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"A configurable sample message.\",\n    \"href\": \"#rating-demo\",\n    \"actionHref\": \"#rating-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": true,\n    \"selected\": true,\n    \"checked\": true,\n    \"disabled\": false,\n    \"outgoing\": false,\n    \"open\": true,\n    \"number\": 1,\n    \"count\": 16,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 1\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  },\n  {\n    \"id\": \"rating-0-2\",\n    \"key\": \"rating-0-2\",\n    \"value\": \"secondary\",\n    \"label\": \"Additional option\",\n    \"title\": \"Supporting example\",\n    \"description\": \"A clean default configuration for everyday product interfaces.\",\n    \"text\": \"Another configurable message.\",\n    \"href\": \"#rating-demo\",\n    \"actionHref\": \"#rating-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"rating-0-1\",\"key\":\"rating-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#rating-demo\",\"actionHref\":\"#rating-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"rating-0-2\",\"key\":\"rating-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#rating-demo\",\"actionHref\":\"#rating-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
@@ -25,12 +25,12 @@ page RatingDetail {
       </div>
       <div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
     </header>
-    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Rating" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Rating" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="input,change">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Rating</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="Rating" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" items="{playground_items}" variant="{playground_variant}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Rating size='{playground_size}' color='{playground_color}' title='{playground_title}' description='{playground_description}' items='{playground_items}' variant='{playground_variant}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;Rating
@@ -147,6 +147,7 @@ page RatingDetail {
 /&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          <div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect <code>event.detail</code>.</span></div>
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -257,7 +258,7 @@ page RatingDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-rating-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-rating-variant" name="pg_variant"><option value="default" selected>default</option><option value="outline">outline</option><option value="secondary">secondary</option><option value="ghost">ghost</option><option value="destructive">destructive</option><option value="link">link</option></select></label><label class="playground-field" for="playground-rating-class"><span><strong>class</strong><small>string</small></span><input id="playground-rating-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-rating-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-rating-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-rating-class"><span><strong>class</strong><small>string</small></span><input id="playground-rating-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page RatingDetail {
         <div class="demo-workbench">
           <div id="rating-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Rating" size="default" title="Rating example" description="A polished default rating for a modern application." items="[{&quot;id&quot;:&quot;rating-0-1&quot;,&quot;key&quot;:&quot;rating-0-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Primary workflow&quot;,&quot;title&quot;:&quot;Primary workflow&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#rating-demo&quot;,&quot;actionHref&quot;:&quot;#rating-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:16,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;rating-0-2&quot;,&quot;key&quot;:&quot;rating-0-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A clean default configuration for everyday product interfaces.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#rating-demo&quot;,&quot;actionHref&quot;:&quot;#rating-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--sparkles]&quot;,&quot;variant&quot;:&quot;primary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;09:30&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:32,&quot;percentage&quot;:72,&quot;color&quot;:&quot;#7c3aed&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open primary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="default" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Rating size="default" title="Rating example" description="A polished default rating for a modern application." items='[{"id":"rating-0-1","key":"rating-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#rating-demo","actionHref":"#rating-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"rating-0-2","key":"rating-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#rating-demo","actionHref":"#rating-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="default" class="showcase-instance showcase-instance--1" /></div>
           </div>
           <section class="demo-code" aria-label="Production default usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -399,7 +401,8 @@ page RatingDetail {
         <div class="demo-workbench">
           <div id="rating-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Rating" size="sm" title="Compact Rating" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;rating-1-1&quot;,&quot;key&quot;:&quot;rating-1-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Secondary workflow&quot;,&quot;title&quot;:&quot;Secondary workflow&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#rating-demo&quot;,&quot;actionHref&quot;:&quot;#rating-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:24,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]},{&quot;id&quot;:&quot;rating-1-2&quot;,&quot;key&quot;:&quot;rating-1-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A compact configuration designed for dense application layouts.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#rating-demo&quot;,&quot;actionHref&quot;:&quot;#rating-demo&quot;,&quot;actionLabel&quot;:&quot;View details&quot;,&quot;icon&quot;:&quot;icon-[lucide--zap]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--zap]&quot;,&quot;variant&quot;:&quot;secondary&quot;,&quot;status&quot;:&quot;Active&quot;,&quot;time&quot;:&quot;10:15&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:false,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:48,&quot;percentage&quot;:48,&quot;color&quot;:&quot;#0284c7&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open secondary workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Standard&quot;]}]" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Rating size="sm" title="Compact Rating" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"rating-1-1","key":"rating-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#rating-demo","actionHref":"#rating-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"rating-1-2","key":"rating-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#rating-demo","actionHref":"#rating-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' variant="secondary" class="showcase-instance showcase-instance--2" /></div>
           </div>
           <section class="demo-code" aria-label="Compact application usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -528,7 +531,8 @@ page RatingDetail {
         <div class="demo-workbench">
           <div id="rating-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Rating" size="lg" title="Advanced Rating" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;rating-2-1&quot;,&quot;key&quot;:&quot;rating-2-1&quot;,&quot;value&quot;:&quot;primary&quot;,&quot;label&quot;:&quot;Advanced workflow&quot;,&quot;title&quot;:&quot;Advanced workflow&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;A configurable sample message.&quot;,&quot;href&quot;:&quot;#rating-demo&quot;,&quot;actionHref&quot;:&quot;#rating-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:true,&quot;selected&quot;:true,&quot;checked&quot;:true,&quot;disabled&quot;:false,&quot;outgoing&quot;:false,&quot;open&quot;:true,&quot;number&quot;:1,&quot;count&quot;:32,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 1&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]},{&quot;id&quot;:&quot;rating-2-2&quot;,&quot;key&quot;:&quot;rating-2-2&quot;,&quot;value&quot;:&quot;secondary&quot;,&quot;label&quot;:&quot;Additional option&quot;,&quot;title&quot;:&quot;Supporting example&quot;,&quot;description&quot;:&quot;A richer configuration with more supporting information and actions.&quot;,&quot;text&quot;:&quot;Another configurable message.&quot;,&quot;href&quot;:&quot;#rating-demo&quot;,&quot;actionHref&quot;:&quot;#rating-demo&quot;,&quot;actionLabel&quot;:&quot;Explore workflow&quot;,&quot;icon&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;iconClass&quot;:&quot;icon-[lucide--circle-check]&quot;,&quot;variant&quot;:&quot;success&quot;,&quot;status&quot;:&quot;Complete&quot;,&quot;time&quot;:&quot;11:45&quot;,&quot;current&quot;:false,&quot;selected&quot;:false,&quot;checked&quot;:false,&quot;disabled&quot;:true,&quot;outgoing&quot;:true,&quot;open&quot;:true,&quot;number&quot;:2,&quot;count&quot;:64,&quot;percentage&quot;:91,&quot;color&quot;:&quot;#059669&quot;,&quot;target&quot;:&quot;_self&quot;,&quot;ariaLabel&quot;:&quot;Open advanced workflow 2&quot;,&quot;items&quot;:[{&quot;label&quot;:&quot;Nested option A&quot;,&quot;value&quot;:&quot;nested-a&quot;},{&quot;label&quot;:&quot;Nested option B&quot;,&quot;value&quot;:&quot;nested-b&quot;}],&quot;links&quot;:[{&quot;label&quot;:&quot;Documentation&quot;,&quot;href&quot;:&quot;#documentation&quot;},{&quot;label&quot;:&quot;API reference&quot;,&quot;href&quot;:&quot;#api-reference&quot;}],&quot;values&quot;:[&quot;Included&quot;,&quot;Unlimited&quot;]}]" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Rating size="lg" title="Advanced Rating" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"rating-2-1","key":"rating-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#rating-demo","actionHref":"#rating-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"rating-2-2","key":"rating-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#rating-demo","actionHref":"#rating-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' variant="success" class="showcase-instance showcase-instance--3" /></div>
           </div>
           <section class="demo-code" aria-label="Rich configuration usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -649,11 +653,18 @@ page RatingDetail {
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires immediately as the component value changes.</span></div><div><code>@change</code><span>Fires when the component value or selection changes.</span></div></div><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Event listener</span><small>.js</small></header><pre><code>const component = document.querySelector('[data-wrn-events]')
+        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Respond to every public interaction</h2><p>Use declarative <code>@event</code> handlers in <code>.wrn</code> files or subscribe to the bubbling browser events from JavaScript.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@input</code><span>Fires as the editable value changes.</span></div><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code>&lt;Rating
+  @input='console.log(event.detail)'
+  @change='console.log(event.detail)'
+/&gt;</code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Browser listeners</span><small>.js</small></header><pre><code>const component = document.querySelector("[data-ui-component=\"Rating\"], [data-component=\"Rating\"]")
 
-component.addEventListener('input', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Rating"</code></td><td>No</td></tr><tr><td><code>description</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
diff --git a/examples/component-showcase/app/pages/components/scrollspy.wrn b/examples/component-showcase/app/pages/components/scrollspy.wrn
index 4732209d..1bc4c61e 100644
--- a/examples/component-showcase/app/pages/components/scrollspy.wrn
+++ b/examples/component-showcase/app/pages/components/scrollspy.wrn
@@ -4,7 +4,7 @@ page ScrollspyDetail {
   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") ?? "Scrollspy"
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"scrollspy-0-1\",\n    \"key\": \"scrollspy-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\": \"#scrollspy-demo\",\n    \"actionHref\": \"#scrollspy-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\": \"scrollspy-0-2\",\n    \"key\": \"scrollspy-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\": \"#scrollspy-demo\",\n    \"actionHref\": \"#scrollspy-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\":\"scrollspy-0-1\",\"key\":\"scrollspy-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#scrollspy-demo\",\"actionHref\":\"#scrollspy-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"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\":\"scrollspy-0-2\",\"key\":\"scrollspy-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#scrollspy-demo\",\"actionHref\":\"#scrollspy-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"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 ScrollspyDetail {
       </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="Scrollspy" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Scrollspy" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="change">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Scrollspy</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="Scrollspy" 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><Scrollspy 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;Scrollspy
@@ -145,6 +145,7 @@ page ScrollspyDetail {
 /&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 ScrollspyDetail {
         <div class="demo-workbench">
           <div id="scrollspy-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Scrollspy" size="default" label="Scrollspy" items="[{&quot;id&quot;:&quot;scrollspy-0-1&quot;,&quot;key&quot;:&quot;scrollspy-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;#scrollspy-demo&quot;,&quot;actionHref&quot;:&quot;#scrollspy-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;scrollspy-0-2&quot;,&quot;key&quot;:&quot;scrollspy-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;#scrollspy-demo&quot;,&quot;actionHref&quot;:&quot;#scrollspy-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"><Scrollspy size="default" label="Scrollspy" items='[{"id":"scrollspy-0-1","key":"scrollspy-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#scrollspy-demo","actionHref":"#scrollspy-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","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":"scrollspy-0-2","key":"scrollspy-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#scrollspy-demo","actionHref":"#scrollspy-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","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 ScrollspyDetail {
         <div class="demo-workbench">
           <div id="scrollspy-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Scrollspy" size="sm" label="Compact example" items="[{&quot;id&quot;:&quot;scrollspy-1-1&quot;,&quot;key&quot;:&quot;scrollspy-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;#scrollspy-demo&quot;,&quot;actionHref&quot;:&quot;#scrollspy-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;scrollspy-1-2&quot;,&quot;key&quot;:&quot;scrollspy-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;#scrollspy-demo&quot;,&quot;actionHref&quot;:&quot;#scrollspy-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"><Scrollspy size="sm" label="Compact example" items='[{"id":"scrollspy-1-1","key":"scrollspy-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":"#scrollspy-demo","actionHref":"#scrollspy-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":"scrollspy-1-2","key":"scrollspy-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#scrollspy-demo","actionHref":"#scrollspy-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 ScrollspyDetail {
         <div class="demo-workbench">
           <div id="scrollspy-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="Scrollspy" size="lg" label="Advanced example" items="[{&quot;id&quot;:&quot;scrollspy-2-1&quot;,&quot;key&quot;:&quot;scrollspy-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;#scrollspy-demo&quot;,&quot;actionHref&quot;:&quot;#scrollspy-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;scrollspy-2-2&quot;,&quot;key&quot;:&quot;scrollspy-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;#scrollspy-demo&quot;,&quot;actionHref&quot;:&quot;#scrollspy-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"><Scrollspy size="lg" label="Advanced example" items='[{"id":"scrollspy-2-1","key":"scrollspy-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":"#scrollspy-demo","actionHref":"#scrollspy-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":"scrollspy-2-2","key":"scrollspy-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":"#scrollspy-demo","actionHref":"#scrollspy-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,13 @@ page ScrollspyDetail {
           </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><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><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;Scrollspy
+  @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=\"Scrollspy\"], [data-component=\"Scrollspy\"]")
 
-component.addEventListener('change', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)</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>"Scrollspy"</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 +659,7 @@ component.addEventListener('change', (event) =&gt; &#123;
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/preference-switcher"><small>Previous</small><strong>← Preference Switcher</strong></a>
+      <a href="/components/pagination"><small>Previous</small><strong>← Pagination</strong></a>
       <a href="/components/sidebar"><small>Next</small><strong>Sidebar →</strong></a>
     </nav>
   }
diff --git a/examples/component-showcase/app/pages/components/search-box.wrn b/examples/component-showcase/app/pages/components/search-box.wrn
index 5df801c7..1d3d12a6 100644
--- a/examples/component-showcase/app/pages/components/search-box.wrn
+++ b/examples/component-showcase/app/pages/components/search-box.wrn
@@ -11,32 +11,32 @@ page SearchBoxDetail {
   state playground_min = ctx.url.searchParams.get("pg_min") ?? ""
   state playground_max = ctx.url.searchParams.get("pg_max") ?? ""
   state playground_step = ctx.url.searchParams.get("pg_step") ?? ""
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Search Box"
-    description = "Theme-aware, responsive search box component."
+    description = "Provide an accessible responsive search field with labels, validation states, sizes, and input or change events."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
-      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/advanced-forms">Advanced Forms</a><span aria-hidden="true">/</span><span>Search Box</span>
+      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/forms">Forms</a><span aria-hidden="true">/</span><span>Search Box</span>
     </nav>
     <header class="detail-hero">
       <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Advanced Forms component</span>
+        <span class="showcase-eyebrow">Forms component</span>
         <h1>Search Box</h1>
-        <p>Theme-aware, responsive search box component.</p>
+        <p>Provide an accessible responsive search field with labels, validation states, sizes, and input or change events.</p>
         <div class="detail-badges"><span>13 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="SearchBox" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="SearchBox" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Search 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="SearchBox" 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><SearchBox 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;SearchBox
@@ -45,10 +45,11 @@ page SearchBoxDetail {
 /&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-search-box-size"><span><strong>size</strong><small>string</small></span><select id="playground-search-box-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-search-box-color"><span><strong>color</strong><small>string</small></span><select id="playground-search-box-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-search-box-label"><span><strong>label</strong><small>string</small></span><input id="playground-search-box-label" name="pg_label" type="text" value="Search Box" /></label><label class="playground-field" for="playground-search-box-name"><span><strong>name</strong><small>string</small></span><input id="playground-search-box-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-search-box-value"><span><strong>value</strong><small>string</small></span><input id="playground-search-box-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-search-box-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-search-box-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-search-box-type"><span><strong>type</strong><small>string</small></span><input id="playground-search-box-type" name="pg_type" type="text" value="search" /></label><label class="playground-field" for="playground-search-box-min"><span><strong>min</strong><small>string</small></span><input id="playground-search-box-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-search-box-max"><span><strong>max</strong><small>string</small></span><input id="playground-search-box-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-search-box-step"><span><strong>step</strong><small>string</small></span><input id="playground-search-box-step" name="pg_step" type="text" value="" /></label><label class="playground-toggle" for="playground-search-box-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-search-box-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-search-box-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-search-box-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-search-box-class"><span><strong>class</strong><small>string</small></span><input id="playground-search-box-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-search-box-size"><span><strong>size</strong><small>string</small></span><select id="playground-search-box-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-search-box-color"><span><strong>color</strong><small>string</small></span><select id="playground-search-box-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-search-box-label"><span><strong>label</strong><small>string</small></span><input id="playground-search-box-label" name="pg_label" type="text" value="Search Box" /></label><label class="playground-field" for="playground-search-box-name"><span><strong>name</strong><small>string</small></span><input id="playground-search-box-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-search-box-value"><span><strong>value</strong><small>string</small></span><input id="playground-search-box-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-search-box-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-search-box-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-search-box-type"><span><strong>type</strong><small>string</small></span><select id="playground-search-box-type" name="pg_type"><option value="search" selected>search</option><option value="text">text</option></select></label><label class="playground-field" for="playground-search-box-min"><span><strong>min</strong><small>string</small></span><input id="playground-search-box-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-search-box-max"><span><strong>max</strong><small>string</small></span><input id="playground-search-box-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-search-box-step"><span><strong>step</strong><small>string</small></span><input id="playground-search-box-step" name="pg_step" type="text" value="" /></label><label class="playground-toggle" for="playground-search-box-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-search-box-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-search-box-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-search-box-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-search-box-class"><span><strong>class</strong><small>string</small></span><input id="playground-search-box-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -57,75 +58,84 @@ page SearchBoxDetail {
         <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>Site search</h2><p>Give visitors a clear way to search pages, services, or resources.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="search-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="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="demo-render"><SearchBox size="default" label="Search documentation" name="site-search" value="sample-1" placeholder="Search components and guides" type="search" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Site search usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;SearchBox
+  label="Search documentation"
+  name="site-search"
   value="sample-1"
-  placeholder="Enter a sample value"
+  placeholder="Search components and guides"
 /&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 directory search</h2><p>Use a compact field above tables, lists, and directories.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="search-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="SearchBox" 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"><SearchBox size="sm" label="Search stations" name="station-search" value="sample-2" placeholder="Name, district, or jurisdiction" disabled="false" required="false" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Compact directory search usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;SearchBox
   size="sm"
-  label="Compact example"
+  label="Search stations"
+  name="station-search"
   value="sample-2"
-  placeholder="Enter a sample value"
+  placeholder="Name, district, or jurisdiction"
 /&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>Required service lookup</h2><p>Use validation and required semantics in focused lookup flows.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="search-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="SearchBox" 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"><SearchBox size="lg" color="info" label="Complaint reference" name="complaint-reference" value="sample-3" placeholder="Enter reference number" disabled="false" required="true" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Required service lookup usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;SearchBox
   size="lg"
-  label="Advanced example"
+  color="info"
+  label="Complaint reference"
+  name="complaint-reference"
   value="sample-3"
-  placeholder="Search by name, email, or identifier"
+  placeholder="Enter reference number"
+  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=""><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>"Search Box"</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>"search"</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">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#search-box-demo-1">Production default</a><a href="#search-box-demo-2">Compact application</a><a href="#search-box-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="#search-box-demo-1">Site search</a><a href="#search-box-demo-2">Compact directory search</a><a href="#search-box-demo-3">Required service lookup</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/pin-input"><small>Previous</small><strong>← Pin Input</strong></a>
-      <a href="/components/strong-password"><small>Next</small><strong>Strong Password →</strong></a>
+      <a href="/components/range-slider"><small>Previous</small><strong>← Range Slider</strong></a>
+      <a href="/components/select"><small>Next</small><strong>Select →</strong></a>
     </nav>
   }
 }
diff --git a/examples/component-showcase/app/pages/components/section-header.wrn b/examples/component-showcase/app/pages/components/section-header.wrn
index 5b69d5e0..b4ea1acb 100644
--- a/examples/component-showcase/app/pages/components/section-header.wrn
+++ b/examples/component-showcase/app/pages/components/section-header.wrn
@@ -8,12 +8,12 @@ page SectionHeaderDetail {
   state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
-  state playground_headingLevel = ctx.url.searchParams.get("pg_headingLevel") ?? "2"
+  state playground_headingLevel = Number(ctx.url.searchParams.get("pg_headingLevel") ?? "2")
   state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "3xl"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Section Header"
-    description = "Reusable accessible section heading with eyebrow, title, description, icon, and actions."
+    description = "Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -23,31 +23,37 @@ page SectionHeaderDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Layout component</span>
         <h1>Section Header</h1>
-        <p>Reusable accessible section heading with eyebrow, title, description, icon, and actions.</p>
+        <p>Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.</p>
         <div class="detail-badges"><span>10 props</span><span>3 slots</span><span>0 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="SectionHeader" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="SectionHeader" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Section Header</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
           <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-          <div class="playground-preview-source" data-playground-preview><div data-component="SectionHeader" id="{playground_id}" eyebrow="{playground_eyebrow}" title="{playground_title}" description="{playground_description}" align="{playground_align}" size="{playground_size}" color="{playground_color}" headingLevel="{playground_headingLevel}" maxWidth="{playground_maxWidth}" class="{playground_class}"><div 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><SectionHeader id='{playground_id}' eyebrow='{playground_eyebrow}' title='{playground_title}' description='{playground_description}' align='{playground_align}' size='{playground_size}' color='{playground_color}' headingLevel='{playground_headingLevel}' maxWidth='{playground_maxWidth}' class='{playground_class}' /></div>
           <section class="playground-code" aria-label="Current component code">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
             <pre><code data-playground-code>&lt;SectionHeader
   title="Section Header example"
   description="A polished default section header for a modern application."
   align="start"&gt;
-  &lt;!-- Add icon, default, actions 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;/SectionHeader&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>10 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-section-header-id"><span><strong>id</strong><small>string</small></span><input id="playground-section-header-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-section-header-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-section-header-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-section-header-title"><span><strong>title</strong><small>string</small></span><input id="playground-section-header-title" name="pg_title" type="text" value="Section Header example" /></label><label class="playground-field" for="playground-section-header-description"><span><strong>description</strong><small>string</small></span><input id="playground-section-header-description" name="pg_description" type="text" value="A polished default section header for a modern application." /></label><label class="playground-field" for="playground-section-header-align"><span><strong>align</strong><small>string</small></span><select id="playground-section-header-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="end">end</option><option value="right">right</option><option value="split">split</option></select></label><label class="playground-field" for="playground-section-header-size"><span><strong>size</strong><small>string</small></span><select id="playground-section-header-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-section-header-color"><span><strong>color</strong><small>string</small></span><select id="playground-section-header-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-section-header-headingLevel"><span><strong>heading Level</strong><small>number</small></span><input id="playground-section-header-headingLevel" name="pg_headingLevel" type="number" value="2" /></label><label class="playground-field" for="playground-section-header-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-section-header-maxWidth" name="pg_maxWidth"><option value="3xl" selected>3xl</option><option value="xl">xl</option><option value="2xl">2xl</option><option value="4xl">4xl</option></select></label><label class="playground-field" for="playground-section-header-class"><span><strong>class</strong><small>string</small></span><input id="playground-section-header-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-section-header-id"><span><strong>id</strong><small>string</small></span><input id="playground-section-header-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-section-header-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-section-header-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-section-header-title"><span><strong>title</strong><small>string</small></span><input id="playground-section-header-title" name="pg_title" type="text" value="Section Header example" /></label><label class="playground-field" for="playground-section-header-description"><span><strong>description</strong><small>string</small></span><input id="playground-section-header-description" name="pg_description" type="text" value="A polished default section header for a modern application." /></label><label class="playground-field" for="playground-section-header-align"><span><strong>align</strong><small>string</small></span><select id="playground-section-header-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-section-header-size"><span><strong>size</strong><small>string</small></span><select id="playground-section-header-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="large">large</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-section-header-color"><span><strong>color</strong><small>string</small></span><select id="playground-section-header-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-section-header-headingLevel"><span><strong>heading Level</strong><small>number</small></span><input id="playground-section-header-headingLevel" name="pg_headingLevel" type="number" value="2" /></label><label class="playground-field" for="playground-section-header-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-section-header-maxWidth" name="pg_maxWidth"><option value="3xl" selected>3xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="full">full</option><option value="wide">wide</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-section-header-class"><span><strong>class</strong><small>string</small></span><input id="playground-section-header-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -56,79 +62,99 @@ page SectionHeaderDetail {
         <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>Left-aligned section header</h2><p>Introduce features, services, content groups, or dashboard areas.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="section-header-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="SectionHeader" title="Section Header example" description="A polished default section header for a modern application." align="start" size="default" headingLevel="2" 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"><SectionHeader eyebrow="Public services" title="Everything citizens need" description="Discover online services, directories, guidance, and verified public information." align="left" size="default" headingLevel="2" maxWidth="3xl" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Left-aligned section header usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;SectionHeader
-  title="Section Header example"
-  description="A polished default section header for a modern application."
-  align="start"&gt;
-  &lt;!-- Add icon, default, actions slot content here --&gt;
+  eyebrow="Public services"
+  title="Everything citizens need"
+  description="Discover online services, directories, guidance, and verified public information."&gt;
+  &lt;div data-slot="icon"&gt;
+    &lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="actions"&gt;
+    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/SectionHeader&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">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 section header</h2><p>Use centered hierarchy above feature grids, testimonials, and campaign content.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="section-header-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="SectionHeader" title="Compact Section Header" description="A compact configuration for dashboards and dense product surfaces." align="center" size="sm" headingLevel="2" 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"><SectionHeader eyebrow="Capabilities" title="A consistent component system" description="Compose complete pages without rebuilding spacing and typography." align="center" size="compact" headingLevel="2" class="showcase-instance showcase-instance--2" /></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Centered section header usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;SectionHeader
-  title="Compact Section Header"
-  description="A compact configuration for dashboards and dense product surfaces."
+  eyebrow="Capabilities"
+  title="A consistent component system"
+  description="Compose complete pages without rebuilding spacing and typography."
   align="center"
-  size="sm"&gt;
-  &lt;!-- Add icon, default, actions slot content here --&gt;
+  size="compact"&gt;
+  &lt;div data-slot="icon"&gt;
+    &lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="actions"&gt;
+    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/SectionHeader&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">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 editorial header</h2><p>Use a larger heading for major landing-page sections and product storytelling.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="section-header-demo-3" class="demo-canvas demo-canvas--3">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="SectionHeader" title="Advanced Section Header" description="A richer configuration demonstrating additional content and hierarchy." align="end" size="lg" headingLevel="2" 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"><SectionHeader eyebrow="Platform" title="Designed for complex public and enterprise interfaces" description="Theme-aware, responsive, accessible, and server-rendered." align="left" size="large" headingLevel="2" maxWidth="full" class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Large editorial header usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;SectionHeader
-  title="Advanced Section Header"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  align="end"
-  size="lg"&gt;
-  &lt;!-- Add icon, default, actions slot content here --&gt;
+  eyebrow="Platform"
+  title="Designed for complex public and enterprise interfaces"
+  description="Theme-aware, responsive, accessible, and server-rendered."
+  size="large"
+  maxWidth="full"&gt;
+  &lt;div data-slot="icon"&gt;
+    &lt;div class="showcase-slot"&gt;icon slot&lt;/div&gt;
+  &lt;/div&gt;
+  &lt;div data-slot="actions"&gt;
+    &lt;div class="showcase-slot"&gt;actions slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/SectionHeader&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="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>"left"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>headingLevel</code></td><td>number</td><td><code>2</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"3xl"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#section-header-demo-1">Production default</a><a href="#section-header-demo-2">Compact application</a><a href="#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="#section-header-demo-1">Left-aligned section header</a><a href="#section-header-demo-2">Centered section header</a><a href="#section-header-demo-3">Large editorial header</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
       <a href="/components/section"><small>Previous</small><strong>← Section</strong></a>
-      <a href="/components/text-link"><small>Next</small><strong>Text Link →</strong></a>
+      <a href="/components/typography"><small>Next</small><strong>Typography →</strong></a>
     </nav>
   }
 }
diff --git a/examples/component-showcase/app/pages/components/section.wrn b/examples/component-showcase/app/pages/components/section.wrn
index 83f53840..776dfcef 100644
--- a/examples/component-showcase/app/pages/components/section.wrn
+++ b/examples/component-showcase/app/pages/components/section.wrn
@@ -7,13 +7,13 @@ page SectionDetail {
   state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
   state playground_spacing = ctx.url.searchParams.get("pg_spacing") ?? "lg"
   state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl"
-  state playground_fullWidth = ctx.url.searchParams.get("pg_fullWidth") ?? "false"
-  state playground_borderTop = ctx.url.searchParams.get("pg_borderTop") ?? "false"
-  state playground_borderBottom = ctx.url.searchParams.get("pg_borderBottom") ?? "false"
+  state playground_fullWidth = (ctx.url.searchParams.get("pg_fullWidth") ?? "false") === "true"
+  state playground_borderTop = (ctx.url.searchParams.get("pg_borderTop") ?? "false") === "true"
+  state playground_borderBottom = (ctx.url.searchParams.get("pg_borderBottom") ?? "false") === "true"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Section"
-    description = "Theme-aware page section with consistent spacing, width, background, and border controls."
+    description = "Create a responsive themed page section with controlled spacing, width, borders, and surface treatment."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -23,28 +23,29 @@ page SectionDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Layout component</span>
         <h1>Section</h1>
-        <p>Theme-aware page section with consistent spacing, width, background, and border controls.</p>
+        <p>Create a responsive themed page section with controlled spacing, width, borders, and surface treatment.</p>
         <div class="detail-badges"><span>10 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="Section" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Section" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Section</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="Section" id="{playground_id}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" spacing="{playground_spacing}" maxWidth="{playground_maxWidth}" fullWidth="{playground_fullWidth}" borderTop="{playground_borderTop}" borderBottom="{playground_borderBottom}" 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><Section id='{playground_id}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' spacing='{playground_spacing}' maxWidth='{playground_maxWidth}' fullWidth='{playground_fullWidth}' borderTop='{playground_borderTop}' borderBottom='{playground_borderBottom}' class='{playground_class}'><div class="showcase-content-block">Standard section content</div></Section></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;Section&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;/Section&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          
         </div>
         <form class="playground-controls" data-playground-form>
           <header><div><span>Component props</span><strong>10 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-section-id"><span><strong>id</strong><small>string</small></span><input id="playground-section-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-section-size"><span><strong>size</strong><small>string</small></span><select id="playground-section-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-section-color"><span><strong>color</strong><small>string</small></span><select id="playground-section-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-section-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-section-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="raised">raised</option><option value="tinted">tinted</option><option value="solid">solid</option></select></label><label class="playground-field" for="playground-section-spacing"><span><strong>spacing</strong><small>string</small></span><select id="playground-section-spacing" name="pg_spacing"><option value="lg" selected>lg</option><option value="sm">sm</option><option value="md">md</option><option value="xl">xl</option></select></label><label class="playground-field" for="playground-section-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-section-maxWidth" name="pg_maxWidth" type="text" value="xl" /></label><label class="playground-toggle" for="playground-section-fullWidth"><span><strong>full Width</strong><small>boolean</small></span><input id="playground-section-fullWidth" name="pg_fullWidth" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-section-borderTop"><span><strong>border Top</strong><small>boolean</small></span><input id="playground-section-borderTop" name="pg_borderTop" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-section-borderBottom"><span><strong>border Bottom</strong><small>boolean</small></span><input id="playground-section-borderBottom" name="pg_borderBottom" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-section-class"><span><strong>class</strong><small>string</small></span><input id="playground-section-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-section-id"><span><strong>id</strong><small>string</small></span><input id="playground-section-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-section-size"><span><strong>size</strong><small>string</small></span><select id="playground-section-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-section-color"><span><strong>color</strong><small>string</small></span><select id="playground-section-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-section-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-section-variant" name="pg_variant"><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-section-spacing"><span><strong>spacing</strong><small>string</small></span><select id="playground-section-spacing" name="pg_spacing"><option value="lg" selected>lg</option><option value="none">none</option><option value="sm">sm</option><option value="md">md</option><option value="xl">xl</option></select></label><label class="playground-field" for="playground-section-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-section-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-section-fullWidth"><span><strong>full Width</strong><small>boolean</small></span><input id="playground-section-fullWidth" name="pg_fullWidth" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-section-borderTop"><span><strong>border Top</strong><small>boolean</small></span><input id="playground-section-borderTop" name="pg_borderTop" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-section-borderBottom"><span><strong>border Bottom</strong><small>boolean</small></span><input id="playground-section-borderBottom" name="pg_borderBottom" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-section-class"><span><strong>class</strong><small>string</small></span><input id="playground-section-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -53,68 +54,79 @@ page SectionDetail {
         <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 section</h2><p>Create predictable vertical rhythm around a page section.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="section-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="Section" size="default" variant="default" fullWidth="false" borderTop="false" borderBottom="false" 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"><Section id="standard-section" size="default" variant="default" spacing="lg" maxWidth="xl" fullWidth="false" borderTop="false" borderBottom="false" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Standard section content</div></Section></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Standard content section usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;Section&gt;
-  &lt;!-- Add default slot content here --&gt;
+            <pre><code>&lt;Section
+  id="standard-section"&gt;
+  &lt;div class="showcase-content-block"&gt;Standard section content&lt;/div&gt;
 &lt;/Section&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 dashboard section</h2><p>Reduce spacing for dense application screens and grouped dashboard content.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="section-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="Section" size="sm" variant="secondary" fullWidth="false" borderTop="false" borderBottom="false" 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"><Section id="compact-section" size="sm" variant="soft" spacing="sm" maxWidth="wide" fullWidth="false" borderTop="false" borderBottom="false" class="showcase-instance showcase-instance--2"><div class="showcase-content-block">Compact dashboard content</div></Section></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Compact dashboard section usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Section
+  id="compact-section"
   size="sm"
-  variant="secondary"&gt;
-  &lt;!-- Add default slot content here --&gt;
+  variant="soft"
+  spacing="sm"
+  maxWidth="wide"&gt;
+  &lt;div class="showcase-content-block"&gt;Compact dashboard content&lt;/div&gt;
 &lt;/Section&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 surface section</h2><p>Use a full-width background while retaining a structured content area.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="section-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="Section" size="lg" variant="success" fullWidth="true" borderTop="false" borderBottom="false" 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"><Section id="full-section" size="lg" variant="raised" maxWidth="full" fullWidth="true" borderTop="true" borderBottom="true" class="showcase-instance showcase-instance--3"><div class="showcase-content-block">Full-width public page section</div></Section></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Full-width surface section usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Section
+  id="full-section"
   size="lg"
-  variant="success"
-  fullWidth="true"&gt;
-  &lt;!-- Add default slot content here --&gt;
+  variant="raised"
+  maxWidth="full"
+  fullWidth="true"
+  borderTop="true"
+  borderBottom="true"&gt;
+  &lt;div class="showcase-content-block"&gt;Full-width public page section&lt;/div&gt;
 &lt;/Section&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>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>spacing</code></td><td>string</td><td><code>"lg"</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>fullWidth</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>borderTop</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>borderBottom</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="#section-demo-1">Production default</a><a href="#section-demo-2">Compact application</a><a href="#section-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="#section-demo-1">Standard content section</a><a href="#section-demo-2">Compact dashboard section</a><a href="#section-demo-3">Full-width surface section</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/select.wrn b/examples/component-showcase/app/pages/components/select.wrn
index bd9c3aca..09b4ef31 100644
--- a/examples/component-showcase/app/pages/components/select.wrn
+++ b/examples/component-showcase/app/pages/components/select.wrn
@@ -3,26 +3,26 @@ page SelectDetail {
   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") ?? "select-1"
-  state playground_name = ctx.url.searchParams.get("pg_name") ?? "selectField"
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Team"
-  state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? ""
-  state playground_values = ctx.url.searchParams.get("pg_values") ?? ""
-  state playground_options = ctx.url.searchParams.get("pg_options") ?? "[\n  {\n    \"label\": \"Engineering\",\n    \"value\": \"engineering\"\n  },\n  {\n    \"label\": \"Design\",\n    \"value\": \"design\"\n  },\n  {\n    \"label\": \"Marketing\",\n    \"value\": \"marketing\"\n  }\n]"
-  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter select"
+  state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
+  state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Select"
+  state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true"
+  state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
+  state playground_values = JSON.parse(ctx.url.searchParams.get("pg_values") ?? "[{\"id\":\"select-0-1\",\"key\":\"select-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#select-demo\",\"actionHref\":\"#select-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"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\":\"select-0-2\",\"key\":\"select-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#select-demo\",\"actionHref\":\"#select-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"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_options = JSON.parse(ctx.url.searchParams.get("pg_options") ?? "[{\"id\":\"select-0-1\",\"key\":\"select-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#select-demo\",\"actionHref\":\"#select-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"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\":\"select-0-2\",\"key\":\"select-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#select-demo\",\"actionHref\":\"#select-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"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_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_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_multiple = ctx.url.searchParams.get("pg_multiple") ?? "false"
-  state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
+  state playground_inline = (ctx.url.searchParams.get("pg_inline") ?? "false") === "true"
+  state playground_multiple = (ctx.url.searchParams.get("pg_multiple") ?? "false") === "true"
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Select"
     description = "Theme-aware, responsive select component."
@@ -40,54 +40,455 @@ page SelectDetail {
       </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="Select" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Select" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="input,change,focus,blur,open,close,invalid">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Select</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="Select" size="{playground_size}" color="{playground_color}" id="{playground_id}" name="{playground_name}" label="{playground_label}" hiddenLabel="{playground_hiddenLabel}" value="{playground_value}" values="{playground_values}" options="{playground_options}" placeholder="{playground_placeholder}" variant="{playground_variant}" icon="{playground_icon}" iconPosition="{playground_iconPosition}" helperText="{playground_helperText}" cornerHint="{playground_cornerHint}" error="{playground_error}" inline="{playground_inline}" multiple="{playground_multiple}" readonly="{playground_readonly}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Select size='{playground_size}' color='{playground_color}' id='{playground_id}' name='{playground_name}' label='{playground_label}' hiddenLabel='{playground_hiddenLabel}' value='{playground_value}' values='{playground_values}' options='{playground_options}' placeholder='{playground_placeholder}' variant='{playground_variant}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' inline='{playground_inline}' multiple='{playground_multiple}' 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;Select
-  id="select-1"
-  name="selectField"
-  label="Team"
-  options='[
+  value="sample-1"
+  values='[
     &#123;
-      "label": "Engineering",
-      "value": "engineering"
+      "id": "select-0-1",
+      "key": "select-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#select-demo",
+      "actionHref": "#select-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "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": "Design",
-      "value": "design"
-    &#125;,
-    &#123;
-      "label": "Marketing",
-      "value": "marketing"
+      "id": "select-0-2",
+      "key": "select-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#select-demo",
+      "actionHref": "#select-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "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;
   ]'
-  placeholder="Enter select"
-  helperText="Helpful context for this field."
+  options='[
+    &#123;
+      "id": "select-0-1",
+      "key": "select-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#select-demo",
+      "actionHref": "#select-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "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": "select-0-2",
+      "key": "select-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#select-demo",
+      "actionHref": "#select-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "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;
+  ]'
+  placeholder="Enter a sample value"
 /&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-select-size"><span><strong>size</strong><small>string</small></span><select id="playground-select-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-select-color"><span><strong>color</strong><small>string</small></span><select id="playground-select-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-select-id"><span><strong>id</strong><small>string</small></span><input id="playground-select-id" name="pg_id" type="text" value="select-1" /></label><label class="playground-field" for="playground-select-name"><span><strong>name</strong><small>string</small></span><input id="playground-select-name" name="pg_name" type="text" value="selectField" /></label><label class="playground-field" for="playground-select-label"><span><strong>label</strong><small>string</small></span><input id="playground-select-label" name="pg_label" type="text" value="Team" /></label><label class="playground-toggle" for="playground-select-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-select-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-select-value"><span><strong>value</strong><small>string</small></span><input id="playground-select-value" name="pg_value" type="text" value="" /></label><label class="playground-field" for="playground-select-values"><span><strong>values</strong><small>string</small></span><textarea id="playground-select-values" name="pg_values" rows="5" spellcheck="false" data-playground-json></textarea><em data-playground-error></em></label><label class="playground-field" for="playground-select-options"><span><strong>options</strong><small>string</small></span><textarea id="playground-select-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[
+          <div class="playground-fields"><label class="playground-field" for="playground-select-size"><span><strong>size</strong><small>string</small></span><select id="playground-select-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-select-color"><span><strong>color</strong><small>string</small></span><select id="playground-select-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-select-id"><span><strong>id</strong><small>string</small></span><input id="playground-select-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-select-name"><span><strong>name</strong><small>string</small></span><input id="playground-select-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-select-label"><span><strong>label</strong><small>string</small></span><input id="playground-select-label" name="pg_label" type="text" value="Select" /></label><label class="playground-toggle" for="playground-select-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-select-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-select-value"><span><strong>value</strong><small>string</small></span><input id="playground-select-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-select-values"><span><strong>values</strong><small>string</small></span><textarea id="playground-select-values" name="pg_values" rows="5" spellcheck="false" data-playground-json>[
   {
-    "label": "Engineering",
-    "value": "engineering"
+    "id": "select-0-1",
+    "key": "select-0-1",
+    "value": "primary",
+    "label": "Primary workflow",
+    "title": "Primary workflow",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "A configurable sample message.",
+    "href": "#select-demo",
+    "actionHref": "#select-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": true,
+    "selected": true,
+    "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": "Design",
-    "value": "design"
-  },
-  {
-    "label": "Marketing",
-    "value": "marketing"
+    "id": "select-0-2",
+    "key": "select-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#select-demo",
+    "actionHref": "#select-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": false,
+    "selected": false,
+    "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-select-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-select-placeholder" name="pg_placeholder" type="text" value="Enter select" /></label><label class="playground-field" for="playground-select-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-select-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-select-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-select-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-select-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-select-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-select-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-select-helperText" name="pg_helperText" type="text" value="Helpful context for this field." /></label><label class="playground-field" for="playground-select-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-select-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-select-error"><span><strong>error</strong><small>string</small></span><input id="playground-select-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-select-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-select-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-select-multiple"><span><strong>multiple</strong><small>boolean</small></span><input id="playground-select-multiple" name="pg_multiple" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-select-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-select-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-select-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-select-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-select-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-select-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-select-class"><span><strong>class</strong><small>string</small></span><input id="playground-select-class" name="pg_class" type="text" value="" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-select-options"><span><strong>options</strong><small>string</small></span><textarea id="playground-select-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[
+  {
+    "id": "select-0-1",
+    "key": "select-0-1",
+    "value": "primary",
+    "label": "Primary workflow",
+    "title": "Primary workflow",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "A configurable sample message.",
+    "href": "#select-demo",
+    "actionHref": "#select-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": true,
+    "selected": true,
+    "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": "select-0-2",
+    "key": "select-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#select-demo",
+    "actionHref": "#select-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": false,
+    "selected": false,
+    "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-select-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-select-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-select-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-select-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-select-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-select-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-select-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-select-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-select-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-select-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-select-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-select-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-select-error"><span><strong>error</strong><small>string</small></span><input id="playground-select-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-select-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-select-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-select-multiple"><span><strong>multiple</strong><small>boolean</small></span><input id="playground-select-multiple" name="pg_multiple" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-select-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-select-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-select-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-select-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-select-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-select-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-select-class"><span><strong>class</strong><small>string</small></span><input id="playground-select-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -96,347 +497,765 @@ page SelectDetail {
         <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="select-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="Select" size="default" color="primary" id="select-1" name="selectField" label="Team" value="" options="[{&quot;label&quot;:&quot;Engineering&quot;,&quot;value&quot;:&quot;engineering&quot;},{&quot;label&quot;:&quot;Design&quot;,&quot;value&quot;:&quot;design&quot;},{&quot;label&quot;:&quot;Marketing&quot;,&quot;value&quot;:&quot;marketing&quot;}]" placeholder="Enter select" variant="normal" icon="" iconPosition="start" helperText="Helpful context for this field." cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><Select size="default" label="Select" hiddenLabel="false" value="sample-1" values='[{"id":"select-0-1","key":"select-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#select-demo","actionHref":"#select-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"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":"select-0-2","key":"select-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#select-demo","actionHref":"#select-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"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"]}]' options='[{"id":"select-0-1","key":"select-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#select-demo","actionHref":"#select-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"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":"select-0-2","key":"select-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#select-demo","actionHref":"#select-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"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"]}]' placeholder="Enter a sample value" variant="normal" icon="" inline="false" multiple="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;Select
-  id="select-1"
-  name="selectField"
-  label="Team"
-  options='[
+  value="sample-1"
+  values='[
     &#123;
-      "label": "Engineering",
-      "value": "engineering"
+      "id": "select-0-1",
+      "key": "select-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#select-demo",
+      "actionHref": "#select-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "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": "Design",
-      "value": "design"
-    &#125;,
-    &#123;
-      "label": "Marketing",
-      "value": "marketing"
+      "id": "select-0-2",
+      "key": "select-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#select-demo",
+      "actionHref": "#select-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "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;
   ]'
-  placeholder="Enter select"
-  helperText="Helpful context for this field."
+  options='[
+    &#123;
+      "id": "select-0-1",
+      "key": "select-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#select-demo",
+      "actionHref": "#select-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "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": "select-0-2",
+      "key": "select-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#select-demo",
+      "actionHref": "#select-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "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;
+  ]'
+  placeholder="Enter a sample value"
 /&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="select-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="Select" size="default" color="primary" id="select-2" name="selectField" label="Team" value="" options="[{&quot;label&quot;:&quot;Engineering&quot;,&quot;value&quot;:&quot;engineering&quot;},{&quot;label&quot;:&quot;Design&quot;,&quot;value&quot;:&quot;design&quot;},{&quot;label&quot;:&quot;Marketing&quot;,&quot;value&quot;:&quot;marketing&quot;}]" placeholder="Enter select" variant="outlined" icon="icon-[lucide--sparkles]" iconPosition="start" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><Select size="sm" label="Compact example" hiddenLabel="false" value="sample-2" values='[{"id":"select-1-1","key":"select-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":"#select-demo","actionHref":"#select-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":"select-1-2","key":"select-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#select-demo","actionHref":"#select-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"]}]' options='[{"id":"select-1-1","key":"select-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":"#select-demo","actionHref":"#select-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":"select-1-2","key":"select-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#select-demo","actionHref":"#select-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"]}]' placeholder="Enter a sample value" variant="secondary" icon="icon-[lucide--arrow-right]" inline="false" multiple="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;Select
-  id="select-2"
-  name="selectField"
-  label="Team"
-  options='[
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  values='[
     &#123;
-      "label": "Engineering",
-      "value": "engineering"
+      "id": "select-1-1",
+      "key": "select-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": "#select-demo",
+      "actionHref": "#select-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": "Design",
-      "value": "design"
-    &#125;,
-    &#123;
-      "label": "Marketing",
-      "value": "marketing"
+      "id": "select-1-2",
+      "key": "select-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#select-demo",
+      "actionHref": "#select-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;
   ]'
-  placeholder="Enter select"
-  variant="outlined"
-  icon="icon-[lucide--sparkles]"
+  options='[
+    &#123;
+      "id": "select-1-1",
+      "key": "select-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": "#select-demo",
+      "actionHref": "#select-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": "select-1-2",
+      "key": "select-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#select-demo",
+      "actionHref": "#select-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;
+  ]'
+  placeholder="Enter a sample value"
+  variant="secondary"
+  icon="icon-[lucide--arrow-right]"
 /&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="select-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="Select" size="default" color="primary" id="select-3" name="selectField" label="Team" value="" options="[{&quot;label&quot;:&quot;Engineering&quot;,&quot;value&quot;:&quot;engineering&quot;},{&quot;label&quot;:&quot;Design&quot;,&quot;value&quot;:&quot;design&quot;},{&quot;label&quot;:&quot;Marketing&quot;,&quot;value&quot;:&quot;marketing&quot;}]" placeholder="Enter select" variant="floating" icon="icon-[lucide--circle-user-round]" iconPosition="end" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><Select size="lg" label="Advanced example" hiddenLabel="false" value="sample-3" values='[{"id":"select-2-1","key":"select-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":"#select-demo","actionHref":"#select-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":"select-2-2","key":"select-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":"#select-demo","actionHref":"#select-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"]}]' options='[{"id":"select-2-1","key":"select-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":"#select-demo","actionHref":"#select-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":"select-2-2","key":"select-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":"#select-demo","actionHref":"#select-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"]}]' placeholder="Search by name, email, or identifier" variant="success" icon="icon-[lucide--trash-2]" inline="false" multiple="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;Select
-  id="select-3"
-  name="selectField"
-  label="Team"
-  options='[
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  values='[
     &#123;
-      "label": "Engineering",
-      "value": "engineering"
+      "id": "select-2-1",
+      "key": "select-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": "#select-demo",
+      "actionHref": "#select-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": "Design",
-      "value": "design"
-    &#125;,
-    &#123;
-      "label": "Marketing",
-      "value": "marketing"
+      "id": "select-2-2",
+      "key": "select-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": "#select-demo",
+      "actionHref": "#select-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;
   ]'
-  placeholder="Enter select"
-  variant="floating"
-  icon="icon-[lucide--circle-user-round]"
-  iconPosition="end"
-/&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="select-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="Select" size="sm" color="primary" id="select-4" name="selectField" label="Team" value="" options="[{&quot;label&quot;:&quot;Engineering&quot;,&quot;value&quot;:&quot;engineering&quot;},{&quot;label&quot;:&quot;Design&quot;,&quot;value&quot;:&quot;design&quot;},{&quot;label&quot;:&quot;Marketing&quot;,&quot;value&quot;:&quot;marketing&quot;}]" placeholder="Enter select" variant="pill" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" 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;Select
-  size="sm"
-  id="select-4"
-  name="selectField"
-  label="Team"
   options='[
     &#123;
-      "label": "Engineering",
-      "value": "engineering"
+      "id": "select-2-1",
+      "key": "select-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": "#select-demo",
+      "actionHref": "#select-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": "Design",
-      "value": "design"
-    &#125;,
-    &#123;
-      "label": "Marketing",
-      "value": "marketing"
+      "id": "select-2-2",
+      "key": "select-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": "#select-demo",
+      "actionHref": "#select-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;
   ]'
-  placeholder="Enter select"
-  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="select-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="Select" size="default" color="primary" id="select-5" name="selectField" label="Team" value="design" options="[{&quot;label&quot;:&quot;Engineering&quot;,&quot;value&quot;:&quot;engineering&quot;},{&quot;label&quot;:&quot;Design&quot;,&quot;value&quot;:&quot;design&quot;},{&quot;label&quot;:&quot;Marketing&quot;,&quot;value&quot;:&quot;marketing&quot;}]" placeholder="Enter select" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" 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;Select
-  id="select-5"
-  name="selectField"
-  label="Team"
-  value="design"
-  options='[
-    &#123;
-      "label": "Engineering",
-      "value": "engineering"
-    &#125;,
-    &#123;
-      "label": "Design",
-      "value": "design"
-    &#125;,
-    &#123;
-      "label": "Marketing",
-      "value": "marketing"
-    &#125;
-  ]'
-  placeholder="Enter select"
-  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="select-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="Select" size="default" color="primary" id="select-6" name="selectField" label="Team" value="" options="[{&quot;label&quot;:&quot;Engineering&quot;,&quot;value&quot;:&quot;engineering&quot;},{&quot;label&quot;:&quot;Design&quot;,&quot;value&quot;:&quot;design&quot;},{&quot;label&quot;:&quot;Marketing&quot;,&quot;value&quot;:&quot;marketing&quot;}]" placeholder="Enter select" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" 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;Select
-  id="select-6"
-  name="selectField"
-  label="Team"
-  options='[
-    &#123;
-      "label": "Engineering",
-      "value": "engineering"
-    &#125;,
-    &#123;
-      "label": "Design",
-      "value": "design"
-    &#125;,
-    &#123;
-      "label": "Marketing",
-      "value": "marketing"
-    &#125;
-  ]'
-  placeholder="Enter select"
-  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="select-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="Select" size="default" color="primary" id="select-7" name="selectField" label="Team" value="" options="[{&quot;label&quot;:&quot;Engineering&quot;,&quot;value&quot;:&quot;engineering&quot;},{&quot;label&quot;:&quot;Design&quot;,&quot;value&quot;:&quot;design&quot;},{&quot;label&quot;:&quot;Marketing&quot;,&quot;value&quot;:&quot;marketing&quot;}]" placeholder="Enter select" variant="normal" icon="" iconPosition="start" helperText="We&#39;ll never share your details." cornerHint="" error="" inline="true" 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;Select
-  id="select-7"
-  name="selectField"
-  label="Team"
-  options='[
-    &#123;
-      "label": "Engineering",
-      "value": "engineering"
-    &#125;,
-    &#123;
-      "label": "Design",
-      "value": "design"
-    &#125;,
-    &#123;
-      "label": "Marketing",
-      "value": "marketing"
-    &#125;
-  ]'
-  placeholder="Enter select"
-  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="select-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="Select" size="default" color="primary" id="select-8" name="selectField" label="Team" value="" options="[{&quot;label&quot;:&quot;Engineering&quot;,&quot;value&quot;:&quot;engineering&quot;},{&quot;label&quot;:&quot;Design&quot;,&quot;value&quot;:&quot;design&quot;},{&quot;label&quot;:&quot;Marketing&quot;,&quot;value&quot;:&quot;marketing&quot;}]" placeholder="Enter select" variant="normal" icon="" iconPosition="start" 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;Select
-  id="select-8"
-  name="selectField"
-  label="Team"
-  options='[
-    &#123;
-      "label": "Engineering",
-      "value": "engineering"
-    &#125;,
-    &#123;
-      "label": "Design",
-      "value": "design"
-    &#125;,
-    &#123;
-      "label": "Marketing",
-      "value": "marketing"
-    &#125;
-  ]'
-  placeholder="Enter select"
-  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="select-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="Select" size="default" color="primary" id="select-9" name="validatedField" label="Team" value="" options="[{&quot;label&quot;:&quot;Engineering&quot;,&quot;value&quot;:&quot;engineering&quot;},{&quot;label&quot;:&quot;Design&quot;,&quot;value&quot;:&quot;design&quot;},{&quot;label&quot;:&quot;Marketing&quot;,&quot;value&quot;:&quot;marketing&quot;}]" placeholder="Enter select" variant="normal" icon="" iconPosition="start" 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;Select
-  id="select-9"
-  name="validatedField"
-  label="Team"
-  options='[
-    &#123;
-      "label": "Engineering",
-      "value": "engineering"
-    &#125;,
-    &#123;
-      "label": "Design",
-      "value": "design"
-    &#125;,
-    &#123;
-      "label": "Marketing",
-      "value": "marketing"
-    &#125;
-  ]'
-  placeholder="Enter select"
-  required="true"
+  placeholder="Search by name, email, or identifier"
+  variant="success"
+  icon="icon-[lucide--trash-2]"
 /&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>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</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>@open</code><span>Fires after the component opens.</span></div><div><code>@close</code><span>Fires after the component closes.</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;Select
+  @input='console.log(event.detail)'
+  @change='console.log(event.detail)'
+  @focus='console.log(event.detail)'
+  @blur='console.log(event.detail)'
+  @open='console.log(event.detail)'
+  @close='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=\"Select\"], [data-component=\"Select\"]")
 
-component.addEventListener('input', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("focus", (event) =&gt; &#123;
+  console.log("focus", event.detail)
+&#125;)
+
+component?.addEventListener("blur", (event) =&gt; &#123;
+  console.log("blur", 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("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>"Select"</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>values</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>placeholder</code></td><td>string</td><td><code>"Select an option"</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>multiple</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="#select-demo-1">Default field</a><a href="#select-demo-2">Outlined with start icon</a><a href="#select-demo-3">Floating label</a><a href="#select-demo-4">Pill and compact size</a><a href="#select-demo-5">Read only</a><a href="#select-demo-6">Disabled</a><a href="#select-demo-7">Inline helper text</a><a href="#select-demo-8">Field with corner hint</a><a href="#select-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="#select-demo-1">Production default</a><a href="#select-demo-2">Compact application</a><a href="#select-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/range-slider"><small>Previous</small><strong>← Range Slider</strong></a>
+      <a href="/components/search-box"><small>Previous</small><strong>← Search Box</strong></a>
       <a href="/components/switch"><small>Next</small><strong>Switch →</strong></a>
     </nav>
   }
diff --git a/examples/component-showcase/app/pages/components/sidebar.wrn b/examples/component-showcase/app/pages/components/sidebar.wrn
index 7f676542..a9933426 100644
--- a/examples/component-showcase/app/pages/components/sidebar.wrn
+++ b/examples/component-showcase/app/pages/components/sidebar.wrn
@@ -4,7 +4,7 @@ page SidebarDetail {
   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") ?? "Sidebar"
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"sidebar-0-1\",\n    \"key\": \"sidebar-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\": \"#sidebar-demo\",\n    \"actionHref\": \"#sidebar-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\": \"sidebar-0-2\",\n    \"key\": \"sidebar-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\": \"#sidebar-demo\",\n    \"actionHref\": \"#sidebar-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\":\"sidebar-0-1\",\"key\":\"sidebar-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#sidebar-demo\",\"actionHref\":\"#sidebar-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"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\":\"sidebar-0-2\",\"key\":\"sidebar-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#sidebar-demo\",\"actionHref\":\"#sidebar-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"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_mobileLabel = ctx.url.searchParams.get("pg_mobileLabel") ?? "Sidebar"
@@ -26,12 +26,12 @@ page SidebarDetail {
       </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="Sidebar" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Sidebar" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="toggle,open,close,select">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Sidebar</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="Sidebar" size="{playground_size}" color="{playground_color}" label="{playground_label}" items="{playground_items}" active="{playground_active}" orientation="{playground_orientation}" mobileLabel="{playground_mobileLabel}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Sidebar size='{playground_size}' color='{playground_color}' label='{playground_label}' items='{playground_items}' active='{playground_active}' orientation='{playground_orientation}' 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;Sidebar
@@ -147,6 +147,7 @@ page SidebarDetail {
 /&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>
@@ -272,7 +273,8 @@ page SidebarDetail {
         <div class="demo-workbench">
           <div id="sidebar-demo-1" class="demo-canvas demo-canvas--1">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Sidebar" size="default" label="Sidebar" items="[{&quot;id&quot;:&quot;sidebar-0-1&quot;,&quot;key&quot;:&quot;sidebar-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;#sidebar-demo&quot;,&quot;actionHref&quot;:&quot;#sidebar-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;sidebar-0-2&quot;,&quot;key&quot;:&quot;sidebar-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;#sidebar-demo&quot;,&quot;actionHref&quot;:&quot;#sidebar-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;]}]" mobileLabel="Sidebar" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Sidebar size="default" label="Sidebar" items='[{"id":"sidebar-0-1","key":"sidebar-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#sidebar-demo","actionHref":"#sidebar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","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":"sidebar-0-2","key":"sidebar-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#sidebar-demo","actionHref":"#sidebar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' mobileLabel="Sidebar" 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>
@@ -398,7 +400,8 @@ page SidebarDetail {
         <div class="demo-workbench">
           <div id="sidebar-demo-2" class="demo-canvas demo-canvas--2">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
-            <div class="demo-render"><div data-component="Sidebar" size="sm" label="Compact example" items="[{&quot;id&quot;:&quot;sidebar-1-1&quot;,&quot;key&quot;:&quot;sidebar-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;#sidebar-demo&quot;,&quot;actionHref&quot;:&quot;#sidebar-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;sidebar-1-2&quot;,&quot;key&quot;:&quot;sidebar-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;#sidebar-demo&quot;,&quot;actionHref&quot;:&quot;#sidebar-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;]}]" mobileLabel="Compact example" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Sidebar size="sm" label="Compact example" items='[{"id":"sidebar-1-1","key":"sidebar-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":"#sidebar-demo","actionHref":"#sidebar-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":"sidebar-1-2","key":"sidebar-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#sidebar-demo","actionHref":"#sidebar-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"]}]' 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>
@@ -526,7 +529,8 @@ page SidebarDetail {
         <div class="demo-workbench">
           <div id="sidebar-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="Sidebar" size="lg" label="Advanced example" items="[{&quot;id&quot;:&quot;sidebar-2-1&quot;,&quot;key&quot;:&quot;sidebar-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;#sidebar-demo&quot;,&quot;actionHref&quot;:&quot;#sidebar-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;sidebar-2-2&quot;,&quot;key&quot;:&quot;sidebar-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;#sidebar-demo&quot;,&quot;actionHref&quot;:&quot;#sidebar-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;]}]" mobileLabel="Advanced example" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Sidebar size="lg" label="Advanced example" items='[{"id":"sidebar-2-1","key":"sidebar-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":"#sidebar-demo","actionHref":"#sidebar-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":"sidebar-2-2","key":"sidebar-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":"#sidebar-demo","actionHref":"#sidebar-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"]}]' 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>
@@ -646,11 +650,28 @@ page SidebarDetail {
           </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><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;Sidebar
+  @toggle='console.log(event.detail)'
+  @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=\"Sidebar\"], [data-component=\"Sidebar\"]")
 
-component.addEventListener('toggle', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("toggle", (event) =&gt; &#123;
+  console.log("toggle", event.detail)
+&#125;)
+
+component?.addEventListener("open", (event) =&gt; &#123;
+  console.log("open", event.detail)
+&#125;)
+
+component?.addEventListener("close", (event) =&gt; &#123;
+  console.log("close", event.detail)
+&#125;)
+
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)</code></pre></section></div></div></section>
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Sidebar"</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>mobileLabel</code></td><td>string</td><td><code>"Open 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">
diff --git a/examples/component-showcase/app/pages/components/skeleton.wrn b/examples/component-showcase/app/pages/components/skeleton.wrn
index b020548f..9dbbd9b3 100644
--- a/examples/component-showcase/app/pages/components/skeleton.wrn
+++ b/examples/component-showcase/app/pages/components/skeleton.wrn
@@ -4,7 +4,7 @@ page SkeletonDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_label = ctx.url.searchParams.get("pg_label") ?? "Skeleton"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
-  state playground_lines = ctx.url.searchParams.get("pg_lines") ?? "3"
+  state playground_lines = Number(ctx.url.searchParams.get("pg_lines") ?? "3")
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Skeleton"
@@ -23,12 +23,12 @@ page SkeletonDetail {
       </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="Skeleton" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Skeleton" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Skeleton</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="Skeleton" color="{playground_color}" label="{playground_label}" size="{playground_size}" lines="{playground_lines}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Skeleton color='{playground_color}' label='{playground_label}' size='{playground_size}' lines='{playground_lines}' 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;Skeleton
@@ -36,6 +36,7 @@ page SkeletonDetail {
 /&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>
@@ -54,7 +55,8 @@ page SkeletonDetail {
         <div class="demo-workbench">
           <div id="skeleton-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="Skeleton" label="Skeleton" size="md" lines="3" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Skeleton label="Skeleton" size="md" lines="3" 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>
@@ -72,7 +74,8 @@ page SkeletonDetail {
         <div class="demo-workbench">
           <div id="skeleton-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="Skeleton" label="Compact example" size="sm" lines="3" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Skeleton label="Compact example" size="sm" lines="3" 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>
@@ -91,7 +94,8 @@ page SkeletonDetail {
         <div class="demo-workbench">
           <div id="skeleton-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="Skeleton" label="Advanced example" size="lg" lines="3" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Skeleton label="Advanced example" size="lg" lines="3" 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>
@@ -102,11 +106,11 @@ page SkeletonDetail {
           </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>label</code></td><td>string</td><td><code>"Loading"</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>lines</code></td><td>number</td><td><code>3</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="#skeleton-demo-1">Production default</a><a href="#skeleton-demo-2">Compact application</a><a href="#skeleton-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="#skeleton-demo-1">Production default</a><a href="#skeleton-demo-2">Compact application</a><a href="#skeleton-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/spinner.wrn b/examples/component-showcase/app/pages/components/spinner.wrn
index d4339dd9..a479cf91 100644
--- a/examples/component-showcase/app/pages/components/spinner.wrn
+++ b/examples/component-showcase/app/pages/components/spinner.wrn
@@ -4,7 +4,7 @@ page SpinnerDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_label = ctx.url.searchParams.get("pg_label") ?? "Spinner"
   state playground_size = ctx.url.searchParams.get("pg_size") ?? "md"
-  state playground_lines = ctx.url.searchParams.get("pg_lines") ?? "3"
+  state playground_lines = Number(ctx.url.searchParams.get("pg_lines") ?? "3")
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Spinner"
@@ -23,12 +23,12 @@ page SpinnerDetail {
       </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="Spinner" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Spinner" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Spinner</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="Spinner" color="{playground_color}" label="{playground_label}" size="{playground_size}" lines="{playground_lines}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Spinner color='{playground_color}' label='{playground_label}' size='{playground_size}' lines='{playground_lines}' 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;Spinner
@@ -36,6 +36,7 @@ page SpinnerDetail {
 /&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>
@@ -54,7 +55,8 @@ page SpinnerDetail {
         <div class="demo-workbench">
           <div id="spinner-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="Spinner" label="Spinner" size="md" lines="3" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><Spinner label="Spinner" size="md" lines="3" 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>
@@ -72,7 +74,8 @@ page SpinnerDetail {
         <div class="demo-workbench">
           <div id="spinner-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="Spinner" label="Compact example" size="sm" lines="3" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><Spinner label="Compact example" size="sm" lines="3" 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>
@@ -91,7 +94,8 @@ page SpinnerDetail {
         <div class="demo-workbench">
           <div id="spinner-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="Spinner" label="Advanced example" size="lg" lines="3" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><Spinner label="Advanced example" size="lg" lines="3" 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>
@@ -102,11 +106,11 @@ page SpinnerDetail {
           </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>label</code></td><td>string</td><td><code>"Loading"</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>lines</code></td><td>number</td><td><code>3</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="#spinner-demo-1">Production default</a><a href="#spinner-demo-2">Compact application</a><a href="#spinner-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="#spinner-demo-1">Production default</a><a href="#spinner-demo-2">Compact application</a><a href="#spinner-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/split-hero.wrn b/examples/component-showcase/app/pages/components/split-hero.wrn
index b09d8cc7..7c65b9d8 100644
--- a/examples/component-showcase/app/pages/components/split-hero.wrn
+++ b/examples/component-showcase/app/pages/components/split-hero.wrn
@@ -2,6 +2,7 @@
 page SplitHeroDetail {
   layout = "showcase"
   state playground_eyebrow = ctx.url.searchParams.get("pg_eyebrow") ?? ""
+  state playground_eyebrowIcon = ctx.url.searchParams.get("pg_eyebrowIcon") ?? "icon-[lucide--sparkles]"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Split Hero example"
   state playground_highlight = ctx.url.searchParams.get("pg_highlight") ?? ""
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default split hero for a modern application."
@@ -12,36 +13,53 @@ page SplitHeroDetail {
   state playground_secondaryHref = ctx.url.searchParams.get("pg_secondaryHref") ?? "#split-hero-demo"
   state playground_secondaryIcon = ctx.url.searchParams.get("pg_secondaryIcon") ?? ""
   state playground_visualPosition = ctx.url.searchParams.get("pg_visualPosition") ?? "right"
-  state playground_reverse = ctx.url.searchParams.get("pg_reverse") ?? "false"
+  state playground_reverse = (ctx.url.searchParams.get("pg_reverse") ?? "false") === "true"
   state playground_ratio = ctx.url.searchParams.get("pg_ratio") ?? "balanced"
+  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") ?? "default"
-  state playground_trustItems = ctx.url.searchParams.get("pg_trustItems") ?? "[\n  {\n    \"id\": \"split-hero-0-1\",\n    \"key\": \"split-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\": \"#split-hero-demo\",\n    \"actionHref\": \"#split-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\": \"split-hero-0-2\",\n    \"key\": \"split-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\": \"#split-hero-demo\",\n    \"actionHref\": \"#split-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_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl"
+  state playground_fullBleed = (ctx.url.searchParams.get("pg_fullBleed") ?? "true") === "true"
+  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_visualEyebrow = ctx.url.searchParams.get("pg_visualEyebrow") ?? ""
+  state playground_visualTitle = ctx.url.searchParams.get("pg_visualTitle") ?? "Split Hero example"
+  state playground_visualDescription = ctx.url.searchParams.get("pg_visualDescription") ?? "A polished default split hero for a modern application."
+  state playground_visualItems = JSON.parse(ctx.url.searchParams.get("pg_visualItems") ?? "[{\"id\":\"split-hero-0-1\",\"key\":\"split-hero-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#split-hero-demo\",\"actionHref\":\"#split-hero-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"split-hero-0-2\",\"key\":\"split-hero-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#split-hero-demo\",\"actionHref\":\"#split-hero-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
+  state playground_visualStyle = ctx.url.searchParams.get("pg_visualStyle") ?? "panel"
+  state playground_trustItems = JSON.parse(ctx.url.searchParams.get("pg_trustItems") ?? "[{\"id\":\"split-hero-0-1\",\"key\":\"split-hero-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#split-hero-demo\",\"actionHref\":\"#split-hero-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"split-hero-0-2\",\"key\":\"split-hero-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#split-hero-demo\",\"actionHref\":\"#split-hero-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Split Hero"
-    description = "Two-column hero with configurable content and visual placement."
+    description = "Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data 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>Split Hero</span>
+      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/marketing">Marketing</a><span aria-hidden="true">/</span><span>Split 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>Split Hero</h1>
-        <p>Two-column hero with configurable content and visual placement.</p>
-        <div class="detail-badges"><span>18 props</span><span>4 slots</span><span>0 events</span><span>Theme ready</span><span>Responsive</span></div>
+        <p>Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel.</p>
+        <div class="detail-badges"><span>31 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="SplitHero" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="SplitHero" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Split 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="SplitHero" eyebrow="{playground_eyebrow}" title="{playground_title}" highlight="{playground_highlight}" description="{playground_description}" primaryLabel="{playground_primaryLabel}" primaryHref="{playground_primaryHref}" primaryIcon="{playground_primaryIcon}" secondaryLabel="{playground_secondaryLabel}" secondaryHref="{playground_secondaryHref}" secondaryIcon="{playground_secondaryIcon}" visualPosition="{playground_visualPosition}" reverse="{playground_reverse}" ratio="{playground_ratio}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" trustItems="{playground_trustItems}" class="{playground_class}"><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></div>
+          <div class="playground-preview-source" data-playground-preview><SplitHero eyebrow='{playground_eyebrow}' eyebrowIcon='{playground_eyebrowIcon}' title='{playground_title}' highlight='{playground_highlight}' description='{playground_description}' primaryLabel='{playground_primaryLabel}' primaryHref='{playground_primaryHref}' primaryIcon='{playground_primaryIcon}' secondaryLabel='{playground_secondaryLabel}' secondaryHref='{playground_secondaryHref}' secondaryIcon='{playground_secondaryIcon}' visualPosition='{playground_visualPosition}' reverse='{playground_reverse}' ratio='{playground_ratio}' align='{playground_align}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' maxWidth='{playground_maxWidth}' fullBleed='{playground_fullBleed}' backgroundImage='{playground_backgroundImage}' visualImage='{playground_visualImage}' visualAlt='{playground_visualAlt}' visualIcon='{playground_visualIcon}' visualEyebrow='{playground_visualEyebrow}' visualTitle='{playground_visualTitle}' visualDescription='{playground_visualDescription}' visualItems='{playground_visualItems}' visualStyle='{playground_visualStyle}' trustItems='{playground_trustItems}' 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></SplitHero></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;SplitHero
@@ -51,6 +69,117 @@ page SplitHeroDetail {
   primaryHref="#split-hero-demo"
   secondaryLabel="Split Hero"
   secondaryHref="#split-hero-demo"
+  align="start"
+  visualTitle="Split Hero example"
+  visualDescription="A polished default split hero for a modern application."
+  visualItems='[
+    &#123;
+      "id": "split-hero-0-1",
+      "key": "split-hero-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#split-hero-demo",
+      "actionHref": "#split-hero-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        &#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": "split-hero-0-2",
+      "key": "split-hero-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#split-hero-demo",
+      "actionHref": "#split-hero-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        &#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;
+  ]'
   trustItems='[
     &#123;
       "id": "split-hero-0-1",
@@ -159,14 +288,130 @@ page SplitHeroDetail {
       ]
     &#125;
   ]'&gt;
-  &lt;!-- Add actions, trust, default, visual slot content here --&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;/SplitHero&gt;</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          
         </div>
         <form class="playground-controls" data-playground-form>
-          <header><div><span>Component props</span><strong>18 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-split-hero-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-split-hero-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-split-hero-title"><span><strong>title</strong><small>string</small></span><input id="playground-split-hero-title" name="pg_title" type="text" value="Split Hero example" /></label><label class="playground-field" for="playground-split-hero-highlight"><span><strong>highlight</strong><small>string</small></span><input id="playground-split-hero-highlight" name="pg_highlight" type="text" value="" /></label><label class="playground-field" for="playground-split-hero-description"><span><strong>description</strong><small>string</small></span><input id="playground-split-hero-description" name="pg_description" type="text" value="A polished default split hero for a modern application." /></label><label class="playground-field" for="playground-split-hero-primaryLabel"><span><strong>primary Label</strong><small>string</small></span><input id="playground-split-hero-primaryLabel" name="pg_primaryLabel" type="text" value="Split Hero" /></label><label class="playground-field" for="playground-split-hero-primaryHref"><span><strong>primary Href</strong><small>string</small></span><input id="playground-split-hero-primaryHref" name="pg_primaryHref" type="text" value="#split-hero-demo" /></label><label class="playground-field" for="playground-split-hero-primaryIcon"><span><strong>primary Icon</strong><small>string</small></span><input id="playground-split-hero-primaryIcon" name="pg_primaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-split-hero-secondaryLabel"><span><strong>secondary Label</strong><small>string</small></span><input id="playground-split-hero-secondaryLabel" name="pg_secondaryLabel" type="text" value="Split Hero" /></label><label class="playground-field" for="playground-split-hero-secondaryHref"><span><strong>secondary Href</strong><small>string</small></span><input id="playground-split-hero-secondaryHref" name="pg_secondaryHref" type="text" value="#split-hero-demo" /></label><label class="playground-field" for="playground-split-hero-secondaryIcon"><span><strong>secondary Icon</strong><small>string</small></span><input id="playground-split-hero-secondaryIcon" name="pg_secondaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-split-hero-visualPosition"><span><strong>visual Position</strong><small>string</small></span><input id="playground-split-hero-visualPosition" name="pg_visualPosition" type="text" value="right" /></label><label class="playground-toggle" for="playground-split-hero-reverse"><span><strong>reverse</strong><small>boolean</small></span><input id="playground-split-hero-reverse" name="pg_reverse" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-split-hero-ratio"><span><strong>ratio</strong><small>string</small></span><select id="playground-split-hero-ratio" name="pg_ratio"><option value="balanced" selected>balanced</option><option value="content">content</option><option value="visual">visual</option></select></label><label class="playground-field" for="playground-split-hero-size"><span><strong>size</strong><small>string</small></span><select id="playground-split-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></select></label><label class="playground-field" for="playground-split-hero-color"><span><strong>color</strong><small>string</small></span><select id="playground-split-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-split-hero-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-split-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="soft">soft</option></select></label><label class="playground-field" for="playground-split-hero-trustItems"><span><strong>trust Items</strong><small>string</small></span><textarea id="playground-split-hero-trustItems" name="pg_trustItems" rows="5" spellcheck="false" data-playground-json>[
+          <header><div><span>Component props</span><strong>31 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-split-hero-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-split-hero-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-split-hero-eyebrowIcon"><span><strong>eyebrow Icon</strong><small>string</small></span><input id="playground-split-hero-eyebrowIcon" name="pg_eyebrowIcon" type="text" value="icon-[lucide--sparkles]" /></label><label class="playground-field" for="playground-split-hero-title"><span><strong>title</strong><small>string</small></span><input id="playground-split-hero-title" name="pg_title" type="text" value="Split Hero example" /></label><label class="playground-field" for="playground-split-hero-highlight"><span><strong>highlight</strong><small>string</small></span><input id="playground-split-hero-highlight" name="pg_highlight" type="text" value="" /></label><label class="playground-field" for="playground-split-hero-description"><span><strong>description</strong><small>string</small></span><input id="playground-split-hero-description" name="pg_description" type="text" value="A polished default split hero for a modern application." /></label><label class="playground-field" for="playground-split-hero-primaryLabel"><span><strong>primary Label</strong><small>string</small></span><input id="playground-split-hero-primaryLabel" name="pg_primaryLabel" type="text" value="Split Hero" /></label><label class="playground-field" for="playground-split-hero-primaryHref"><span><strong>primary Href</strong><small>string</small></span><input id="playground-split-hero-primaryHref" name="pg_primaryHref" type="text" value="#split-hero-demo" /></label><label class="playground-field" for="playground-split-hero-primaryIcon"><span><strong>primary Icon</strong><small>string</small></span><input id="playground-split-hero-primaryIcon" name="pg_primaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-split-hero-secondaryLabel"><span><strong>secondary Label</strong><small>string</small></span><input id="playground-split-hero-secondaryLabel" name="pg_secondaryLabel" type="text" value="Split Hero" /></label><label class="playground-field" for="playground-split-hero-secondaryHref"><span><strong>secondary Href</strong><small>string</small></span><input id="playground-split-hero-secondaryHref" name="pg_secondaryHref" type="text" value="#split-hero-demo" /></label><label class="playground-field" for="playground-split-hero-secondaryIcon"><span><strong>secondary Icon</strong><small>string</small></span><input id="playground-split-hero-secondaryIcon" name="pg_secondaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-split-hero-visualPosition"><span><strong>visual Position</strong><small>string</small></span><select id="playground-split-hero-visualPosition" name="pg_visualPosition"><option value="right" selected>right</option><option value="left">left</option></select></label><label class="playground-toggle" for="playground-split-hero-reverse"><span><strong>reverse</strong><small>boolean</small></span><input id="playground-split-hero-reverse" name="pg_reverse" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-split-hero-ratio"><span><strong>ratio</strong><small>string</small></span><select id="playground-split-hero-ratio" name="pg_ratio"><option value="balanced" selected>balanced</option><option value="content">content</option><option value="visual">visual</option></select></label><label class="playground-field" for="playground-split-hero-align"><span><strong>align</strong><small>string</small></span><select id="playground-split-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-split-hero-size"><span><strong>size</strong><small>string</small></span><select id="playground-split-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></select></label><label class="playground-field" for="playground-split-hero-color"><span><strong>color</strong><small>string</small></span><select id="playground-split-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-split-hero-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-split-hero-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="gradient">gradient</option><option value="solid">solid</option><option value="minimal">minimal</option></select></label><label class="playground-field" for="playground-split-hero-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-split-hero-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-split-hero-fullBleed"><span><strong>full Bleed</strong><small>boolean</small></span><input id="playground-split-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-split-hero-backgroundImage"><span><strong>background Image</strong><small>string</small></span><input id="playground-split-hero-backgroundImage" name="pg_backgroundImage" type="text" value="" /></label><label class="playground-field" for="playground-split-hero-visualImage"><span><strong>visual Image</strong><small>string</small></span><input id="playground-split-hero-visualImage" name="pg_visualImage" type="text" value="" /></label><label class="playground-field" for="playground-split-hero-visualAlt"><span><strong>visual Alt</strong><small>string</small></span><input id="playground-split-hero-visualAlt" name="pg_visualAlt" type="text" value="" /></label><label class="playground-field" for="playground-split-hero-visualIcon"><span><strong>visual Icon</strong><small>string</small></span><input id="playground-split-hero-visualIcon" name="pg_visualIcon" type="text" value="" /></label><label class="playground-field" for="playground-split-hero-visualEyebrow"><span><strong>visual Eyebrow</strong><small>string</small></span><input id="playground-split-hero-visualEyebrow" name="pg_visualEyebrow" type="text" value="" /></label><label class="playground-field" for="playground-split-hero-visualTitle"><span><strong>visual Title</strong><small>string</small></span><input id="playground-split-hero-visualTitle" name="pg_visualTitle" type="text" value="Split Hero example" /></label><label class="playground-field" for="playground-split-hero-visualDescription"><span><strong>visual Description</strong><small>string</small></span><input id="playground-split-hero-visualDescription" name="pg_visualDescription" type="text" value="A polished default split hero for a modern application." /></label><label class="playground-field" for="playground-split-hero-visualItems"><span><strong>visual Items</strong><small>string</small></span><textarea id="playground-split-hero-visualItems" name="pg_visualItems" rows="5" spellcheck="false" data-playground-json>[
+  {
+    "id": "split-hero-0-1",
+    "key": "split-hero-0-1",
+    "value": "primary",
+    "label": "Primary workflow",
+    "title": "Primary workflow",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "A configurable sample message.",
+    "href": "#split-hero-demo",
+    "actionHref": "#split-hero-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": true,
+    "selected": true,
+    "checked": true,
+    "disabled": false,
+    "outgoing": false,
+    "open": true,
+    "number": 1,
+    "count": 16,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 1",
+    "items": [
+      {
+        "label": "Nested option A",
+        "value": "nested-a"
+      },
+      {
+        "label": "Nested option B",
+        "value": "nested-b"
+      }
+    ],
+    "links": [
+      {
+        "label": "Documentation",
+        "href": "#documentation"
+      },
+      {
+        "label": "API reference",
+        "href": "#api-reference"
+      }
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  },
+  {
+    "id": "split-hero-0-2",
+    "key": "split-hero-0-2",
+    "value": "secondary",
+    "label": "Additional option",
+    "title": "Supporting example",
+    "description": "A clean default configuration for everyday product interfaces.",
+    "text": "Another configurable message.",
+    "href": "#split-hero-demo",
+    "actionHref": "#split-hero-demo",
+    "actionLabel": "View details",
+    "icon": "icon-[lucide--sparkles]",
+    "iconClass": "icon-[lucide--sparkles]",
+    "variant": "primary",
+    "status": "Active",
+    "time": "09:30",
+    "current": false,
+    "selected": false,
+    "checked": false,
+    "disabled": false,
+    "outgoing": true,
+    "open": true,
+    "number": 2,
+    "count": 32,
+    "percentage": 72,
+    "color": "#7c3aed",
+    "target": "_self",
+    "ariaLabel": "Open primary workflow 2",
+    "items": [
+      {
+        "label": "Nested option A",
+        "value": "nested-a"
+      },
+      {
+        "label": "Nested option B",
+        "value": "nested-b"
+      }
+    ],
+    "links": [
+      {
+        "label": "Documentation",
+        "href": "#documentation"
+      },
+      {
+        "label": "API reference",
+        "href": "#api-reference"
+      }
+    ],
+    "values": [
+      "Included",
+      "Standard"
+    ]
+  }
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-split-hero-visualStyle"><span><strong>visual Style</strong><small>string</small></span><input id="playground-split-hero-visualStyle" name="pg_visualStyle" type="text" value="panel" /></label><label class="playground-field" for="playground-split-hero-trustItems"><span><strong>trust Items</strong><small>string</small></span><textarea id="playground-split-hero-trustItems" name="pg_trustItems" rows="5" spellcheck="false" data-playground-json>[
   {
     "id": "split-hero-0-1",
     "key": "split-hero-0-1",
@@ -282,23 +527,145 @@ page SplitHeroDetail {
         <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>Balanced content and visual</h2><p>Explain a product, department, or service with a balanced two-column introduction.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="split-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="SplitHero" title="Split Hero example" description="A polished default split hero for a modern application." primaryLabel="Split Hero" primaryHref="#split-hero-demo" secondaryLabel="Split Hero" secondaryHref="#split-hero-demo" reverse="false" size="default" variant="default" trustItems="[{&quot;id&quot;:&quot;split-hero-0-1&quot;,&quot;key&quot;:&quot;split-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;#split-hero-demo&quot;,&quot;actionHref&quot;:&quot;#split-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;split-hero-0-2&quot;,&quot;key&quot;:&quot;split-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;#split-hero-demo&quot;,&quot;actionHref&quot;:&quot;#split-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;]}]" 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="trust" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>trust 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></div>
+            
+            <div class="demo-render"><SplitHero eyebrow="Balanced layout" title="Combine detailed content" highlight="with a strong visual panel" description="Use SplitHero for product explanations, department introductions, campaigns, and feature storytelling." primaryLabel="View public services" primaryHref="#services" primaryIcon="icon-[lucide--arrow-right]" secondaryLabel="Contact department" secondaryHref="#contact" secondaryIcon="icon-[lucide--phone]" visualPosition="right" reverse="false" ratio="balanced" align="start" size="default" variant="default" maxWidth="wide" fullBleed="true" visualTitle="Split Hero example" visualDescription="A polished default split hero for a modern application." visualItems='[{"id":"split-hero-0-1","key":"split-hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"split-hero-0-2","key":"split-hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' trustItems='[{"id":"split-hero-0-1","key":"split-hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"split-hero-0-2","key":"split-hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' class="showcase-instance showcase-instance--1"><div data-slot="visual">
+<div class="showcase-visual-panel">
+  <span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
+  <strong>Composable visual panel</strong>
+  <p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
+</div></div></SplitHero></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Balanced content and 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;SplitHero
-  title="Split Hero example"
-  description="A polished default split hero for a modern application."
-  primaryLabel="Split Hero"
-  primaryHref="#split-hero-demo"
-  secondaryLabel="Split Hero"
-  secondaryHref="#split-hero-demo"
+  eyebrow="Balanced layout"
+  title="Combine detailed content"
+  highlight="with a strong visual panel"
+  description="Use SplitHero for product explanations, department introductions, campaigns, and feature storytelling."
+  primaryLabel="View public services"
+  primaryHref="#services"
+  primaryIcon="icon-[lucide--arrow-right]"
+  secondaryLabel="Contact department"
+  secondaryHref="#contact"
+  secondaryIcon="icon-[lucide--phone]"
+  align="start"
+  maxWidth="wide"
+  visualTitle="Split Hero example"
+  visualDescription="A polished default split hero for a modern application."
+  visualItems='[
+    &#123;
+      "id": "split-hero-0-1",
+      "key": "split-hero-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#split-hero-demo",
+      "actionHref": "#split-hero-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        &#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": "split-hero-0-2",
+      "key": "split-hero-0-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "Another configurable message.",
+      "href": "#split-hero-demo",
+      "actionHref": "#split-hero-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": false,
+      "selected": false,
+      "checked": false,
+      "disabled": false,
+      "outgoing": true,
+      "open": true,
+      "number": 2,
+      "count": 32,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 2",
+      "items": [
+        &#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;
+  ]'
   trustItems='[
     &#123;
       "id": "split-hero-0-1",
@@ -407,32 +774,165 @@ page SplitHeroDetail {
       ]
     &#125;
   ]'&gt;
-  &lt;!-- Add actions, trust, default, visual slot content here --&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;/SplitHero&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>Visual-first introduction</h2><p>Reverse the layout when the screenshot, map, or media needs first visual priority.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="split-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="SplitHero" title="Compact Split Hero" description="A compact configuration for dashboards and dense product surfaces." primaryLabel="Compact example" primaryHref="#split-hero-demo" secondaryLabel="Compact example" secondaryHref="#split-hero-demo" reverse="false" size="sm" variant="secondary" trustItems="[{&quot;id&quot;:&quot;split-hero-1-1&quot;,&quot;key&quot;:&quot;split-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;#split-hero-demo&quot;,&quot;actionHref&quot;:&quot;#split-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;split-hero-1-2&quot;,&quot;key&quot;:&quot;split-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;#split-hero-demo&quot;,&quot;actionHref&quot;:&quot;#split-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;]}]" 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="trust" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>trust 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></div>
+            
+            <div class="demo-render"><SplitHero eyebrow="Visual first" title="Show the interface before the explanation" description="Place the visual on the left and use a compact content column." primaryLabel="Compact example" primaryHref="#split-hero-demo" secondaryLabel="Compact example" secondaryHref="#split-hero-demo" visualPosition="left" reverse="true" ratio="visual" align="center" size="sm" variant="soft" fullBleed="true" visualTitle="Compact Split Hero" visualDescription="A compact configuration for dashboards and dense product surfaces." visualItems='[{"id":"split-hero-1-1","key":"split-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":"#split-hero-demo","actionHref":"#split-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":"split-hero-1-2","key":"split-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":"#split-hero-demo","actionHref":"#split-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":"split-hero-1-1","key":"split-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":"#split-hero-demo","actionHref":"#split-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":"split-hero-1-2","key":"split-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":"#split-hero-demo","actionHref":"#split-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"]}]' class="showcase-instance showcase-instance--2"><div data-slot="visual">
+<div class="showcase-visual-panel">
+  <span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
+  <strong>Composable visual panel</strong>
+  <p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
+</div></div></SplitHero></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Visual-first introduction usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;SplitHero
-  title="Compact Split Hero"
-  description="A compact configuration for dashboards and dense product surfaces."
+  eyebrow="Visual first"
+  title="Show the interface before the explanation"
+  description="Place the visual on the left and use a compact content column."
   primaryLabel="Compact example"
   primaryHref="#split-hero-demo"
   secondaryLabel="Compact example"
   secondaryHref="#split-hero-demo"
+  visualPosition="left"
+  reverse="true"
+  ratio="visual"
+  align="center"
   size="sm"
-  variant="secondary"
+  variant="soft"
+  visualTitle="Compact Split Hero"
+  visualDescription="A compact configuration for dashboards and dense product surfaces."
+  visualItems='[
+    &#123;
+      "id": "split-hero-1-1",
+      "key": "split-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": "#split-hero-demo",
+      "actionHref": "#split-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": "split-hero-1-2",
+      "key": "split-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": "#split-hero-demo",
+      "actionHref": "#split-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;
+  ]'
   trustItems='[
     &#123;
       "id": "split-hero-1-1",
@@ -541,32 +1041,67 @@ page SplitHeroDetail {
       ]
     &#125;
   ]'&gt;
-  &lt;!-- Add actions, trust, default, visual slot content here --&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;/SplitHero&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>Structured service overview</h2><p>Use structured visual items for capabilities, facts, or proof points.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="split-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="SplitHero" title="Advanced Split Hero" description="A richer configuration demonstrating additional content and hierarchy." primaryLabel="Advanced example" primaryHref="#split-hero-demo" secondaryLabel="Advanced example" secondaryHref="#split-hero-demo" reverse="false" size="lg" variant="success" trustItems="[{&quot;id&quot;:&quot;split-hero-2-1&quot;,&quot;key&quot;:&quot;split-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;#split-hero-demo&quot;,&quot;actionHref&quot;:&quot;#split-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;split-hero-2-2&quot;,&quot;key&quot;:&quot;split-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;#split-hero-demo&quot;,&quot;actionHref&quot;:&quot;#split-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;]}]" 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="trust" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>trust 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></div>
+            
+            <div class="demo-render"><SplitHero eyebrow="Department overview" title="One service, clearly explained" description="Pair narrative content with structured supporting information." primaryLabel="Advanced example" primaryHref="#split-hero-demo" secondaryLabel="Advanced example" secondaryHref="#split-hero-demo" reverse="false" ratio="content" align="end" size="lg" variant="gradient" fullBleed="true" visualTitle="Service highlights" visualDescription="A consistent, responsive supporting panel." visualItems='[{"label":"Online access","value":"24/7","icon":"icon-[lucide--globe-2]"},{"label":"Response tracking","value":"Live","icon":"icon-[lucide--activity]"},{"label":"Languages","value":"3","icon":"icon-[lucide--languages]"}]' trustItems='[{"id":"split-hero-2-1","key":"split-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":"#split-hero-demo","actionHref":"#split-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":"split-hero-2-2","key":"split-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":"#split-hero-demo","actionHref":"#split-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"]}]' class="showcase-instance showcase-instance--3" /></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Structured service overview usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;SplitHero
-  title="Advanced Split Hero"
-  description="A richer configuration demonstrating additional content and hierarchy."
+  eyebrow="Department overview"
+  title="One service, clearly explained"
+  description="Pair narrative content with structured supporting information."
   primaryLabel="Advanced example"
   primaryHref="#split-hero-demo"
   secondaryLabel="Advanced example"
   secondaryHref="#split-hero-demo"
+  ratio="content"
+  align="end"
   size="lg"
-  variant="success"
+  variant="gradient"
+  visualTitle="Service highlights"
+  visualDescription="A consistent, responsive supporting panel."
+  visualItems='[
+    &#123;
+      "label": "Online access",
+      "value": "24/7",
+      "icon": "icon-[lucide--globe-2]"
+    &#125;,
+    &#123;
+      "label": "Response tracking",
+      "value": "Live",
+      "icon": "icon-[lucide--activity]"
+    &#125;,
+    &#123;
+      "label": "Languages",
+      "value": "3",
+      "icon": "icon-[lucide--languages]"
+    &#125;
+  ]'
   trustItems='[
     &#123;
       "id": "split-hero-2-1",
@@ -675,21 +1210,29 @@ page SplitHeroDetail {
       ]
     &#125;
   ]'&gt;
-  &lt;!-- Add actions, trust, default, visual slot content here --&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;/SplitHero&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>"A better digital experience"</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>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>visualPosition</code></td><td>string</td><td><code>"right"</code></td><td>No</td></tr><tr><td><code>reverse</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>ratio</code></td><td>string</td><td><code>"balanced"</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>trustItems</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
+        
+        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>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>"icon-[lucide--sparkles]"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"A better digital experience"</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>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>visualPosition</code></td><td>string</td><td><code>"right"</code></td><td>No</td></tr><tr><td><code>reverse</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>ratio</code></td><td>string</td><td><code>"balanced"</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>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>true</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>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>visualItems</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>visualStyle</code></td><td>string</td><td><code>"panel"</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>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="#split-hero-demo-1">Production default</a><a href="#split-hero-demo-2">Compact application</a><a href="#split-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="#split-hero-demo-1">Balanced content and visual</a><a href="#split-hero-demo-2">Visual-first introduction</a><a href="#split-hero-demo-3">Structured service overview</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/portal-dashboard"><small>Previous</small><strong>← Portal Dashboard</strong></a>
-      <a href="/components/stats-bar"><small>Next</small><strong>Stats Bar →</strong></a>
+      <a href="/components/page-header"><small>Previous</small><strong>← Page Header</strong></a>
+      <a href="/components/text-link"><small>Next</small><strong>Text Link →</strong></a>
     </nav>
   }
 }
diff --git a/examples/component-showcase/app/pages/components/stats-bar.wrn b/examples/component-showcase/app/pages/components/stats-bar.wrn
index 5b4af5d3..93b933f2 100644
--- a/examples/component-showcase/app/pages/components/stats-bar.wrn
+++ b/examples/component-showcase/app/pages/components/stats-bar.wrn
@@ -1,11 +1,11 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page StatsBarDetail {
   layout = "showcase"
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"stats-bar-0-1\",\n    \"key\": \"stats-bar-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\": \"#stats-bar-demo\",\n    \"actionHref\": \"#stats-bar-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\": \"stats-bar-0-2\",\n    \"key\": \"stats-bar-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\": \"#stats-bar-demo\",\n    \"actionHref\": \"#stats-bar-demo\",\n    \"actionLabel\": \"View details\",\n    \"icon\": \"icon-[lucide--sparkles]\",\n    \"iconClass\": \"icon-[lucide--sparkles]\",\n    \"variant\": \"primary\",\n    \"status\": \"Active\",\n    \"time\": \"09:30\",\n    \"current\": false,\n    \"selected\": false,\n    \"checked\": false,\n    \"disabled\": false,\n    \"outgoing\": true,\n    \"open\": true,\n    \"number\": 2,\n    \"count\": 32,\n    \"percentage\": 72,\n    \"color\": \"#7c3aed\",\n    \"target\": \"_self\",\n    \"ariaLabel\": \"Open primary workflow 2\",\n    \"items\": [\n      {\n        \"label\": \"Nested option A\",\n        \"value\": \"nested-a\"\n      },\n      {\n        \"label\": \"Nested option B\",\n        \"value\": \"nested-b\"\n      }\n    ],\n    \"links\": [\n      {\n        \"label\": \"Documentation\",\n        \"href\": \"#documentation\"\n      },\n      {\n        \"label\": \"API reference\",\n        \"href\": \"#api-reference\"\n      }\n    ],\n    \"values\": [\n      \"Included\",\n      \"Standard\"\n    ]\n  }\n]"
-  state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "4"
-  state playground_compact = ctx.url.searchParams.get("pg_compact") ?? "false"
-  state playground_dividers = ctx.url.searchParams.get("pg_dividers") ?? "true"
-  state playground_icons = ctx.url.searchParams.get("pg_icons") ?? "true"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"label\":\"Composite components\",\"value\":\"18\",\"description\":\"Reusable public-page building blocks\",\"icon\":\"icon-[lucide--blocks]\",\"color\":\"primary\"},{\"label\":\"Rendering\",\"value\":\"SSR\",\"description\":\"Server-first WRNexusJS rendering\",\"icon\":\"icon-[lucide--server]\",\"color\":\"info\"},{\"label\":\"Responsive\",\"value\":\"Yes\",\"description\":\"Mobile, tablet, and desktop layouts\",\"icon\":\"icon-[lucide--monitor-smartphone]\",\"color\":\"success\"},{\"label\":\"Theme aware\",\"value\":\"Yes\",\"description\":\"Active theme and accent palettes\",\"icon\":\"icon-[lucide--palette]\",\"color\":\"warning\"}]")
+  state playground_columns = Number(ctx.url.searchParams.get("pg_columns") ?? "4")
+  state playground_compact = (ctx.url.searchParams.get("pg_compact") ?? "false") === "true"
+  state playground_dividers = (ctx.url.searchParams.get("pg_dividers") ?? "true") === "true"
+  state playground_icons = (ctx.url.searchParams.get("pg_icons") ?? "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") ?? "raised"
@@ -13,27 +13,27 @@ page StatsBarDetail {
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Stats Bar"
-    description = "Compact responsive statistics strip."
+    description = "Present a compact responsive strip of key facts, counts, performance indicators, or trust signals."
   }
   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>Stats Bar</span>
+      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/data">Data</a><span aria-hidden="true">/</span><span>Stats Bar</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>Stats Bar</h1>
-        <p>Compact responsive statistics strip.</p>
+        <p>Present a compact responsive strip of key facts, counts, performance indicators, or trust signals.</p>
         <div class="detail-badges"><span>10 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="StatsBar" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="StatsBar" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Stats 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="StatsBar" items="{playground_items}" columns="{playground_columns}" compact="{playground_compact}" dividers="{playground_dividers}" icons="{playground_icons}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" maxWidth="{playground_maxWidth}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><StatsBar items='{playground_items}' columns='{playground_columns}' compact='{playground_compact}' dividers='{playground_dividers}' icons='{playground_icons}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' 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;StatsBar
@@ -149,117 +149,40 @@ page StatsBarDetail {
 /&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-stats-bar-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-stats-bar-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
-    "id": "stats-bar-0-1",
-    "key": "stats-bar-0-1",
-    "value": "primary",
-    "label": "Primary workflow",
-    "title": "Primary workflow",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "A configurable sample message.",
-    "href": "#stats-bar-demo",
-    "actionHref": "#stats-bar-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": true,
-    "selected": true,
-    "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": "Composite components",
+    "value": "18",
+    "description": "Reusable public-page building blocks",
+    "icon": "icon-[lucide--blocks]",
+    "color": "primary"
   },
   {
-    "id": "stats-bar-0-2",
-    "key": "stats-bar-0-2",
-    "value": "secondary",
-    "label": "Additional option",
-    "title": "Supporting example",
-    "description": "A clean default configuration for everyday product interfaces.",
-    "text": "Another configurable message.",
-    "href": "#stats-bar-demo",
-    "actionHref": "#stats-bar-demo",
-    "actionLabel": "View details",
-    "icon": "icon-[lucide--sparkles]",
-    "iconClass": "icon-[lucide--sparkles]",
-    "variant": "primary",
-    "status": "Active",
-    "time": "09:30",
-    "current": false,
-    "selected": false,
-    "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"
-    ]
+    "label": "Rendering",
+    "value": "SSR",
+    "description": "Server-first WRNexusJS rendering",
+    "icon": "icon-[lucide--server]",
+    "color": "info"
+  },
+  {
+    "label": "Responsive",
+    "value": "Yes",
+    "description": "Mobile, tablet, and desktop layouts",
+    "icon": "icon-[lucide--monitor-smartphone]",
+    "color": "success"
+  },
+  {
+    "label": "Theme aware",
+    "value": "Yes",
+    "description": "Active theme and accent palettes",
+    "icon": "icon-[lucide--palette]",
+    "color": "warning"
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-stats-bar-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-stats-bar-columns" name="pg_columns" type="number" value="4" /></label><label class="playground-toggle" for="playground-stats-bar-compact"><span><strong>compact</strong><small>boolean</small></span><input id="playground-stats-bar-compact" name="pg_compact" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-stats-bar-dividers"><span><strong>dividers</strong><small>boolean</small></span><input id="playground-stats-bar-dividers" name="pg_dividers" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-stats-bar-icons"><span><strong>icons</strong><small>boolean</small></span><input id="playground-stats-bar-icons" name="pg_icons" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-stats-bar-size"><span><strong>size</strong><small>string</small></span><select id="playground-stats-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-stats-bar-color"><span><strong>color</strong><small>string</small></span><select id="playground-stats-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-stats-bar-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-stats-bar-variant" name="pg_variant"><option value="raised" selected>raised</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-stats-bar-maxWidth"><span><strong>max Width</strong><small>string</small></span><input id="playground-stats-bar-maxWidth" name="pg_maxWidth" type="text" value="xl" /></label><label class="playground-field" for="playground-stats-bar-class"><span><strong>class</strong><small>string</small></span><input id="playground-stats-bar-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-stats-bar-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-stats-bar-columns" name="pg_columns" type="number" value="4" /></label><label class="playground-toggle" for="playground-stats-bar-compact"><span><strong>compact</strong><small>boolean</small></span><input id="playground-stats-bar-compact" name="pg_compact" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-stats-bar-dividers"><span><strong>dividers</strong><small>boolean</small></span><input id="playground-stats-bar-dividers" name="pg_dividers" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-stats-bar-icons"><span><strong>icons</strong><small>boolean</small></span><input id="playground-stats-bar-icons" name="pg_icons" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-stats-bar-size"><span><strong>size</strong><small>string</small></span><select id="playground-stats-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-stats-bar-color"><span><strong>color</strong><small>string</small></span><select id="playground-stats-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-stats-bar-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-stats-bar-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><option value="minimal">minimal</option><option value="solid">solid</option></select></label><label class="playground-field" for="playground-stats-bar-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-stats-bar-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-stats-bar-class"><span><strong>class</strong><small>string</small></span><input id="playground-stats-bar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -268,394 +191,160 @@ page StatsBarDetail {
         <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>Public proof strip</h2><p>Present key facts and trust signals in one compact responsive row.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="stats-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="StatsBar" items="[{&quot;id&quot;:&quot;stats-bar-0-1&quot;,&quot;key&quot;:&quot;stats-bar-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;#stats-bar-demo&quot;,&quot;actionHref&quot;:&quot;#stats-bar-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;stats-bar-0-2&quot;,&quot;key&quot;:&quot;stats-bar-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;#stats-bar-demo&quot;,&quot;actionHref&quot;:&quot;#stats-bar-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" compact="false" dividers="true" icons="true" size="default" variant="raised" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><StatsBar items='[{"label":"Composite components","value":"18","description":"Reusable public-page building blocks","icon":"icon-[lucide--blocks]","color":"primary"},{"label":"Rendering","value":"SSR","description":"Server-first WRNexusJS rendering","icon":"icon-[lucide--server]","color":"info"},{"label":"Responsive","value":"Yes","description":"Mobile, tablet, and desktop layouts","icon":"icon-[lucide--monitor-smartphone]","color":"success"},{"label":"Theme aware","value":"Yes","description":"Active theme and accent palettes","icon":"icon-[lucide--palette]","color":"warning"}]' columns="4" compact="true" dividers="true" icons="true" size="default" variant="raised" maxWidth="xl" class="showcase-instance showcase-instance--1" /></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Public proof 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;StatsBar
   items='[
     &#123;
-      "id": "stats-bar-0-1",
-      "key": "stats-bar-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#stats-bar-demo",
-      "actionHref": "#stats-bar-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "Composite components",
+      "value": "18",
+      "description": "Reusable public-page building blocks",
+      "icon": "icon-[lucide--blocks]",
+      "color": "primary"
     &#125;,
     &#123;
-      "id": "stats-bar-0-2",
-      "key": "stats-bar-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#stats-bar-demo",
-      "actionHref": "#stats-bar-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "Rendering",
+      "value": "SSR",
+      "description": "Server-first WRNexusJS rendering",
+      "icon": "icon-[lucide--server]",
+      "color": "info"
+    &#125;,
+    &#123;
+      "label": "Responsive",
+      "value": "Yes",
+      "description": "Mobile, tablet, and desktop layouts",
+      "icon": "icon-[lucide--monitor-smartphone]",
+      "color": "success"
+    &#125;,
+    &#123;
+      "label": "Theme aware",
+      "value": "Yes",
+      "description": "Active theme and accent palettes",
+      "icon": "icon-[lucide--palette]",
+      "color": "warning"
     &#125;
   ]'
-  compact="false"
 /&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-stat compact bar</h2><p>Use fewer facts with tighter spacing below a hero or page header.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="stats-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="StatsBar" items="[{&quot;id&quot;:&quot;stats-bar-1-1&quot;,&quot;key&quot;:&quot;stats-bar-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;#stats-bar-demo&quot;,&quot;actionHref&quot;:&quot;#stats-bar-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;stats-bar-1-2&quot;,&quot;key&quot;:&quot;stats-bar-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;#stats-bar-demo&quot;,&quot;actionHref&quot;:&quot;#stats-bar-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" compact="true" dividers="true" icons="true" size="sm" variant="secondary" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><StatsBar items='[{"label":"Composite components","value":"18","description":"Reusable public-page building blocks","icon":"icon-[lucide--blocks]","color":"primary"},{"label":"Rendering","value":"SSR","description":"Server-first WRNexusJS rendering","icon":"icon-[lucide--server]","color":"info"},{"label":"Responsive","value":"Yes","description":"Mobile, tablet, and desktop layouts","icon":"icon-[lucide--monitor-smartphone]","color":"success"}]' columns="3" compact="true" dividers="true" icons="false" size="sm" variant="soft" 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="Three-stat compact 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;StatsBar
   items='[
     &#123;
-      "id": "stats-bar-1-1",
-      "key": "stats-bar-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": "#stats-bar-demo",
-      "actionHref": "#stats-bar-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"
-      ]
+      "label": "Composite components",
+      "value": "18",
+      "description": "Reusable public-page building blocks",
+      "icon": "icon-[lucide--blocks]",
+      "color": "primary"
     &#125;,
     &#123;
-      "id": "stats-bar-1-2",
-      "key": "stats-bar-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#stats-bar-demo",
-      "actionHref": "#stats-bar-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "Rendering",
+      "value": "SSR",
+      "description": "Server-first WRNexusJS rendering",
+      "icon": "icon-[lucide--server]",
+      "color": "info"
+    &#125;,
+    &#123;
+      "label": "Responsive",
+      "value": "Yes",
+      "description": "Mobile, tablet, and desktop layouts",
+      "icon": "icon-[lucide--monitor-smartphone]",
+      "color": "success"
     &#125;
   ]'
+  columns="3"
+  icons="false"
   size="sm"
-  variant="secondary"
+  variant="soft"
+  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>Full-width solid statistics</h2><p>Use a high-contrast statistics bar as a major landing-page transition.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="stats-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="StatsBar" items="[{&quot;id&quot;:&quot;stats-bar-2-1&quot;,&quot;key&quot;:&quot;stats-bar-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;#stats-bar-demo&quot;,&quot;actionHref&quot;:&quot;#stats-bar-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;stats-bar-2-2&quot;,&quot;key&quot;:&quot;stats-bar-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;#stats-bar-demo&quot;,&quot;actionHref&quot;:&quot;#stats-bar-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" compact="false" dividers="true" icons="true" size="lg" variant="success" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><StatsBar items='[{"label":"Composite components","value":"18","description":"Reusable public-page building blocks","icon":"icon-[lucide--blocks]","color":"primary"},{"label":"Rendering","value":"SSR","description":"Server-first WRNexusJS rendering","icon":"icon-[lucide--server]","color":"info"},{"label":"Responsive","value":"Yes","description":"Mobile, tablet, and desktop layouts","icon":"icon-[lucide--monitor-smartphone]","color":"success"},{"label":"Theme aware","value":"Yes","description":"Active theme and accent palettes","icon":"icon-[lucide--palette]","color":"warning"}]' columns="4" compact="false" dividers="false" icons="true" size="lg" color="primary" variant="solid" maxWidth="full" 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 solid statistics usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;StatsBar
   items='[
     &#123;
-      "id": "stats-bar-2-1",
-      "key": "stats-bar-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": "#stats-bar-demo",
-      "actionHref": "#stats-bar-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"
-      ]
+      "label": "Composite components",
+      "value": "18",
+      "description": "Reusable public-page building blocks",
+      "icon": "icon-[lucide--blocks]",
+      "color": "primary"
     &#125;,
     &#123;
-      "id": "stats-bar-2-2",
-      "key": "stats-bar-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": "#stats-bar-demo",
-      "actionHref": "#stats-bar-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
+      "label": "Rendering",
+      "value": "SSR",
+      "description": "Server-first WRNexusJS rendering",
+      "icon": "icon-[lucide--server]",
+      "color": "info"
+    &#125;,
+    &#123;
+      "label": "Responsive",
+      "value": "Yes",
+      "description": "Mobile, tablet, and desktop layouts",
+      "icon": "icon-[lucide--monitor-smartphone]",
+      "color": "success"
+    &#125;,
+    &#123;
+      "label": "Theme aware",
+      "value": "Yes",
+      "description": "Active theme and accent palettes",
+      "icon": "icon-[lucide--palette]",
+      "color": "warning"
     &#125;
   ]'
   compact="false"
+  dividers="false"
   size="lg"
-  variant="success"
+  variant="solid"
+  maxWidth="full"
 /&gt;</code></pre>
           </section>
         </div>
       </article></div></section>
-        <section id="events" class="detail-section"><div class="detail-section-heading"><span>Component events</span><h2>Events</h2><p>Public events declared by this component. Custom events bubble from the component root and expose state through <code>event.detail</code>.</p></div><div class=""><div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div></div></section>
+        
         <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>items</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>number</td><td><code>4</code></td><td>No</td></tr><tr><td><code>compact</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>true</code></td><td>No</td></tr><tr><td><code>icons</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"raised"</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="#stats-bar-demo-1">Production default</a><a href="#stats-bar-demo-2">Compact application</a><a href="#stats-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="#stats-bar-demo-1">Public proof strip</a><a href="#stats-bar-demo-2">Three-stat compact bar</a><a href="#stats-bar-demo-3">Full-width solid statistics</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/split-hero"><small>Previous</small><strong>← Split Hero</strong></a>
+      <a href="/components/metric-grid"><small>Previous</small><strong>← Metric Grid</strong></a>
       <span></span>
     </nav>
   }
diff --git a/examples/component-showcase/app/pages/components/stepper.wrn b/examples/component-showcase/app/pages/components/stepper.wrn
index ba5a3769..de8c01cb 100644
--- a/examples/component-showcase/app/pages/components/stepper.wrn
+++ b/examples/component-showcase/app/pages/components/stepper.wrn
@@ -4,7 +4,7 @@ page StepperDetail {
   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") ?? "Stepper"
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"stepper-0-1\",\n    \"key\": \"stepper-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\": \"#stepper-demo\",\n    \"actionHref\": \"#stepper-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\": \"stepper-0-2\",\n    \"key\": \"stepper-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\": \"#stepper-demo\",\n    \"actionHref\": \"#stepper-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\":\"stepper-0-1\",\"key\":\"stepper-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#stepper-demo\",\"actionHref\":\"#stepper-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"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\":\"stepper-0-2\",\"key\":\"stepper-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#stepper-demo\",\"actionHref\":\"#stepper-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"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 StepperDetail {
       </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="Stepper" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Stepper" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="change,previous,next,complete">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Stepper</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="Stepper" 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><Stepper 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;Stepper
@@ -145,6 +145,7 @@ page StepperDetail {
 /&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 StepperDetail {
         <div class="demo-workbench">
           <div id="stepper-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="Stepper" size="default" label="Stepper" items="[{&quot;id&quot;:&quot;stepper-0-1&quot;,&quot;key&quot;:&quot;stepper-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;#stepper-demo&quot;,&quot;actionHref&quot;:&quot;#stepper-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;stepper-0-2&quot;,&quot;key&quot;:&quot;stepper-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;#stepper-demo&quot;,&quot;actionHref&quot;:&quot;#stepper-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"><Stepper size="default" label="Stepper" items='[{"id":"stepper-0-1","key":"stepper-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#stepper-demo","actionHref":"#stepper-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"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":"stepper-0-2","key":"stepper-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#stepper-demo","actionHref":"#stepper-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"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 StepperDetail {
         <div class="demo-workbench">
           <div id="stepper-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="Stepper" size="sm" label="Compact example" items="[{&quot;id&quot;:&quot;stepper-1-1&quot;,&quot;key&quot;:&quot;stepper-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;#stepper-demo&quot;,&quot;actionHref&quot;:&quot;#stepper-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;stepper-1-2&quot;,&quot;key&quot;:&quot;stepper-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;#stepper-demo&quot;,&quot;actionHref&quot;:&quot;#stepper-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"><Stepper size="sm" label="Compact example" items='[{"id":"stepper-1-1","key":"stepper-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":"#stepper-demo","actionHref":"#stepper-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":"stepper-1-2","key":"stepper-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#stepper-demo","actionHref":"#stepper-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 StepperDetail {
         <div class="demo-workbench">
           <div id="stepper-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="Stepper" size="lg" label="Advanced example" items="[{&quot;id&quot;:&quot;stepper-2-1&quot;,&quot;key&quot;:&quot;stepper-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;#stepper-demo&quot;,&quot;actionHref&quot;:&quot;#stepper-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;stepper-2-2&quot;,&quot;key&quot;:&quot;stepper-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;#stepper-demo&quot;,&quot;actionHref&quot;:&quot;#stepper-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"><Stepper size="lg" label="Advanced example" items='[{"id":"stepper-2-1","key":"stepper-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":"#stepper-demo","actionHref":"#stepper-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":"stepper-2-2","key":"stepper-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":"#stepper-demo","actionHref":"#stepper-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,28 @@ page StepperDetail {
           </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><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>@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><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;Stepper
+  @change='console.log(event.detail)'
+  @previous='console.log(event.detail)'
+  @next='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=\"Stepper\"], [data-component=\"Stepper\"]")
 
-component.addEventListener('change', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("previous", (event) =&gt; &#123;
+  console.log("previous", event.detail)
+&#125;)
+
+component?.addEventListener("next", (event) =&gt; &#123;
+  console.log("next", event.detail)
+&#125;)
+
+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>"Stepper"</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">
diff --git a/examples/component-showcase/app/pages/components/strong-password.wrn b/examples/component-showcase/app/pages/components/strong-password.wrn
index 1dd7d324..8cda0841 100644
--- a/examples/component-showcase/app/pages/components/strong-password.wrn
+++ b/examples/component-showcase/app/pages/components/strong-password.wrn
@@ -8,13 +8,13 @@ page StrongPasswordDetail {
   state playground_value = ctx.url.searchParams.get("pg_value") ?? "Northstar!2026"
   state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Create a strong password"
   state playground_autocomplete = ctx.url.searchParams.get("pg_autocomplete") ?? "new-password"
-  state playground_minLength = ctx.url.searchParams.get("pg_minLength") ?? "8"
+  state playground_minLength = Number(ctx.url.searchParams.get("pg_minLength") ?? "8")
   state playground_specialCharactersSet = ctx.url.searchParams.get("pg_specialCharactersSet") ?? "!@#$%^&*()_+-=[]{}|;:,.<>?"
-  state playground_requireLowercase = ctx.url.searchParams.get("pg_requireLowercase") ?? "true"
-  state playground_requireUppercase = ctx.url.searchParams.get("pg_requireUppercase") ?? "true"
-  state playground_requireNumber = ctx.url.searchParams.get("pg_requireNumber") ?? "true"
-  state playground_requireSpecialCharacter = ctx.url.searchParams.get("pg_requireSpecialCharacter") ?? "true"
-  state playground_showRequirements = ctx.url.searchParams.get("pg_showRequirements") ?? "false"
+  state playground_requireLowercase = (ctx.url.searchParams.get("pg_requireLowercase") ?? "true") === "true"
+  state playground_requireUppercase = (ctx.url.searchParams.get("pg_requireUppercase") ?? "true") === "true"
+  state playground_requireNumber = (ctx.url.searchParams.get("pg_requireNumber") ?? "true") === "true"
+  state playground_requireSpecialCharacter = (ctx.url.searchParams.get("pg_requireSpecialCharacter") ?? "true") === "true"
+  state playground_showRequirements = (ctx.url.searchParams.get("pg_showRequirements") ?? "false") === "true"
   state playground_presentation = ctx.url.searchParams.get("pg_presentation") ?? "inline"
   state playground_hintText = ctx.url.searchParams.get("pg_hintText") ?? ""
   state playground_emptyLabel = ctx.url.searchParams.get("pg_emptyLabel") ?? "Enter a password"
@@ -22,10 +22,10 @@ page StrongPasswordDetail {
   state playground_fairLabel = ctx.url.searchParams.get("pg_fairLabel") ?? "Fair"
   state playground_goodLabel = ctx.url.searchParams.get("pg_goodLabel") ?? "Good"
   state playground_strongLabel = ctx.url.searchParams.get("pg_strongLabel") ?? "Strong"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
-  state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
-  state playground_invalid = ctx.url.searchParams.get("pg_invalid") ?? "false"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
+  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
+  state playground_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 {
@@ -45,12 +45,12 @@ page StrongPasswordDetail {
       </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="StrongPassword" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="StrongPassword" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="input,change,strength">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Strong Password</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="StrongPassword" size="{playground_size}" color="{playground_color}" label="{playground_label}" name="{playground_name}" value="{playground_value}" placeholder="{playground_placeholder}" autocomplete="{playground_autocomplete}" minLength="{playground_minLength}" specialCharactersSet="{playground_specialCharactersSet}" requireLowercase="{playground_requireLowercase}" requireUppercase="{playground_requireUppercase}" requireNumber="{playground_requireNumber}" requireSpecialCharacter="{playground_requireSpecialCharacter}" showRequirements="{playground_showRequirements}" presentation="{playground_presentation}" hintText="{playground_hintText}" emptyLabel="{playground_emptyLabel}" weakLabel="{playground_weakLabel}" fairLabel="{playground_fairLabel}" goodLabel="{playground_goodLabel}" strongLabel="{playground_strongLabel}" disabled="{playground_disabled}" readonly="{playground_readonly}" required="{playground_required}" invalid="{playground_invalid}" validationMessage="{playground_validationMessage}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><StrongPassword size='{playground_size}' color='{playground_color}' label='{playground_label}' name='{playground_name}' value='{playground_value}' placeholder='{playground_placeholder}' autocomplete='{playground_autocomplete}' minLength='{playground_minLength}' specialCharactersSet='{playground_specialCharactersSet}' requireLowercase='{playground_requireLowercase}' requireUppercase='{playground_requireUppercase}' requireNumber='{playground_requireNumber}' requireSpecialCharacter='{playground_requireSpecialCharacter}' showRequirements='{playground_showRequirements}' presentation='{playground_presentation}' hintText='{playground_hintText}' emptyLabel='{playground_emptyLabel}' weakLabel='{playground_weakLabel}' fairLabel='{playground_fairLabel}' goodLabel='{playground_goodLabel}' strongLabel='{playground_strongLabel}' disabled='{playground_disabled}' readonly='{playground_readonly}' required='{playground_required}' 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;StrongPassword
@@ -61,6 +61,7 @@ page StrongPasswordDetail {
 /&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>27 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -79,7 +80,8 @@ page StrongPasswordDetail {
         <div class="demo-workbench">
           <div id="strong-password-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="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="demo-render"><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>
           <section class="demo-code" aria-label="Live strength meter usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -100,7 +102,8 @@ page StrongPasswordDetail {
         <div class="demo-workbench">
           <div id="strong-password-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="StrongPassword" label="Requirements and hint text" name="strong-password-2" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&amp;*()_+-=[]{}|;:,.&lt;&gt;?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="true" presentation="inline" hintText="Use a unique password you do not use for another account." disabled="false" readonly="false" required="false" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><StrongPassword label="Requirements and hint text" name="strong-password-2" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&amp;*()_+-=[]{}|;:,.&lt;&gt;?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="true" presentation="inline" hintText="Use a unique password you do not use for another account." disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Requirements and hint text 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 StrongPasswordDetail {
         <div class="demo-workbench">
           <div id="strong-password-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="StrongPassword" label="Requirements in a popover" name="strong-password-3" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&amp;*()_+-=[]{}|;:,.&lt;&gt;?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="true" presentation="popover" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><StrongPassword label="Requirements in a popover" name="strong-password-3" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&amp;*()_+-=[]{}|;:,.&lt;&gt;?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="true" presentation="popover" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Requirements in a popover usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -140,7 +144,8 @@ page StrongPasswordDetail {
         <div class="demo-workbench">
           <div id="strong-password-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="StrongPassword" label="Custom special characters" name="strong-password-4" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="@#_-." requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="true" presentation="inline" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><StrongPassword label="Custom special characters" name="strong-password-4" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="@#_-." requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="true" presentation="inline" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Custom special characters usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -160,7 +165,8 @@ page StrongPasswordDetail {
         <div class="demo-workbench">
           <div id="strong-password-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="StrongPassword" label="Optional requirements" name="strong-password-5" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&amp;*()_+-=[]{}|;:,.&lt;&gt;?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="false" showRequirements="true" presentation="inline" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><StrongPassword label="Optional requirements" name="strong-password-5" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&amp;*()_+-=[]{}|;:,.&lt;&gt;?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="false" showRequirements="true" presentation="inline" hintText="" disabled="false" readonly="false" required="false" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Optional requirements usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -180,7 +186,8 @@ page StrongPasswordDetail {
         <div class="demo-workbench">
           <div id="strong-password-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="StrongPassword" label="Disabled password strength" name="strong-password-6" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&amp;*()_+-=[]{}|;:,.&lt;&gt;?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="true" presentation="inline" hintText="" disabled="true" readonly="false" required="false" invalid="false" validationMessage=""></div></div>
+            
+            <div class="demo-render"><StrongPassword label="Disabled password strength" name="strong-password-6" value="" placeholder="Create a strong password" autocomplete="new-password" minLength="8" specialCharactersSet="!@#$%^&amp;*()_+-=[]{}|;:,.&lt;&gt;?" requireLowercase="true" requireUppercase="true" requireNumber="true" requireSpecialCharacter="true" showRequirements="true" presentation="inline" hintText="" disabled="true" readonly="false" required="false" invalid="false" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Disabled password strength usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -192,11 +199,23 @@ page StrongPasswordDetail {
           </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>@strength</code><span>Fires when the component emits the strength 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>@strength</code><span>Fires when the calculated password-strength state 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;StrongPassword
+  @input='console.log(event.detail)'
+  @change='console.log(event.detail)'
+  @strength='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=\"StrongPassword\"], [data-component=\"StrongPassword\"]")
 
-component.addEventListener('input', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("strength", (event) =&gt; &#123;
+  console.log("strength", 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>"Password"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>"password"</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>"Create a strong password"</code></td><td>No</td></tr><tr><td><code>autocomplete</code></td><td>string</td><td><code>"new-password"</code></td><td>No</td></tr><tr><td><code>minLength</code></td><td>number</td><td><code>8</code></td><td>No</td></tr><tr><td><code>specialCharactersSet</code></td><td>string</td><td><code>"!@#$%^&amp;*()_+-=[]&#123;&#125;|;:,.&lt;&gt;?"</code></td><td>No</td></tr><tr><td><code>requireLowercase</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>requireUppercase</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>requireNumber</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>requireSpecialCharacter</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>showRequirements</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>presentation</code></td><td>string</td><td><code>"inline"</code></td><td>No</td></tr><tr><td><code>hintText</code></td><td>string</td><td><code>"Use a unique password you do not use elsewhere."</code></td><td>No</td></tr><tr><td><code>emptyLabel</code></td><td>string</td><td><code>"Enter a password"</code></td><td>No</td></tr><tr><td><code>weakLabel</code></td><td>string</td><td><code>"Weak"</code></td><td>No</td></tr><tr><td><code>fairLabel</code></td><td>string</td><td><code>"Fair"</code></td><td>No</td></tr><tr><td><code>goodLabel</code></td><td>string</td><td><code>"Good"</code></td><td>No</td></tr><tr><td><code>strongLabel</code></td><td>string</td><td><code>"Strong"</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>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">
@@ -204,7 +223,7 @@ component.addEventListener('input', (event) =&gt; &#123;
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/search-box"><small>Previous</small><strong>← Search Box</strong></a>
+      <a href="/components/pin-input"><small>Previous</small><strong>← Pin Input</strong></a>
       <a href="/components/toggle-count"><small>Next</small><strong>Toggle Count →</strong></a>
     </nav>
   }
diff --git a/examples/component-showcase/app/pages/components/styled-icon.wrn b/examples/component-showcase/app/pages/components/styled-icon.wrn
index 1072ba9b..db43df07 100644
--- a/examples/component-showcase/app/pages/components/styled-icon.wrn
+++ b/examples/component-showcase/app/pages/components/styled-icon.wrn
@@ -5,7 +5,7 @@ page StyledIconDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Styled Icon example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default styled icon for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"styled-icon-0-1\",\n    \"key\": \"styled-icon-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\": \"#styled-icon-demo\",\n    \"actionHref\": \"#styled-icon-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\": \"styled-icon-0-2\",\n    \"key\": \"styled-icon-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\": \"#styled-icon-demo\",\n    \"actionHref\": \"#styled-icon-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\":\"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\"]}]")
   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 StyledIconDetail {
       </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="StyledIcon" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="StyledIcon" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Styled Icon</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="StyledIcon" 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><StyledIcon 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;StyledIcon
@@ -147,6 +147,7 @@ page StyledIconDetail {
 /&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>
@@ -257,7 +258,7 @@ page StyledIconDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-styled-icon-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-styled-icon-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-styled-icon-class"><span><strong>class</strong><small>string</small></span><input id="playground-styled-icon-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-styled-icon-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-styled-icon-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-styled-icon-class"><span><strong>class</strong><small>string</small></span><input id="playground-styled-icon-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page StyledIconDetail {
         <div class="demo-workbench">
           <div id="styled-icon-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="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="demo-render"><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>
           <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 StyledIconDetail {
         <div class="demo-workbench">
           <div id="styled-icon-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="StyledIcon" size="sm" title="Compact Styled Icon" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;styled-icon-1-1&quot;,&quot;key&quot;:&quot;styled-icon-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;#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--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;styled-icon-1-2&quot;,&quot;key&quot;:&quot;styled-icon-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;#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--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"><StyledIcon size="sm" title="Compact Styled Icon" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"styled-icon-1-1","key":"styled-icon-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":"#styled-icon-demo","actionHref":"#styled-icon-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":"styled-icon-1-2","key":"styled-icon-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#styled-icon-demo","actionHref":"#styled-icon-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 StyledIconDetail {
         <div class="demo-workbench">
           <div id="styled-icon-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="StyledIcon" size="lg" title="Advanced Styled Icon" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;styled-icon-2-1&quot;,&quot;key&quot;:&quot;styled-icon-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;#styled-icon-demo&quot;,&quot;actionHref&quot;:&quot;#styled-icon-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;styled-icon-2-2&quot;,&quot;key&quot;:&quot;styled-icon-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;#styled-icon-demo&quot;,&quot;actionHref&quot;:&quot;#styled-icon-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"><StyledIcon size="lg" title="Advanced Styled Icon" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"styled-icon-2-1","key":"styled-icon-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":"#styled-icon-demo","actionHref":"#styled-icon-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":"styled-icon-2-2","key":"styled-icon-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":"#styled-icon-demo","actionHref":"#styled-icon-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,11 @@ page StyledIconDetail {
           </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>"Styled Icon"</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="#styled-icon-demo-1">Production default</a><a href="#styled-icon-demo-2">Compact application</a><a href="#styled-icon-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="#styled-icon-demo-1">Production default</a><a href="#styled-icon-demo-2">Compact application</a><a href="#styled-icon-demo-3">Rich configuration</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/switch.wrn b/examples/component-showcase/app/pages/components/switch.wrn
index 308d593b..46673de1 100644
--- a/examples/component-showcase/app/pages/components/switch.wrn
+++ b/examples/component-showcase/app/pages/components/switch.wrn
@@ -3,24 +3,24 @@ page SwitchDetail {
   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") ?? "switch-1"
-  state playground_name = ctx.url.searchParams.get("pg_name") ?? "switchField"
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Email notifications"
-  state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
-  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter switch"
+  state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
+  state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Switch"
+  state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true"
+  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
   state playground_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") ?? "enabled"
-  state playground_checked = ctx.url.searchParams.get("pg_checked") ?? "false"
-  state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "Helpful context for this field."
+  state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
+  state playground_checked = (ctx.url.searchParams.get("pg_checked") ?? "false") === "true"
+  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_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
+  state playground_inline = (ctx.url.searchParams.get("pg_inline") ?? "false") === "true"
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  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 = "Switch"
     description = "Theme-aware, responsive switch component."
@@ -38,28 +38,25 @@ page SwitchDetail {
       </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="Switch" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Switch" 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 Switch</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="Switch" 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}" checked="{playground_checked}" 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><Switch 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}' checked='{playground_checked}' 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;Switch
-  id="switch-1"
-  name="switchField"
-  label="Email notifications"
-  placeholder="Enter switch"
-  value="enabled"
-  helperText="Helpful context for this field."
+  placeholder="Enter a sample value"
+  value="sample-1"
 /&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>20 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
-          <div class="playground-fields"><label class="playground-field" for="playground-switch-size"><span><strong>size</strong><small>string</small></span><select id="playground-switch-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-switch-color"><span><strong>color</strong><small>string</small></span><select id="playground-switch-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-switch-id"><span><strong>id</strong><small>string</small></span><input id="playground-switch-id" name="pg_id" type="text" value="switch-1" /></label><label class="playground-field" for="playground-switch-name"><span><strong>name</strong><small>string</small></span><input id="playground-switch-name" name="pg_name" type="text" value="switchField" /></label><label class="playground-field" for="playground-switch-label"><span><strong>label</strong><small>string</small></span><input id="playground-switch-label" name="pg_label" type="text" value="Email notifications" /></label><label class="playground-toggle" for="playground-switch-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-switch-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-switch-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-switch-placeholder" name="pg_placeholder" type="text" value="Enter switch" /></label><label class="playground-field" for="playground-switch-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-switch-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-switch-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-switch-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-switch-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-switch-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-switch-value"><span><strong>value</strong><small>string</small></span><input id="playground-switch-value" name="pg_value" type="text" value="enabled" /></label><label class="playground-toggle" for="playground-switch-checked"><span><strong>checked</strong><small>boolean</small></span><input id="playground-switch-checked" name="pg_checked" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-switch-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-switch-helperText" name="pg_helperText" type="text" value="Helpful context for this field." /></label><label class="playground-field" for="playground-switch-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-switch-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-switch-error"><span><strong>error</strong><small>string</small></span><input id="playground-switch-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-switch-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-switch-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-switch-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-switch-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-switch-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-switch-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-switch-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-switch-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-switch-class"><span><strong>class</strong><small>string</small></span><input id="playground-switch-class" name="pg_class" type="text" value="" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-switch-size"><span><strong>size</strong><small>string</small></span><select id="playground-switch-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-switch-color"><span><strong>color</strong><small>string</small></span><select id="playground-switch-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-switch-id"><span><strong>id</strong><small>string</small></span><input id="playground-switch-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-switch-name"><span><strong>name</strong><small>string</small></span><input id="playground-switch-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-switch-label"><span><strong>label</strong><small>string</small></span><input id="playground-switch-label" name="pg_label" type="text" value="Switch" /></label><label class="playground-toggle" for="playground-switch-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-switch-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-switch-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-switch-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-switch-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-switch-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-switch-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-switch-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-switch-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-switch-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-switch-value"><span><strong>value</strong><small>string</small></span><input id="playground-switch-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-toggle" for="playground-switch-checked"><span><strong>checked</strong><small>boolean</small></span><input id="playground-switch-checked" name="pg_checked" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-switch-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-switch-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-switch-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-switch-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-switch-error"><span><strong>error</strong><small>string</small></span><input id="playground-switch-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-switch-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-switch-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-switch-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-switch-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-switch-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-switch-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-switch-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-switch-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-switch-class"><span><strong>class</strong><small>string</small></span><input id="playground-switch-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -68,226 +65,98 @@ page SwitchDetail {
         <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="switch-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="Switch" size="default" color="primary" id="switch-1" name="switchField" label="Email notifications" placeholder="Enter switch" variant="normal" icon="" iconPosition="start" value="enabled" checked="false" helperText="Helpful context for this field." cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><Switch size="default" label="Switch" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" checked="false" 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;Switch
-  id="switch-1"
-  name="switchField"
-  label="Email notifications"
-  placeholder="Enter switch"
-  value="enabled"
-  helperText="Helpful context for this field."
+  placeholder="Enter a sample value"
+  value="sample-1"
 /&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="switch-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="Switch" size="default" color="primary" id="switch-2" name="switchField" label="Email notifications" placeholder="Enter switch" variant="outlined" icon="icon-[lucide--sparkles]" iconPosition="start" value="enabled" checked="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><Switch size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" variant="secondary" icon="icon-[lucide--arrow-right]" value="sample-2" checked="false" 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;Switch
-  id="switch-2"
-  name="switchField"
-  label="Email notifications"
-  placeholder="Enter switch"
-  variant="outlined"
-  icon="icon-[lucide--sparkles]"
-  value="enabled"
+  size="sm"
+  label="Compact example"
+  placeholder="Enter a sample value"
+  variant="secondary"
+  icon="icon-[lucide--arrow-right]"
+  value="sample-2"
 /&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="switch-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="Switch" size="default" color="primary" id="switch-3" name="switchField" label="Email notifications" placeholder="Enter switch" variant="floating" icon="icon-[lucide--circle-user-round]" iconPosition="end" value="enabled" checked="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><Switch size="lg" label="Advanced example" hiddenLabel="false" placeholder="Search by name, email, or identifier" variant="success" icon="icon-[lucide--trash-2]" value="sample-3" checked="false" 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;Switch
-  id="switch-3"
-  name="switchField"
-  label="Email notifications"
-  placeholder="Enter switch"
-  variant="floating"
-  icon="icon-[lucide--circle-user-round]"
-  iconPosition="end"
-  value="enabled"
-/&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="switch-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="Switch" size="sm" color="primary" id="switch-4" name="switchField" label="Email notifications" placeholder="Enter switch" variant="pill" icon="" iconPosition="start" value="enabled" checked="false" helperText="" cornerHint="" error="" inline="false" 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;Switch
-  size="sm"
-  id="switch-4"
-  name="switchField"
-  label="Email notifications"
-  placeholder="Enter switch"
-  variant="pill"
-  value="enabled"
-/&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="switch-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="Switch" size="default" color="primary" id="switch-5" name="switchField" label="Email notifications" placeholder="Enter switch" variant="normal" icon="" iconPosition="start" value="enabled" checked="true" helperText="" cornerHint="" error="" inline="false" 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;Switch
-  id="switch-5"
-  name="switchField"
-  label="Email notifications"
-  placeholder="Enter switch"
-  value="enabled"
-  checked="true"
-  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="switch-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="Switch" size="default" color="primary" id="switch-6" name="switchField" label="Email notifications" placeholder="Enter switch" variant="normal" icon="" iconPosition="start" value="enabled" checked="false" helperText="" cornerHint="" error="" inline="false" 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;Switch
-  id="switch-6"
-  name="switchField"
-  label="Email notifications"
-  placeholder="Enter switch"
-  value="enabled"
-  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="switch-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="Switch" size="default" color="primary" id="switch-7" name="switchField" label="Email notifications" placeholder="Enter switch" variant="normal" icon="" iconPosition="start" value="enabled" checked="false" helperText="We&#39;ll never share your details." cornerHint="" error="" inline="true" 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;Switch
-  id="switch-7"
-  name="switchField"
-  label="Email notifications"
-  placeholder="Enter switch"
-  value="enabled"
-  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="switch-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="Switch" size="default" color="primary" id="switch-8" name="switchField" label="Email notifications" placeholder="Enter switch" variant="normal" icon="" iconPosition="start" value="enabled" checked="false" 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;Switch
-  id="switch-8"
-  name="switchField"
-  label="Email notifications"
-  placeholder="Enter switch"
-  value="enabled"
-  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="switch-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="Switch" size="default" color="primary" id="switch-9" name="validatedField" label="Email notifications" placeholder="Enter switch" variant="normal" icon="" iconPosition="start" value="enabled" checked="false" 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;Switch
-  id="switch-9"
-  name="validatedField"
-  label="Email notifications"
-  placeholder="Enter switch"
-  value="enabled"
-  required="true"
+  size="lg"
+  label="Advanced example"
+  placeholder="Search by name, email, or identifier"
+  variant="success"
+  icon="icon-[lucide--trash-2]"
+  value="sample-3"
 /&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;Switch
+  @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=\"Switch\"], [data-component=\"Switch\"]")
 
-component.addEventListener('input', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("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>"Switch"</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>string</td><td><code>"on"</code></td><td>No</td></tr><tr><td><code>checked</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>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="#switch-demo-1">Default field</a><a href="#switch-demo-2">Outlined with start icon</a><a href="#switch-demo-3">Floating label</a><a href="#switch-demo-4">Pill and compact size</a><a href="#switch-demo-5">Read only</a><a href="#switch-demo-6">Disabled</a><a href="#switch-demo-7">Inline helper text</a><a href="#switch-demo-8">Field with corner hint</a><a href="#switch-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="#switch-demo-1">Production default</a><a href="#switch-demo-2">Compact application</a><a href="#switch-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/table.wrn b/examples/component-showcase/app/pages/components/table.wrn
index 4f3c27eb..9dc4e315 100644
--- a/examples/component-showcase/app/pages/components/table.wrn
+++ b/examples/component-showcase/app/pages/components/table.wrn
@@ -4,9 +4,9 @@ page TableDetail {
   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") ?? "Table"
-  state playground_columns = ctx.url.searchParams.get("pg_columns") ?? "[\n  {\n    \"id\": \"table-0-1\",\n    \"key\": \"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\": \"#table-demo\",\n    \"actionHref\": \"#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\": \"table-0-2\",\n    \"key\": \"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\": \"#table-demo\",\n    \"actionHref\": \"#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 = ctx.url.searchParams.get("pg_rows") ?? "[\n  {\n    \"id\": \"table-0-1\",\n    \"key\": \"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\": \"#table-demo\",\n    \"actionHref\": \"#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\": \"table-0-2\",\n    \"key\": \"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\": \"#table-demo\",\n    \"actionHref\": \"#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_striped = ctx.url.searchParams.get("pg_striped") ?? "true"
+  state playground_columns = JSON.parse(ctx.url.searchParams.get("pg_columns") ?? "[{\"id\":\"table-0-1\",\"key\":\"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\":\"#table-demo\",\"actionHref\":\"#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\":\"table-0-2\",\"key\":\"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\":\"#table-demo\",\"actionHref\":\"#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 = JSON.parse(ctx.url.searchParams.get("pg_rows") ?? "[{\"id\":\"table-0-1\",\"key\":\"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\":\"#table-demo\",\"actionHref\":\"#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\":\"table-0-2\",\"key\":\"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\":\"#table-demo\",\"actionHref\":\"#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") === "true"
   state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Table"
@@ -25,12 +25,12 @@ page TableDetail {
       </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="Table" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Table" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="sort,select,rowClick">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure 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="Table" size="{playground_size}" color="{playground_color}" caption="{playground_caption}" columns="{playground_columns}" rows="{playground_rows}" striped="{playground_striped}" class="{playground_class}"><thead><tr><th>Name</th><th>Status</th></tr></thead><tbody><tr><td>Production</td><td>Active</td></tr><tr><td>Staging</td><td>Ready</td></tr></tbody></div></div>
+          <div class="playground-preview-source" data-playground-preview><Table size='{playground_size}' color='{playground_color}' caption='{playground_caption}' columns='{playground_columns}' rows='{playground_rows}' striped='{playground_striped}' class='{playground_class}'><thead><tr><th>Name</th><th>Status</th></tr></thead><tbody><tr><td>Production</td><td>Active</td></tr><tr><td>Staging</td><td>Ready</td></tr></tbody></Table></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;Table
@@ -250,10 +250,11 @@ page TableDetail {
       ]
     &#125;
   ]'&gt;
-  &lt;!-- Add default slot content here --&gt;
+  &lt;thead&gt;&lt;tr&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Status&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;Production&lt;/td&gt;&lt;td&gt;Active&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Staging&lt;/td&gt;&lt;td&gt;Ready&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;
 &lt;/Table&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>
@@ -486,7 +487,8 @@ page TableDetail {
         <div class="demo-workbench">
           <div id="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="Table" size="default" columns="[{&quot;id&quot;:&quot;table-0-1&quot;,&quot;key&quot;:&quot;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;#table-demo&quot;,&quot;actionHref&quot;:&quot;#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;table-0-2&quot;,&quot;key&quot;:&quot;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;#table-demo&quot;,&quot;actionHref&quot;:&quot;#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;table-0-1&quot;,&quot;key&quot;:&quot;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;#table-demo&quot;,&quot;actionHref&quot;:&quot;#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;table-0-2&quot;,&quot;key&quot;:&quot;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;#table-demo&quot;,&quot;actionHref&quot;:&quot;#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;]}]" striped="true" class="showcase-instance showcase-instance--1"><thead><tr><th>Name</th><th>Status</th></tr></thead><tbody><tr><td>Production</td><td>Active</td></tr><tr><td>Staging</td><td>Ready</td></tr></tbody></div></div>
+            
+            <div class="demo-render"><Table size="default" columns='[{"id":"table-0-1","key":"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":"#table-demo","actionHref":"#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":"table-0-2","key":"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":"#table-demo","actionHref":"#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":"table-0-1","key":"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":"#table-demo","actionHref":"#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":"table-0-2","key":"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":"#table-demo","actionHref":"#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"><thead><tr><th>Name</th><th>Status</th></tr></thead><tbody><tr><td>Production</td><td>Active</td></tr><tr><td>Staging</td><td>Ready</td></tr></tbody></Table></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>
@@ -707,7 +709,7 @@ page TableDetail {
       ]
     &#125;
   ]'&gt;
-  &lt;!-- Add default slot content here --&gt;
+  &lt;thead&gt;&lt;tr&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Status&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;Production&lt;/td&gt;&lt;td&gt;Active&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Staging&lt;/td&gt;&lt;td&gt;Ready&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;
 &lt;/Table&gt;</code></pre>
           </section>
         </div>
@@ -720,7 +722,8 @@ page TableDetail {
         <div class="demo-workbench">
           <div id="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="Table" size="sm" columns="[{&quot;id&quot;:&quot;table-1-1&quot;,&quot;key&quot;:&quot;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;#table-demo&quot;,&quot;actionHref&quot;:&quot;#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;table-1-2&quot;,&quot;key&quot;:&quot;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;#table-demo&quot;,&quot;actionHref&quot;:&quot;#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;table-1-1&quot;,&quot;key&quot;:&quot;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;#table-demo&quot;,&quot;actionHref&quot;:&quot;#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;table-1-2&quot;,&quot;key&quot;:&quot;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;#table-demo&quot;,&quot;actionHref&quot;:&quot;#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;]}]" striped="true" class="showcase-instance showcase-instance--2"><thead><tr><th>Name</th><th>Status</th></tr></thead><tbody><tr><td>Production</td><td>Active</td></tr><tr><td>Staging</td><td>Ready</td></tr></tbody></div></div>
+            
+            <div class="demo-render"><Table size="sm" columns='[{"id":"table-1-1","key":"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":"#table-demo","actionHref":"#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":"table-1-2","key":"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":"#table-demo","actionHref":"#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":"table-1-1","key":"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":"#table-demo","actionHref":"#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":"table-1-2","key":"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":"#table-demo","actionHref":"#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"><thead><tr><th>Name</th><th>Status</th></tr></thead><tbody><tr><td>Production</td><td>Active</td></tr><tr><td>Staging</td><td>Ready</td></tr></tbody></Table></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>
@@ -942,7 +945,7 @@ page TableDetail {
       ]
     &#125;
   ]'&gt;
-  &lt;!-- Add default slot content here --&gt;
+  &lt;thead&gt;&lt;tr&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Status&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;Production&lt;/td&gt;&lt;td&gt;Active&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Staging&lt;/td&gt;&lt;td&gt;Ready&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;
 &lt;/Table&gt;</code></pre>
           </section>
         </div>
@@ -955,7 +958,8 @@ page TableDetail {
         <div class="demo-workbench">
           <div id="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="Table" size="lg" columns="[{&quot;id&quot;:&quot;table-2-1&quot;,&quot;key&quot;:&quot;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;#table-demo&quot;,&quot;actionHref&quot;:&quot;#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;table-2-2&quot;,&quot;key&quot;:&quot;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;#table-demo&quot;,&quot;actionHref&quot;:&quot;#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;table-2-1&quot;,&quot;key&quot;:&quot;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;#table-demo&quot;,&quot;actionHref&quot;:&quot;#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;table-2-2&quot;,&quot;key&quot;:&quot;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;#table-demo&quot;,&quot;actionHref&quot;:&quot;#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;]}]" striped="true" class="showcase-instance showcase-instance--3"><thead><tr><th>Name</th><th>Status</th></tr></thead><tbody><tr><td>Production</td><td>Active</td></tr><tr><td>Staging</td><td>Ready</td></tr></tbody></div></div>
+            
+            <div class="demo-render"><Table size="lg" columns='[{"id":"table-2-1","key":"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":"#table-demo","actionHref":"#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":"table-2-2","key":"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":"#table-demo","actionHref":"#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":"table-2-1","key":"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":"#table-demo","actionHref":"#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":"table-2-2","key":"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":"#table-demo","actionHref":"#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"><thead><tr><th>Name</th><th>Status</th></tr></thead><tbody><tr><td>Production</td><td>Active</td></tr><tr><td>Staging</td><td>Ready</td></tr></tbody></Table></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>
@@ -1177,16 +1181,28 @@ page TableDetail {
       ]
     &#125;
   ]'&gt;
-  &lt;!-- Add default slot content here --&gt;
+  &lt;thead&gt;&lt;tr&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Status&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;Production&lt;/td&gt;&lt;td&gt;Active&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Staging&lt;/td&gt;&lt;td&gt;Ready&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;
 &lt;/Table&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>@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>@rowClick</code><span>Fires when the component emits the row Click 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>@rowClick</code><span>Fires when the component emits the rowClick 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;Table
+  @sort='console.log(event.detail)'
+  @select='console.log(event.detail)'
+  @rowClick='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=\"Table\"], [data-component=\"Table\"]")
 
-component.addEventListener('sort', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("sort", (event) =&gt; &#123;
+  console.log("sort", event.detail)
+&#125;)
+
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)
+
+component?.addEventListener("rowClick", (event) =&gt; &#123;
+  console.log("rowClick", 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>"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">
diff --git a/examples/component-showcase/app/pages/components/tabs.wrn b/examples/component-showcase/app/pages/components/tabs.wrn
index e902a0d9..8a46a141 100644
--- a/examples/component-showcase/app/pages/components/tabs.wrn
+++ b/examples/component-showcase/app/pages/components/tabs.wrn
@@ -4,13 +4,13 @@ page TabsDetail {
   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") ?? "Tabs"
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"tabs-0-1\",\n    \"key\": \"tabs-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\": \"#tabs-demo\",\n    \"actionHref\": \"#tabs-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\": \"tabs-0-2\",\n    \"key\": \"tabs-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\": \"#tabs-demo\",\n    \"actionHref\": \"#tabs-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\":\"tabs-0-1\",\"key\":\"tabs-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#tabs-demo\",\"actionHref\":\"#tabs-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"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\":\"tabs-0-2\",\"key\":\"tabs-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#tabs-demo\",\"actionHref\":\"#tabs-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"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"
   seo {
     title = "Tabs"
-    description = "Theme-aware, responsive tabs component."
+    description = "Switch between related responsive content panels with horizontal or vertical orientation and selection events."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -20,17 +20,17 @@ page TabsDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Navigation component</span>
         <h1>Tabs</h1>
-        <p>Theme-aware, responsive tabs component.</p>
+        <p>Switch between related responsive content panels with horizontal or vertical orientation 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="Tabs" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Tabs" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Tabs</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="Tabs" 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><Tabs 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;Tabs
@@ -145,10 +145,11 @@ page TabsDetail {
 /&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-tabs-size"><span><strong>size</strong><small>string</small></span><select id="playground-tabs-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-tabs-color"><span><strong>color</strong><small>string</small></span><select id="playground-tabs-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-tabs-label"><span><strong>label</strong><small>string</small></span><input id="playground-tabs-label" name="pg_label" type="text" value="Tabs" /></label><label class="playground-field" for="playground-tabs-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-tabs-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+          <div class="playground-fields"><label class="playground-field" for="playground-tabs-size"><span><strong>size</strong><small>string</small></span><select id="playground-tabs-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-tabs-color"><span><strong>color</strong><small>string</small></span><select id="playground-tabs-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-tabs-label"><span><strong>label</strong><small>string</small></span><input id="playground-tabs-label" name="pg_label" type="text" value="Tabs" /></label><label class="playground-field" for="playground-tabs-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-tabs-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
     "id": "tabs-0-1",
     "key": "tabs-0-1",
@@ -264,388 +265,120 @@ page TabsDetail {
         <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 content tabs</h2><p>Switch between related content panels without navigating away.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="tabs-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="Tabs" size="default" label="Tabs" items="[{&quot;id&quot;:&quot;tabs-0-1&quot;,&quot;key&quot;:&quot;tabs-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;#tabs-demo&quot;,&quot;actionHref&quot;:&quot;#tabs-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;tabs-0-2&quot;,&quot;key&quot;:&quot;tabs-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;#tabs-demo&quot;,&quot;actionHref&quot;:&quot;#tabs-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"><Tabs size="default" label="Service information" items='[{"label":"Overview","value":"overview","content":"Overview content"},{"label":"Requirements","value":"requirements","content":"Requirements content"},{"label":"Process","value":"process","content":"Process content"}]' active="overview" 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 content tabs usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Tabs
+  label="Service information"
   items='[
     &#123;
-      "id": "tabs-0-1",
-      "key": "tabs-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#tabs-demo",
-      "actionHref": "#tabs-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "Overview",
+      "value": "overview",
+      "content": "Overview content"
     &#125;,
     &#123;
-      "id": "tabs-0-2",
-      "key": "tabs-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#tabs-demo",
-      "actionHref": "#tabs-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "Requirements",
+      "value": "requirements",
+      "content": "Requirements content"
+    &#125;,
+    &#123;
+      "label": "Process",
+      "value": "process",
+      "content": "Process content"
     &#125;
   ]'
+  active="overview"
 /&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 tabs</h2><p>Use smaller tabs in dashboards, panels, and dense product interfaces.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="tabs-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="Tabs" size="sm" label="Compact example" items="[{&quot;id&quot;:&quot;tabs-1-1&quot;,&quot;key&quot;:&quot;tabs-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;#tabs-demo&quot;,&quot;actionHref&quot;:&quot;#tabs-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;tabs-1-2&quot;,&quot;key&quot;:&quot;tabs-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;#tabs-demo&quot;,&quot;actionHref&quot;:&quot;#tabs-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"><Tabs size="sm" label="Record views" items='[{"label":"Details","value":"details"},{"label":"History","value":"history"},{"label":"Files","value":"files"}]' active="details" 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 tabs usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Tabs
   size="sm"
-  label="Compact example"
+  label="Record views"
   items='[
     &#123;
-      "id": "tabs-1-1",
-      "key": "tabs-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": "#tabs-demo",
-      "actionHref": "#tabs-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"
-      ]
+      "label": "Details",
+      "value": "details"
     &#125;,
     &#123;
-      "id": "tabs-1-2",
-      "key": "tabs-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#tabs-demo",
-      "actionHref": "#tabs-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "label": "History",
+      "value": "history"
+    &#125;,
+    &#123;
+      "label": "Files",
+      "value": "files"
     &#125;
   ]'
+  active="details"
 /&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 settings tabs</h2><p>Use vertical tabs for settings, configuration, and long-form navigation.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="tabs-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="Tabs" size="lg" label="Advanced example" items="[{&quot;id&quot;:&quot;tabs-2-1&quot;,&quot;key&quot;:&quot;tabs-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;#tabs-demo&quot;,&quot;actionHref&quot;:&quot;#tabs-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;tabs-2-2&quot;,&quot;key&quot;:&quot;tabs-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;#tabs-demo&quot;,&quot;actionHref&quot;:&quot;#tabs-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"><Tabs size="lg" label="Settings" items='[{"label":"Profile","value":"profile","icon":"icon-[lucide--user]"},{"label":"Security","value":"security","icon":"icon-[lucide--shield]"},{"label":"Notifications","value":"notifications","icon":"icon-[lucide--bell]"}]' active="security" 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 settings tabs usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Tabs
   size="lg"
-  label="Advanced example"
+  label="Settings"
   items='[
     &#123;
-      "id": "tabs-2-1",
-      "key": "tabs-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": "#tabs-demo",
-      "actionHref": "#tabs-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"
-      ]
+      "label": "Profile",
+      "value": "profile",
+      "icon": "icon-[lucide--user]"
     &#125;,
     &#123;
-      "id": "tabs-2-2",
-      "key": "tabs-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": "#tabs-demo",
-      "actionHref": "#tabs-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
+      "label": "Security",
+      "value": "security",
+      "icon": "icon-[lucide--shield]"
+    &#125;,
+    &#123;
+      "label": "Notifications",
+      "value": "notifications",
+      "icon": "icon-[lucide--bell]"
     &#125;
   ]'
+  active="security"
+  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>"Tabs"</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">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#tabs-demo-1">Production default</a><a href="#tabs-demo-2">Compact application</a><a href="#tabs-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="#tabs-demo-1">Horizontal content tabs</a><a href="#tabs-demo-2">Compact application tabs</a><a href="#tabs-demo-3">Vertical settings tabs</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/text-link.wrn b/examples/component-showcase/app/pages/components/text-link.wrn
index b2d5247a..1ff76a95 100644
--- a/examples/component-showcase/app/pages/components/text-link.wrn
+++ b/examples/component-showcase/app/pages/components/text-link.wrn
@@ -5,39 +5,39 @@ page TextLinkDetail {
   state playground_href = ctx.url.searchParams.get("pg_href") ?? "#text-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_icon = ctx.url.searchParams.get("pg_icon") ?? ""
   state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start"
-  state playground_showArrow = ctx.url.searchParams.get("pg_showArrow") ?? "true"
-  state playground_underline = ctx.url.searchParams.get("pg_underline") ?? "false"
+  state playground_showArrow = (ctx.url.searchParams.get("pg_showArrow") ?? "true") === "true"
+  state playground_underline = (ctx.url.searchParams.get("pg_underline") ?? "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_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 = "Text Link"
-    description = "Styled inline action link with icons, arrows, external state, and disabled handling."
+    description = "Render an accessible text action with optional icon, arrow, underline, external state, and semantic styling."
   }
   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>Text Link</span>
+      <a href="/">Components</a><span aria-hidden="true">/</span><a href="/marketing">Marketing</a><span aria-hidden="true">/</span><span>Text Link</span>
     </nav>
     <header class="detail-hero">
       <div class="detail-hero-copy">
-        <span class="showcase-eyebrow">Layout component</span>
+        <span class="showcase-eyebrow">Marketing component</span>
         <h1>Text Link</h1>
-        <p>Styled inline action link with icons, arrows, external state, and disabled handling.</p>
+        <p>Render an accessible text action with optional icon, arrow, underline, external state, and semantic styling.</p>
         <div class="detail-badges"><span>14 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="TextLink" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="TextLink" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="click,focus,blur">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Text 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="TextLink" label="{playground_label}" href="{playground_href}" target="{playground_target}" rel="{playground_rel}" external="{playground_external}" icon="{playground_icon}" iconPosition="{playground_iconPosition}" showArrow="{playground_showArrow}" underline="{playground_underline}" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" disabled="{playground_disabled}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><TextLink label='{playground_label}' href='{playground_href}' target='{playground_target}' rel='{playground_rel}' external='{playground_external}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' showArrow='{playground_showArrow}' underline='{playground_underline}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' 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;TextLink
@@ -46,10 +46,11 @@ page TextLinkDetail {
 /&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>
-          <div class="playground-fields"><label class="playground-field" for="playground-text-link-label"><span><strong>label</strong><small>string</small></span><input id="playground-text-link-label" name="pg_label" type="text" value="Text Link" /></label><label class="playground-field" for="playground-text-link-href"><span><strong>href</strong><small>string</small></span><input id="playground-text-link-href" name="pg_href" type="text" value="#text-link-demo" /></label><label class="playground-field" for="playground-text-link-target"><span><strong>target</strong><small>string</small></span><select id="playground-text-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-text-link-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-text-link-rel" name="pg_rel" type="text" value="" /></label><label class="playground-toggle" for="playground-text-link-external"><span><strong>external</strong><small>boolean</small></span><input id="playground-text-link-external" name="pg_external" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-text-link-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-text-link-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-text-link-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-text-link-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-toggle" for="playground-text-link-showArrow"><span><strong>show Arrow</strong><small>boolean</small></span><input id="playground-text-link-showArrow" name="pg_showArrow" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-text-link-underline"><span><strong>underline</strong><small>boolean</small></span><input id="playground-text-link-underline" name="pg_underline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-text-link-size"><span><strong>size</strong><small>string</small></span><select id="playground-text-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-text-link-color"><span><strong>color</strong><small>string</small></span><select id="playground-text-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-text-link-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-text-link-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="button">button</option></select></label><label class="playground-toggle" for="playground-text-link-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-text-link-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-text-link-class"><span><strong>class</strong><small>string</small></span><input id="playground-text-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-text-link-label"><span><strong>label</strong><small>string</small></span><input id="playground-text-link-label" name="pg_label" type="text" value="Text Link" /></label><label class="playground-field" for="playground-text-link-href"><span><strong>href</strong><small>string</small></span><input id="playground-text-link-href" name="pg_href" type="text" value="#text-link-demo" /></label><label class="playground-field" for="playground-text-link-target"><span><strong>target</strong><small>string</small></span><select id="playground-text-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-text-link-rel"><span><strong>rel</strong><small>string</small></span><input id="playground-text-link-rel" name="pg_rel" type="text" value="" /></label><label class="playground-toggle" for="playground-text-link-external"><span><strong>external</strong><small>boolean</small></span><input id="playground-text-link-external" name="pg_external" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-text-link-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-text-link-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-text-link-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-text-link-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-text-link-showArrow"><span><strong>show Arrow</strong><small>boolean</small></span><input id="playground-text-link-showArrow" name="pg_showArrow" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-text-link-underline"><span><strong>underline</strong><small>boolean</small></span><input id="playground-text-link-underline" name="pg_underline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-text-link-size"><span><strong>size</strong><small>string</small></span><select id="playground-text-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-text-link-color"><span><strong>color</strong><small>string</small></span><select id="playground-text-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-text-link-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-text-link-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="ghost">ghost</option><option value="minimal">minimal</option></select></label><label class="playground-toggle" for="playground-text-link-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-text-link-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-text-link-class"><span><strong>class</strong><small>string</small></span><input id="playground-text-link-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -58,39 +59,42 @@ page TextLinkDetail {
         <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>Inline directional link</h2><p>Use a lightweight link at the end of a card, section, or short content block.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="text-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="TextLink" label="Text Link" href="#text-link-demo" external="false" icon="" showArrow="true" underline="false" size="default" variant="default" disabled="false" class="showcase-instance showcase-instance--1"></div></div>
+            
+            <div class="demo-render"><TextLink label="Learn more" href="#learn" external="false" icon="" showArrow="true" underline="false" size="default" variant="default" 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="Inline directional 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;TextLink
-  label="Text Link"
-  href="#text-link-demo"
+  href="#learn"
 /&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>Underlined content link</h2><p>Use an underline when the link appears inside long-form text.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="text-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="TextLink" label="Compact example" href="#text-link-demo" external="false" icon="icon-[lucide--arrow-right]" showArrow="true" underline="false" size="sm" variant="secondary" disabled="false" class="showcase-instance showcase-instance--2"></div></div>
+            
+            <div class="demo-render"><TextLink label="Read the complete guide" href="#guide" external="false" icon="icon-[lucide--arrow-right]" showArrow="false" underline="true" size="sm" variant="secondary" 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="Underlined content 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;TextLink
-  label="Compact example"
-  href="#text-link-demo"
+  label="Read the complete guide"
+  href="#guide"
   icon="icon-[lucide--arrow-right]"
+  showArrow="false"
+  underline="true"
   size="sm"
   variant="secondary"
 /&gt;</code></pre>
@@ -99,40 +103,56 @@ page TextLinkDetail {
       </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 developer link</h2><p>Clearly communicate that a resource opens outside the current application.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="text-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="TextLink" label="Advanced example" href="#text-link-demo" external="false" icon="icon-[lucide--trash-2]" showArrow="true" underline="false" size="lg" variant="success" disabled="false" class="showcase-instance showcase-instance--3"></div></div>
+            
+            <div class="demo-render"><TextLink label="Open WRNexusJS documentation" href="https://wrnexusjs.dev" target="_blank" external="true" icon="icon-[lucide--book-open]" iconPosition="start" showArrow="false" underline="false" size="lg" variant="soft" 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="External developer 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;TextLink
-  label="Advanced example"
-  href="#text-link-demo"
-  icon="icon-[lucide--trash-2]"
+  label="Open WRNexusJS documentation"
+  href="https://wrnexusjs.dev"
+  target="_blank"
+  external="true"
+  icon="icon-[lucide--book-open]"
+  showArrow="false"
   size="lg"
-  variant="success"
+  variant="soft"
 /&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>@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;TextLink
+  @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=\"TextLink\"], [data-component=\"TextLink\"]")
 
-component.addEventListener('click', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("click", (event) =&gt; &#123;
+  console.log("click", event.detail)
+&#125;)
+
+component?.addEventListener("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>"Learn more"</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>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>showArrow</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>underline</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>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="#text-link-demo-1">Production default</a><a href="#text-link-demo-2">Compact application</a><a href="#text-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="#text-link-demo-1">Inline directional link</a><a href="#text-link-demo-2">Underlined content link</a><a href="#text-link-demo-3">External developer link</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/section-header"><small>Previous</small><strong>← Section Header</strong></a>
-      <a href="/components/typography"><small>Next</small><strong>Typography →</strong></a>
+      <a href="/components/split-hero"><small>Previous</small><strong>← Split Hero</strong></a>
+      <span></span>
     </nav>
   }
 }
diff --git a/examples/component-showcase/app/pages/components/textarea.wrn b/examples/component-showcase/app/pages/components/textarea.wrn
index 4b88d02f..ad1993a2 100644
--- a/examples/component-showcase/app/pages/components/textarea.wrn
+++ b/examples/component-showcase/app/pages/components/textarea.wrn
@@ -3,27 +3,27 @@ page TextareaDetail {
   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") ?? "textarea-1"
-  state playground_name = ctx.url.searchParams.get("pg_name") ?? "textareaField"
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Description"
-  state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
-  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter textarea"
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? ""
+  state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
+  state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Textarea"
+  state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true"
+  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
+  state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
   state playground_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_rows = ctx.url.searchParams.get("pg_rows") ?? "4"
+  state playground_inline = (ctx.url.searchParams.get("pg_inline") ?? "false") === "true"
+  state playground_rows = Number(ctx.url.searchParams.get("pg_rows") ?? "5")
   state playground_resize = ctx.url.searchParams.get("pg_resize") ?? "vertical"
-  state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
   state playground_minlength = ctx.url.searchParams.get("pg_minlength") ?? ""
   state playground_maxlength = ctx.url.searchParams.get("pg_maxlength") ?? ""
-  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 = "Textarea"
     description = "Theme-aware, responsive textarea component."
@@ -41,28 +41,25 @@ page TextareaDetail {
       </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="Textarea" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Textarea" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="input,change,focus,blur,invalid">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Textarea</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="Textarea" size="{playground_size}" color="{playground_color}" id="{playground_id}" name="{playground_name}" label="{playground_label}" hiddenLabel="{playground_hiddenLabel}" placeholder="{playground_placeholder}" value="{playground_value}" variant="{playground_variant}" icon="{playground_icon}" iconPosition="{playground_iconPosition}" helperText="{playground_helperText}" cornerHint="{playground_cornerHint}" error="{playground_error}" inline="{playground_inline}" rows="{playground_rows}" resize="{playground_resize}" readonly="{playground_readonly}" disabled="{playground_disabled}" required="{playground_required}" minlength="{playground_minlength}" maxlength="{playground_maxlength}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><Textarea size='{playground_size}' color='{playground_color}' id='{playground_id}' name='{playground_name}' label='{playground_label}' hiddenLabel='{playground_hiddenLabel}' placeholder='{playground_placeholder}' value='{playground_value}' variant='{playground_variant}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' inline='{playground_inline}' rows='{playground_rows}' resize='{playground_resize}' readonly='{playground_readonly}' disabled='{playground_disabled}' required='{playground_required}' minlength='{playground_minlength}' maxlength='{playground_maxlength}' 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;Textarea
-  id="textarea-1"
-  name="textareaField"
-  label="Description"
-  placeholder="Enter textarea"
-  helperText="Helpful context for this field."
-  rows="4"
+  placeholder="Enter a sample value"
+  value="sample-1"
 /&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-textarea-size"><span><strong>size</strong><small>string</small></span><select id="playground-textarea-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-textarea-color"><span><strong>color</strong><small>string</small></span><select id="playground-textarea-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-textarea-id"><span><strong>id</strong><small>string</small></span><input id="playground-textarea-id" name="pg_id" type="text" value="textarea-1" /></label><label class="playground-field" for="playground-textarea-name"><span><strong>name</strong><small>string</small></span><input id="playground-textarea-name" name="pg_name" type="text" value="textareaField" /></label><label class="playground-field" for="playground-textarea-label"><span><strong>label</strong><small>string</small></span><input id="playground-textarea-label" name="pg_label" type="text" value="Description" /></label><label class="playground-toggle" for="playground-textarea-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-textarea-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-textarea-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-textarea-placeholder" name="pg_placeholder" type="text" value="Enter textarea" /></label><label class="playground-field" for="playground-textarea-value"><span><strong>value</strong><small>string</small></span><input id="playground-textarea-value" name="pg_value" type="text" value="" /></label><label class="playground-field" for="playground-textarea-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-textarea-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-textarea-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-textarea-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-textarea-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-textarea-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-textarea-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-textarea-helperText" name="pg_helperText" type="text" value="Helpful context for this field." /></label><label class="playground-field" for="playground-textarea-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-textarea-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-textarea-error"><span><strong>error</strong><small>string</small></span><input id="playground-textarea-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-textarea-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-textarea-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-textarea-rows"><span><strong>rows</strong><small>number</small></span><input id="playground-textarea-rows" name="pg_rows" type="number" value="4" /></label><label class="playground-field" for="playground-textarea-resize"><span><strong>resize</strong><small>string</small></span><input id="playground-textarea-resize" name="pg_resize" type="text" value="vertical" /></label><label class="playground-toggle" for="playground-textarea-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-textarea-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-textarea-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-textarea-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-textarea-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-textarea-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-textarea-minlength"><span><strong>minlength</strong><small>string</small></span><input id="playground-textarea-minlength" name="pg_minlength" type="text" value="" /></label><label class="playground-field" for="playground-textarea-maxlength"><span><strong>maxlength</strong><small>string</small></span><input id="playground-textarea-maxlength" name="pg_maxlength" type="text" value="" /></label><label class="playground-field" for="playground-textarea-class"><span><strong>class</strong><small>string</small></span><input id="playground-textarea-class" name="pg_class" type="text" value="" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-textarea-size"><span><strong>size</strong><small>string</small></span><select id="playground-textarea-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-textarea-color"><span><strong>color</strong><small>string</small></span><select id="playground-textarea-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-textarea-id"><span><strong>id</strong><small>string</small></span><input id="playground-textarea-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-textarea-name"><span><strong>name</strong><small>string</small></span><input id="playground-textarea-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-textarea-label"><span><strong>label</strong><small>string</small></span><input id="playground-textarea-label" name="pg_label" type="text" value="Textarea" /></label><label class="playground-toggle" for="playground-textarea-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-textarea-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-textarea-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-textarea-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-textarea-value"><span><strong>value</strong><small>string</small></span><input id="playground-textarea-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-textarea-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-textarea-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-textarea-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-textarea-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-textarea-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-textarea-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-textarea-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-textarea-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-textarea-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-textarea-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-textarea-error"><span><strong>error</strong><small>string</small></span><input id="playground-textarea-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-textarea-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-textarea-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-textarea-rows"><span><strong>rows</strong><small>number</small></span><input id="playground-textarea-rows" name="pg_rows" type="number" value="5" /></label><label class="playground-field" for="playground-textarea-resize"><span><strong>resize</strong><small>string</small></span><input id="playground-textarea-resize" name="pg_resize" type="text" value="vertical" /></label><label class="playground-toggle" for="playground-textarea-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-textarea-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-textarea-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-textarea-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-textarea-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-textarea-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-textarea-minlength"><span><strong>minlength</strong><small>string</small></span><input id="playground-textarea-minlength" name="pg_minlength" type="text" value="" /></label><label class="playground-field" for="playground-textarea-maxlength"><span><strong>maxlength</strong><small>string</small></span><input id="playground-textarea-maxlength" name="pg_maxlength" type="text" value="" /></label><label class="playground-field" for="playground-textarea-class"><span><strong>class</strong><small>string</small></span><input id="playground-textarea-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -71,226 +68,103 @@ page TextareaDetail {
         <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="textarea-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="Textarea" size="default" color="primary" id="textarea-1" name="textareaField" label="Description" placeholder="Enter textarea" value="" variant="normal" icon="" iconPosition="start" helperText="Helpful context for this field." cornerHint="" error="" inline="false" rows="4" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><Textarea size="default" label="Textarea" hiddenLabel="false" placeholder="Enter a sample value" value="sample-1" variant="normal" icon="" inline="false" rows="5" 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;Textarea
-  id="textarea-1"
-  name="textareaField"
-  label="Description"
-  placeholder="Enter textarea"
-  helperText="Helpful context for this field."
-  rows="4"
+  placeholder="Enter a sample value"
+  value="sample-1"
 /&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="textarea-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="Textarea" size="default" color="primary" id="textarea-2" name="textareaField" label="Description" placeholder="Enter textarea" value="" variant="outlined" icon="icon-[lucide--sparkles]" iconPosition="start" helperText="" cornerHint="" error="" inline="false" rows="4" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><Textarea size="sm" label="Compact example" hiddenLabel="false" placeholder="Enter a sample value" value="sample-2" variant="secondary" icon="icon-[lucide--arrow-right]" inline="false" rows="5" 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;Textarea
-  id="textarea-2"
-  name="textareaField"
-  label="Description"
-  placeholder="Enter textarea"
-  variant="outlined"
-  icon="icon-[lucide--sparkles]"
-  rows="4"
+  size="sm"
+  label="Compact example"
+  placeholder="Enter a sample value"
+  value="sample-2"
+  variant="secondary"
+  icon="icon-[lucide--arrow-right]"
 /&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="textarea-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="Textarea" size="default" color="primary" id="textarea-3" name="textareaField" label="Description" placeholder="Enter textarea" value="" variant="floating" icon="icon-[lucide--circle-user-round]" iconPosition="end" helperText="" cornerHint="" error="" inline="false" rows="4" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><Textarea 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" rows="5" 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;Textarea
-  id="textarea-3"
-  name="textareaField"
-  label="Description"
-  placeholder="Enter textarea"
-  variant="floating"
-  icon="icon-[lucide--circle-user-round]"
-  iconPosition="end"
-  rows="4"
-/&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="textarea-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="Textarea" size="sm" color="primary" id="textarea-4" name="textareaField" label="Description" placeholder="Enter textarea" value="" variant="pill" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" rows="4" 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;Textarea
-  size="sm"
-  id="textarea-4"
-  name="textareaField"
-  label="Description"
-  placeholder="Enter textarea"
-  variant="pill"
-  rows="4"
-/&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="textarea-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="Textarea" size="default" color="primary" id="textarea-5" name="textareaField" label="Description" placeholder="Enter textarea" value="This content is read only." variant="normal" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" rows="4" 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;Textarea
-  id="textarea-5"
-  name="textareaField"
-  label="Description"
-  placeholder="Enter textarea"
-  value="This content is read only."
-  rows="4"
-  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="textarea-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="Textarea" size="default" color="primary" id="textarea-6" name="textareaField" label="Description" placeholder="Enter textarea" value="" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" rows="4" 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;Textarea
-  id="textarea-6"
-  name="textareaField"
-  label="Description"
-  placeholder="Enter textarea"
-  rows="4"
-  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="textarea-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="Textarea" size="default" color="primary" id="textarea-7" name="textareaField" label="Description" placeholder="Enter textarea" value="" variant="normal" icon="" iconPosition="start" helperText="We&#39;ll never share your details." cornerHint="" error="" inline="true" rows="4" 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;Textarea
-  id="textarea-7"
-  name="textareaField"
-  label="Description"
-  placeholder="Enter textarea"
-  helperText="We'll never share your details."
-  inline="true"
-  rows="4"
-/&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="textarea-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="Textarea" size="default" color="primary" id="textarea-8" name="textareaField" label="Description" placeholder="Enter textarea" value="" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="Optional" error="" inline="false" rows="4" 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;Textarea
-  id="textarea-8"
-  name="textareaField"
-  label="Description"
-  placeholder="Enter textarea"
-  cornerHint="Optional"
-  rows="4"
-/&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="textarea-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="Textarea" size="default" color="primary" id="textarea-9" name="validatedField" label="Description" placeholder="Enter textarea" value="" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" rows="4" 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;Textarea
-  id="textarea-9"
-  name="validatedField"
-  label="Description"
-  placeholder="Enter textarea"
-  rows="4"
-  required="true"
+  size="lg"
+  label="Advanced example"
+  placeholder="Search by name, email, or identifier"
+  value="sample-3"
+  variant="success"
+  icon="icon-[lucide--trash-2]"
 /&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><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><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;Textarea
+  @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)'
+/&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=\"Textarea\"], [data-component=\"Textarea\"]")
 
-component.addEventListener('input', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("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>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>"Textarea"</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>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>rows</code></td><td>number</td><td><code>5</code></td><td>No</td></tr><tr><td><code>resize</code></td><td>string</td><td><code>"vertical"</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>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>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="#textarea-demo-1">Default field</a><a href="#textarea-demo-2">Outlined with start icon</a><a href="#textarea-demo-3">Floating label</a><a href="#textarea-demo-4">Pill and compact size</a><a href="#textarea-demo-5">Read only</a><a href="#textarea-demo-6">Disabled</a><a href="#textarea-demo-7">Inline helper text</a><a href="#textarea-demo-8">Field with corner hint</a><a href="#textarea-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="#textarea-demo-1">Production default</a><a href="#textarea-demo-2">Compact application</a><a href="#textarea-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/time-picker.wrn b/examples/component-showcase/app/pages/components/time-picker.wrn
index 7aae906d..3f66ea22 100644
--- a/examples/component-showcase/app/pages/components/time-picker.wrn
+++ b/examples/component-showcase/app/pages/components/time-picker.wrn
@@ -3,30 +3,30 @@ page TimePickerDetail {
   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") ?? "time-picker-1"
-  state playground_name = ctx.url.searchParams.get("pg_name") ?? "time-pickerField"
-  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Start time"
-  state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false"
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? ""
-  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter time picker"
+  state playground_id = ctx.url.searchParams.get("pg_id") ?? ""
+  state playground_name = ctx.url.searchParams.get("pg_name") ?? ""
+  state playground_label = ctx.url.searchParams.get("pg_label") ?? "Time Picker"
+  state playground_hiddenLabel = (ctx.url.searchParams.get("pg_hiddenLabel") ?? "false") === "true"
+  state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
+  state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter a sample value"
   state playground_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_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "end"
+  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_min = ctx.url.searchParams.get("pg_min") ?? "08:00"
-  state playground_max = ctx.url.searchParams.get("pg_max") ?? "18:00"
+  state playground_inline = (ctx.url.searchParams.get("pg_inline") ?? "false") === "true"
+  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_format = ctx.url.searchParams.get("pg_format") ?? "24"
-  state playground_minuteStep = ctx.url.searchParams.get("pg_minuteStep") ?? "5"
+  state playground_minuteStep = Number(ctx.url.searchParams.get("pg_minuteStep") ?? "5")
   state playground_hours = ctx.url.searchParams.get("pg_hours") ?? ""
   state playground_minutes = ctx.url.searchParams.get("pg_minutes") ?? ""
-  state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
   seo {
     title = "Time Picker"
     description = "Theme-aware, responsive time picker component."
@@ -44,30 +44,26 @@ page TimePickerDetail {
       </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="TimePicker" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="TimePicker" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="input,change,focus,blur,open,close,invalid">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Time 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="TimePicker" size="{playground_size}" color="{playground_color}" id="{playground_id}" name="{playground_name}" label="{playground_label}" hiddenLabel="{playground_hiddenLabel}" value="{playground_value}" placeholder="{playground_placeholder}" variant="{playground_variant}" icon="{playground_icon}" iconPosition="{playground_iconPosition}" helperText="{playground_helperText}" cornerHint="{playground_cornerHint}" error="{playground_error}" inline="{playground_inline}" min="{playground_min}" max="{playground_max}" step="{playground_step}" format="{playground_format}" minuteStep="{playground_minuteStep}" hours="{playground_hours}" minutes="{playground_minutes}" readonly="{playground_readonly}" disabled="{playground_disabled}" required="{playground_required}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><TimePicker size='{playground_size}' color='{playground_color}' id='{playground_id}' name='{playground_name}' label='{playground_label}' hiddenLabel='{playground_hiddenLabel}' value='{playground_value}' placeholder='{playground_placeholder}' variant='{playground_variant}' icon='{playground_icon}' iconPosition='{playground_iconPosition}' helperText='{playground_helperText}' cornerHint='{playground_cornerHint}' error='{playground_error}' inline='{playground_inline}' min='{playground_min}' max='{playground_max}' step='{playground_step}' format='{playground_format}' minuteStep='{playground_minuteStep}' hours='{playground_hours}' minutes='{playground_minutes}' 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;TimePicker
-  id="time-picker-1"
-  name="time-pickerField"
-  label="Start time"
-  placeholder="Enter time picker"
-  iconPosition="start"
-  helperText="Helpful context for this field."
-  min="08:00"
-  max="18:00"
+  label="Time Picker"
+  value="sample-1"
+  placeholder="Enter a sample value"
 /&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-time-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-time-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-time-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-time-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-time-picker-id"><span><strong>id</strong><small>string</small></span><input id="playground-time-picker-id" name="pg_id" type="text" value="time-picker-1" /></label><label class="playground-field" for="playground-time-picker-name"><span><strong>name</strong><small>string</small></span><input id="playground-time-picker-name" name="pg_name" type="text" value="time-pickerField" /></label><label class="playground-field" for="playground-time-picker-label"><span><strong>label</strong><small>string</small></span><input id="playground-time-picker-label" name="pg_label" type="text" value="Start time" /></label><label class="playground-toggle" for="playground-time-picker-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-time-picker-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-time-picker-value"><span><strong>value</strong><small>string</small></span><input id="playground-time-picker-value" name="pg_value" type="text" value="" /></label><label class="playground-field" for="playground-time-picker-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-time-picker-placeholder" name="pg_placeholder" type="text" value="Enter time picker" /></label><label class="playground-field" for="playground-time-picker-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-time-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><option value="floating">floating</option></select></label><label class="playground-field" for="playground-time-picker-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-time-picker-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-time-picker-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-time-picker-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option></select></label><label class="playground-field" for="playground-time-picker-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-time-picker-helperText" name="pg_helperText" type="text" value="Helpful context for this field." /></label><label class="playground-field" for="playground-time-picker-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-time-picker-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-time-picker-error"><span><strong>error</strong><small>string</small></span><input id="playground-time-picker-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-time-picker-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-time-picker-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-time-picker-min"><span><strong>min</strong><small>string</small></span><input id="playground-time-picker-min" name="pg_min" type="text" value="08:00" /></label><label class="playground-field" for="playground-time-picker-max"><span><strong>max</strong><small>string</small></span><input id="playground-time-picker-max" name="pg_max" type="text" value="18:00" /></label><label class="playground-field" for="playground-time-picker-step"><span><strong>step</strong><small>string</small></span><input id="playground-time-picker-step" name="pg_step" type="text" value="" /></label><label class="playground-field" for="playground-time-picker-format"><span><strong>format</strong><small>string</small></span><input id="playground-time-picker-format" name="pg_format" type="text" value="24" /></label><label class="playground-field" for="playground-time-picker-minuteStep"><span><strong>minute Step</strong><small>number</small></span><input id="playground-time-picker-minuteStep" name="pg_minuteStep" type="number" value="5" /></label><label class="playground-field" for="playground-time-picker-hours"><span><strong>hours</strong><small>string</small></span><input id="playground-time-picker-hours" name="pg_hours" type="text" value="" /></label><label class="playground-field" for="playground-time-picker-minutes"><span><strong>minutes</strong><small>string</small></span><input id="playground-time-picker-minutes" name="pg_minutes" type="text" value="" /></label><label class="playground-toggle" for="playground-time-picker-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-time-picker-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-time-picker-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-time-picker-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-time-picker-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-time-picker-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-time-picker-class"><span><strong>class</strong><small>string</small></span><input id="playground-time-picker-class" name="pg_class" type="text" value="" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-time-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-time-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-time-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-time-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-time-picker-id"><span><strong>id</strong><small>string</small></span><input id="playground-time-picker-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-time-picker-name"><span><strong>name</strong><small>string</small></span><input id="playground-time-picker-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-time-picker-label"><span><strong>label</strong><small>string</small></span><input id="playground-time-picker-label" name="pg_label" type="text" value="Time Picker" /></label><label class="playground-toggle" for="playground-time-picker-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-time-picker-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-time-picker-value"><span><strong>value</strong><small>string</small></span><input id="playground-time-picker-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-time-picker-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-time-picker-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-time-picker-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-time-picker-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-time-picker-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-time-picker-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-time-picker-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-time-picker-iconPosition" name="pg_iconPosition"><option value="end" selected>end</option><option value="start">start</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-time-picker-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-time-picker-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-time-picker-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-time-picker-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-time-picker-error"><span><strong>error</strong><small>string</small></span><input id="playground-time-picker-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-time-picker-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-time-picker-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-time-picker-min"><span><strong>min</strong><small>string</small></span><input id="playground-time-picker-min" name="pg_min" type="text" value="" /></label><label class="playground-field" for="playground-time-picker-max"><span><strong>max</strong><small>string</small></span><input id="playground-time-picker-max" name="pg_max" type="text" value="" /></label><label class="playground-field" for="playground-time-picker-step"><span><strong>step</strong><small>string</small></span><input id="playground-time-picker-step" name="pg_step" type="text" value="" /></label><label class="playground-field" for="playground-time-picker-format"><span><strong>format</strong><small>string</small></span><input id="playground-time-picker-format" name="pg_format" type="text" value="24" /></label><label class="playground-field" for="playground-time-picker-minuteStep"><span><strong>minute Step</strong><small>number</small></span><input id="playground-time-picker-minuteStep" name="pg_minuteStep" type="number" value="5" /></label><label class="playground-field" for="playground-time-picker-hours"><span><strong>hours</strong><small>string</small></span><input id="playground-time-picker-hours" name="pg_hours" type="text" value="" /></label><label class="playground-field" for="playground-time-picker-minutes"><span><strong>minutes</strong><small>string</small></span><input id="playground-time-picker-minutes" name="pg_minutes" type="text" value="" /></label><label class="playground-toggle" for="playground-time-picker-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-time-picker-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-time-picker-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-time-picker-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-time-picker-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-time-picker-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-time-picker-class"><span><strong>class</strong><small>string</small></span><input id="playground-time-picker-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -76,242 +72,114 @@ page TimePickerDetail {
         <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="time-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="TimePicker" size="default" color="primary" id="time-picker-1" name="time-pickerField" label="Start time" value="" placeholder="Enter time picker" variant="normal" icon="" iconPosition="start" helperText="Helpful context for this field." cornerHint="" error="" inline="false" min="08:00" max="18:00" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><TimePicker size="default" label="Time Picker" hiddenLabel="false" value="sample-1" placeholder="Enter a sample value" variant="normal" icon="" inline="false" minuteStep="5" 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;TimePicker
-  id="time-picker-1"
-  name="time-pickerField"
-  label="Start time"
-  placeholder="Enter time picker"
-  iconPosition="start"
-  helperText="Helpful context for this field."
-  min="08:00"
-  max="18:00"
+  label="Time Picker"
+  value="sample-1"
+  placeholder="Enter a sample value"
 /&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="time-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="TimePicker" size="default" color="primary" id="time-picker-2" name="time-pickerField" label="Start time" value="" placeholder="Enter time picker" variant="outlined" icon="icon-[lucide--sparkles]" iconPosition="start" helperText="" cornerHint="" error="" inline="false" min="08:00" max="18:00" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><TimePicker size="sm" label="Compact example" hiddenLabel="false" value="sample-2" placeholder="Enter a sample value" variant="secondary" icon="icon-[lucide--arrow-right]" inline="false" minuteStep="5" 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;TimePicker
-  id="time-picker-2"
-  name="time-pickerField"
-  label="Start time"
-  placeholder="Enter time picker"
-  variant="outlined"
-  icon="icon-[lucide--sparkles]"
-  iconPosition="start"
-  min="08:00"
-  max="18:00"
+  size="sm"
+  label="Compact example"
+  value="sample-2"
+  placeholder="Enter a sample value"
+  variant="secondary"
+  icon="icon-[lucide--arrow-right]"
 /&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="time-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="TimePicker" size="default" color="primary" id="time-picker-3" name="time-pickerField" label="Start time" value="" placeholder="Enter time picker" variant="floating" icon="icon-[lucide--circle-user-round]" iconPosition="end" helperText="" cornerHint="" error="" inline="false" min="08:00" max="18:00" readonly="false" disabled="false" required="false"></div></div>
+            
+            <div class="demo-render"><TimePicker size="lg" label="Advanced example" hiddenLabel="false" value="sample-3" placeholder="Search by name, email, or identifier" variant="success" icon="icon-[lucide--trash-2]" inline="false" minuteStep="5" 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;TimePicker
-  id="time-picker-3"
-  name="time-pickerField"
-  label="Start time"
-  placeholder="Enter time picker"
-  variant="floating"
-  icon="icon-[lucide--circle-user-round]"
-  min="08:00"
-  max="18:00"
-/&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="time-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="TimePicker" size="sm" color="primary" id="time-picker-4" name="time-pickerField" label="Start time" value="" placeholder="Enter time picker" variant="pill" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" min="08:00" max="18:00" 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;TimePicker
-  size="sm"
-  id="time-picker-4"
-  name="time-pickerField"
-  label="Start time"
-  placeholder="Enter time picker"
-  variant="pill"
-  iconPosition="start"
-  min="08:00"
-  max="18:00"
-/&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="time-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="TimePicker" size="default" color="primary" id="time-picker-5" name="time-pickerField" label="Start time" value="09:30" placeholder="Enter time picker" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" min="08:00" max="18:00" 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;TimePicker
-  id="time-picker-5"
-  name="time-pickerField"
-  label="Start time"
-  value="09:30"
-  placeholder="Enter time picker"
-  iconPosition="start"
-  min="08:00"
-  max="18:00"
-  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="time-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="TimePicker" size="default" color="primary" id="time-picker-6" name="time-pickerField" label="Start time" value="" placeholder="Enter time picker" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" min="08:00" max="18:00" 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;TimePicker
-  id="time-picker-6"
-  name="time-pickerField"
-  label="Start time"
-  placeholder="Enter time picker"
-  iconPosition="start"
-  min="08:00"
-  max="18:00"
-  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="time-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="TimePicker" size="default" color="primary" id="time-picker-7" name="time-pickerField" label="Start time" value="" placeholder="Enter time picker" variant="normal" icon="" iconPosition="start" helperText="We&#39;ll never share your details." cornerHint="" error="" inline="true" min="08:00" max="18:00" 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;TimePicker
-  id="time-picker-7"
-  name="time-pickerField"
-  label="Start time"
-  placeholder="Enter time picker"
-  iconPosition="start"
-  helperText="We'll never share your details."
-  inline="true"
-  min="08:00"
-  max="18:00"
-/&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="time-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="TimePicker" size="default" color="primary" id="time-picker-8" name="time-pickerField" label="Start time" value="" placeholder="Enter time picker" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="Optional" error="" inline="false" min="08:00" max="18:00" 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;TimePicker
-  id="time-picker-8"
-  name="time-pickerField"
-  label="Start time"
-  placeholder="Enter time picker"
-  iconPosition="start"
-  cornerHint="Optional"
-  min="08:00"
-  max="18:00"
-/&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="time-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="TimePicker" size="default" color="primary" id="time-picker-9" name="validatedField" label="Start time" value="" placeholder="Enter time picker" variant="normal" icon="" iconPosition="start" helperText="" cornerHint="" error="" inline="false" min="08:00" max="18:00" 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;TimePicker
-  id="time-picker-9"
-  name="validatedField"
-  label="Start time"
-  placeholder="Enter time picker"
-  iconPosition="start"
-  min="08:00"
-  max="18:00"
-  required="true"
+  size="lg"
+  label="Advanced example"
+  value="sample-3"
+  placeholder="Search by name, email, or identifier"
+  variant="success"
+  icon="icon-[lucide--trash-2]"
 /&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>@open</code><span>Fires when the component opens.</span></div><div><code>@close</code><span>Fires when the component closes.</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>@open</code><span>Fires after the component opens.</span></div><div><code>@close</code><span>Fires after the component closes.</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;TimePicker
+  @input='console.log(event.detail)'
+  @change='console.log(event.detail)'
+  @focus='console.log(event.detail)'
+  @blur='console.log(event.detail)'
+  @open='console.log(event.detail)'
+  @close='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=\"TimePicker\"], [data-component=\"TimePicker\"]")
 
-component.addEventListener('input', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("focus", (event) =&gt; &#123;
+  console.log("focus", event.detail)
+&#125;)
+
+component?.addEventListener("blur", (event) =&gt; &#123;
+  console.log("blur", 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("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>"Time"</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>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>"icon-[lucide--clock-3]"</code></td><td>No</td></tr><tr><td><code>iconPosition</code></td><td>string</td><td><code>"end"</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>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>format</code></td><td>string</td><td><code>"24"</code></td><td>No</td></tr><tr><td><code>minuteStep</code></td><td>number</td><td><code>5</code></td><td>No</td></tr><tr><td><code>hours</code></td><td>string</td><td><code>["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]</code></td><td>No</td></tr><tr><td><code>minutes</code></td><td>string</td><td><code>["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"]</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="#time-picker-demo-1">Default field</a><a href="#time-picker-demo-2">Outlined with start icon</a><a href="#time-picker-demo-3">Floating label</a><a href="#time-picker-demo-4">Pill and compact size</a><a href="#time-picker-demo-5">Read only</a><a href="#time-picker-demo-6">Disabled</a><a href="#time-picker-demo-7">Inline helper text</a><a href="#time-picker-demo-8">Field with corner hint</a><a href="#time-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="#time-picker-demo-1">Production default</a><a href="#time-picker-demo-2">Compact application</a><a href="#time-picker-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/timeline.wrn b/examples/component-showcase/app/pages/components/timeline.wrn
index cfd5e0a3..d284fe4a 100644
--- a/examples/component-showcase/app/pages/components/timeline.wrn
+++ b/examples/component-showcase/app/pages/components/timeline.wrn
@@ -5,12 +5,12 @@ page TimelineDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Timeline example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default timeline for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"timeline-0-1\",\n    \"key\": \"timeline-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\": \"#timeline-demo\",\n    \"actionHref\": \"#timeline-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\": \"timeline-0-2\",\n    \"key\": \"timeline-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\": \"#timeline-demo\",\n    \"actionHref\": \"#timeline-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\":\"timeline-0-1\",\"key\":\"timeline-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#timeline-demo\",\"actionHref\":\"#timeline-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"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\":\"timeline-0-2\",\"key\":\"timeline-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#timeline-demo\",\"actionHref\":\"#timeline-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"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 = "Timeline"
-    description = "Theme-aware, responsive timeline component."
+    description = "Present responsive chronological activity, milestones, or workflow status with rich item metadata."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -20,17 +20,17 @@ page TimelineDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Base component</span>
         <h1>Timeline</h1>
-        <p>Theme-aware, responsive timeline component.</p>
+        <p>Present responsive chronological activity, milestones, or workflow status with rich item metadata.</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="Timeline" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Timeline" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Timeline</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="Timeline" 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><Timeline 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;Timeline
@@ -147,10 +147,11 @@ page TimelineDetail {
 /&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-timeline-size"><span><strong>size</strong><small>string</small></span><select id="playground-timeline-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-timeline-color"><span><strong>color</strong><small>string</small></span><select id="playground-timeline-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-timeline-title"><span><strong>title</strong><small>string</small></span><input id="playground-timeline-title" name="pg_title" type="text" value="Timeline example" /></label><label class="playground-field" for="playground-timeline-description"><span><strong>description</strong><small>string</small></span><input id="playground-timeline-description" name="pg_description" type="text" value="A polished default timeline for a modern application." /></label><label class="playground-field" for="playground-timeline-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-timeline-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+          <div class="playground-fields"><label class="playground-field" for="playground-timeline-size"><span><strong>size</strong><small>string</small></span><select id="playground-timeline-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-timeline-color"><span><strong>color</strong><small>string</small></span><select id="playground-timeline-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-timeline-title"><span><strong>title</strong><small>string</small></span><input id="playground-timeline-title" name="pg_title" type="text" value="Timeline example" /></label><label class="playground-field" for="playground-timeline-description"><span><strong>description</strong><small>string</small></span><input id="playground-timeline-description" name="pg_description" type="text" value="A polished default timeline for a modern application." /></label><label class="playground-field" for="playground-timeline-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-timeline-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
     "id": "timeline-0-1",
     "key": "timeline-0-1",
@@ -257,7 +258,7 @@ page TimelineDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-timeline-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-timeline-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="minimal">minimal</option></select></label><label class="playground-field" for="playground-timeline-class"><span><strong>class</strong><small>string</small></span><input id="playground-timeline-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-timeline-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-timeline-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-timeline-class"><span><strong>class</strong><small>string</small></span><input id="playground-timeline-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -266,125 +267,37 @@ page TimelineDetail {
         <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>Application timeline</h2><p>Explain the sequence and current status of a request or process.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="timeline-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="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="demo-render"><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>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Application timeline usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Timeline
-  title="Timeline example"
-  description="A polished default timeline for a modern application."
+  title="Request progress"
+  description="Latest updates for this service request."
   items='[
     &#123;
-      "id": "timeline-0-1",
-      "key": "timeline-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#timeline-demo",
-      "actionHref": "#timeline-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
+      "title": "Request submitted",
+      "description": "Received successfully",
       "time": "09:30",
-      "current": true,
-      "selected": true,
-      "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"
-      ]
+      "status": "complete"
     &#125;,
     &#123;
-      "id": "timeline-0-2",
-      "key": "timeline-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#timeline-demo",
-      "actionHref": "#timeline-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "title": "Verification",
+      "description": "Documents are being reviewed",
+      "time": "10:15",
+      "current": true
+    &#125;,
+    &#123;
+      "title": "Decision",
+      "description": "Pending verification",
+      "time": "—"
     &#125;
   ]'
 /&gt;</code></pre>
@@ -393,267 +306,86 @@ page TimelineDetail {
       </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 activity history</h2><p>Use a dense history inside drawers, side panels, and record views.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="timeline-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="Timeline" size="sm" title="Compact Timeline" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;timeline-1-1&quot;,&quot;key&quot;:&quot;timeline-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;#timeline-demo&quot;,&quot;actionHref&quot;:&quot;#timeline-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;timeline-1-2&quot;,&quot;key&quot;:&quot;timeline-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;#timeline-demo&quot;,&quot;actionHref&quot;:&quot;#timeline-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"><Timeline size="sm" title="Recent activity" description="A compact configuration for dashboards and dense product surfaces." items='[{"title":"Status changed","time":"Today"},{"title":"Comment added","time":"Yesterday"},{"title":"Document uploaded","time":"3 days ago"}]' 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 activity history usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Timeline
   size="sm"
-  title="Compact Timeline"
+  title="Recent activity"
   description="A compact configuration for dashboards and dense product surfaces."
   items='[
     &#123;
-      "id": "timeline-1-1",
-      "key": "timeline-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": "#timeline-demo",
-      "actionHref": "#timeline-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"
-      ]
+      "title": "Status changed",
+      "time": "Today"
     &#125;,
     &#123;
-      "id": "timeline-1-2",
-      "key": "timeline-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#timeline-demo",
-      "actionHref": "#timeline-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
+      "title": "Comment added",
+      "time": "Yesterday"
+    &#125;,
+    &#123;
+      "title": "Document uploaded",
+      "time": "3 days ago"
     &#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 milestone timeline</h2><p>Use icons, descriptions, times, and states for longer workflows.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="timeline-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="Timeline" size="lg" title="Advanced Timeline" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;timeline-2-1&quot;,&quot;key&quot;:&quot;timeline-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;#timeline-demo&quot;,&quot;actionHref&quot;:&quot;#timeline-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;timeline-2-2&quot;,&quot;key&quot;:&quot;timeline-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;#timeline-demo&quot;,&quot;actionHref&quot;:&quot;#timeline-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"><Timeline size="lg" title="Implementation milestones" description="Planned delivery sequence." items='[{"title":"Foundation","description":"Tokens, themes, and primitives","icon":"icon-[lucide--layers-3]","status":"complete"},{"title":"Components","description":"Reusable UI and documentation","icon":"icon-[lucide--blocks]","current":true},{"title":"Applications","description":"Compose production interfaces","icon":"icon-[lucide--rocket]"}]' 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 milestone timeline usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Timeline
   size="lg"
-  title="Advanced Timeline"
-  description="A richer configuration demonstrating additional content and hierarchy."
+  title="Implementation milestones"
+  description="Planned delivery sequence."
   items='[
     &#123;
-      "id": "timeline-2-1",
-      "key": "timeline-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": "#timeline-demo",
-      "actionHref": "#timeline-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"
-      ]
+      "title": "Foundation",
+      "description": "Tokens, themes, and primitives",
+      "icon": "icon-[lucide--layers-3]",
+      "status": "complete"
     &#125;,
     &#123;
-      "id": "timeline-2-2",
-      "key": "timeline-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": "#timeline-demo",
-      "actionHref": "#timeline-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        &#123;
-          "label": "Nested option A",
-          "value": "nested-a"
-        &#125;,
-        &#123;
-          "label": "Nested option B",
-          "value": "nested-b"
-        &#125;
-      ],
-      "links": [
-        &#123;
-          "label": "Documentation",
-          "href": "#documentation"
-        &#125;,
-        &#123;
-          "label": "API reference",
-          "href": "#api-reference"
-        &#125;
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
+      "title": "Components",
+      "description": "Reusable UI and documentation",
+      "icon": "icon-[lucide--blocks]",
+      "current": true
+    &#125;,
+    &#123;
+      "title": "Applications",
+      "description": "Compose production interfaces",
+      "icon": "icon-[lucide--rocket]"
     &#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>"Timeline"</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="#timeline-demo-1">Production default</a><a href="#timeline-demo-2">Compact application</a><a href="#timeline-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="#timeline-demo-1">Application timeline</a><a href="#timeline-demo-2">Compact activity history</a><a href="#timeline-demo-3">Rich milestone timeline</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/toast-notifications.wrn b/examples/component-showcase/app/pages/components/toast-notifications.wrn
index 056f430d..b0504788 100644
--- a/examples/component-showcase/app/pages/components/toast-notifications.wrn
+++ b/examples/component-showcase/app/pages/components/toast-notifications.wrn
@@ -5,7 +5,7 @@ page ToastNotificationsDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Toast Notifications example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default toast notifications for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"toast-notifications-0-1\",\n    \"key\": \"toast-notifications-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\": \"#toast-notifications-demo\",\n    \"actionHref\": \"#toast-notifications-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\": \"toast-notifications-0-2\",\n    \"key\": \"toast-notifications-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\": \"#toast-notifications-demo\",\n    \"actionHref\": \"#toast-notifications-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\":\"toast-notifications-0-1\",\"key\":\"toast-notifications-0-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-notifications-demo\",\"actionHref\":\"#toast-notifications-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"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-notifications-0-2\",\"key\":\"toast-notifications-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-notifications-demo\",\"actionHref\":\"#toast-notifications-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"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 ToastNotificationsDetail {
       </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="ToastNotifications" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="ToastNotifications" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="add,dismiss,clear,action">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Toast Notifications</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="ToastNotifications" 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><ToastNotifications 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;ToastNotifications
@@ -147,6 +147,7 @@ page ToastNotificationsDetail {
 /&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 ToastNotificationsDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-toast-notifications-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-toast-notifications-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-toast-notifications-class"><span><strong>class</strong><small>string</small></span><input id="playground-toast-notifications-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-toast-notifications-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-toast-notifications-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-toast-notifications-class"><span><strong>class</strong><small>string</small></span><input id="playground-toast-notifications-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page ToastNotificationsDetail {
         <div class="demo-workbench">
           <div id="toast-notifications-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="ToastNotifications" size="default" title="Toast Notifications example" description="A polished default toast notifications for a modern application." items="[{&quot;id&quot;:&quot;toast-notifications-0-1&quot;,&quot;key&quot;:&quot;toast-notifications-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-notifications-demo&quot;,&quot;actionHref&quot;:&quot;#toast-notifications-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-notifications-0-2&quot;,&quot;key&quot;:&quot;toast-notifications-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-notifications-demo&quot;,&quot;actionHref&quot;:&quot;#toast-notifications-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"><ToastNotifications size="default" title="Toast Notifications example" description="A polished default toast notifications for a modern application." items='[{"id":"toast-notifications-0-1","key":"toast-notifications-0-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-notifications-demo","actionHref":"#toast-notifications-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"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-notifications-0-2","key":"toast-notifications-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-notifications-demo","actionHref":"#toast-notifications-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"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 ToastNotificationsDetail {
         <div class="demo-workbench">
           <div id="toast-notifications-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="ToastNotifications" size="sm" title="Compact Toast Notifications" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;toast-notifications-1-1&quot;,&quot;key&quot;:&quot;toast-notifications-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;#toast-notifications-demo&quot;,&quot;actionHref&quot;:&quot;#toast-notifications-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;toast-notifications-1-2&quot;,&quot;key&quot;:&quot;toast-notifications-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;#toast-notifications-demo&quot;,&quot;actionHref&quot;:&quot;#toast-notifications-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"><ToastNotifications size="sm" title="Compact Toast Notifications" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"toast-notifications-1-1","key":"toast-notifications-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":"#toast-notifications-demo","actionHref":"#toast-notifications-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":"toast-notifications-1-2","key":"toast-notifications-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#toast-notifications-demo","actionHref":"#toast-notifications-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 ToastNotificationsDetail {
         <div class="demo-workbench">
           <div id="toast-notifications-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="ToastNotifications" size="lg" title="Advanced Toast Notifications" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;toast-notifications-2-1&quot;,&quot;key&quot;:&quot;toast-notifications-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;#toast-notifications-demo&quot;,&quot;actionHref&quot;:&quot;#toast-notifications-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;toast-notifications-2-2&quot;,&quot;key&quot;:&quot;toast-notifications-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;#toast-notifications-demo&quot;,&quot;actionHref&quot;:&quot;#toast-notifications-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"><ToastNotifications size="lg" title="Advanced Toast Notifications" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"toast-notifications-2-1","key":"toast-notifications-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":"#toast-notifications-demo","actionHref":"#toast-notifications-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":"toast-notifications-2-2","key":"toast-notifications-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":"#toast-notifications-demo","actionHref":"#toast-notifications-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 ToastNotificationsDetail {
           </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>@add</code><span>Fires when an item is added.</span></div><div><code>@dismiss</code><span>Fires when the component emits the dismiss event.</span></div><div><code>@clear</code><span>Fires after the current value or collection is cleared.</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>@add</code><span>Fires when the component emits the add event.</span></div><div><code>@dismiss</code><span>Fires after the announcement or feedback surface is dismissed.</span></div><div><code>@clear</code><span>Fires after the current value or selection is cleared.</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;ToastNotifications
+  @add='console.log(event.detail)'
+  @dismiss='console.log(event.detail)'
+  @clear='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=\"ToastNotifications\"], [data-component=\"ToastNotifications\"]")
 
-component.addEventListener('add', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("add", (event) =&gt; &#123;
+  console.log("add", event.detail)
+&#125;)
+
+component?.addEventListener("dismiss", (event) =&gt; &#123;
+  console.log("dismiss", event.detail)
+&#125;)
+
+component?.addEventListener("clear", (event) =&gt; &#123;
+  console.log("clear", 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>title</code></td><td>string</td><td><code>"Toast Notifications"</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">
diff --git a/examples/component-showcase/app/pages/components/toast.wrn b/examples/component-showcase/app/pages/components/toast.wrn
index 3aec1cab..03f9da0a 100644
--- a/examples/component-showcase/app/pages/components/toast.wrn
+++ b/examples/component-showcase/app/pages/components/toast.wrn
@@ -5,7 +5,7 @@ page ToastDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Toast example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default toast for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"toast-0-1\",\n    \"key\": \"toast-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\": \"#toast-demo\",\n    \"actionHref\": \"#toast-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\": \"toast-0-2\",\n    \"key\": \"toast-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\": \"#toast-demo\",\n    \"actionHref\": \"#toast-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\":\"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\"]}]")
   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 ToastDetail {
       </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="Toast" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Toast" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="dismiss,action">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Toast</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="Toast" 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><Toast 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;Toast
@@ -147,6 +147,7 @@ page ToastDetail {
 /&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 ToastDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-toast-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-toast-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-toast-class"><span><strong>class</strong><small>string</small></span><input id="playground-toast-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-toast-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-toast-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-toast-class"><span><strong>class</strong><small>string</small></span><input id="playground-toast-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page ToastDetail {
         <div class="demo-workbench">
           <div id="toast-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="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="demo-render"><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>
           <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 ToastDetail {
         <div class="demo-workbench">
           <div id="toast-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="Toast" size="sm" title="Compact Toast" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;toast-1-1&quot;,&quot;key&quot;:&quot;toast-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;#toast-demo&quot;,&quot;actionHref&quot;:&quot;#toast-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;toast-1-2&quot;,&quot;key&quot;:&quot;toast-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;#toast-demo&quot;,&quot;actionHref&quot;:&quot;#toast-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"><Toast size="sm" title="Compact Toast" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"toast-1-1","key":"toast-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":"#toast-demo","actionHref":"#toast-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":"toast-1-2","key":"toast-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#toast-demo","actionHref":"#toast-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 ToastDetail {
         <div class="demo-workbench">
           <div id="toast-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="Toast" size="lg" title="Advanced Toast" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;toast-2-1&quot;,&quot;key&quot;:&quot;toast-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;#toast-demo&quot;,&quot;actionHref&quot;:&quot;#toast-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;toast-2-2&quot;,&quot;key&quot;:&quot;toast-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;#toast-demo&quot;,&quot;actionHref&quot;:&quot;#toast-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"><Toast size="lg" title="Advanced Toast" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"toast-2-1","key":"toast-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":"#toast-demo","actionHref":"#toast-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":"toast-2-2","key":"toast-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":"#toast-demo","actionHref":"#toast-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 ToastDetail {
           </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><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>@dismiss</code><span>Fires after the announcement or feedback surface is dismissed.</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;Toast
+  @dismiss='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=\"Toast\"], [data-component=\"Toast\"]")
 
-component.addEventListener('dismiss', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("dismiss", (event) =&gt; &#123;
+  console.log("dismiss", 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>title</code></td><td>string</td><td><code>"Toast"</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">
diff --git a/examples/component-showcase/app/pages/components/toggle-count.wrn b/examples/component-showcase/app/pages/components/toggle-count.wrn
index cfd7d2c5..852dcaba 100644
--- a/examples/component-showcase/app/pages/components/toggle-count.wrn
+++ b/examples/component-showcase/app/pages/components/toggle-count.wrn
@@ -4,26 +4,26 @@ page ToggleCountDetail {
   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") ?? "segmented"
-  state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
-  state playground_name = ctx.url.searchParams.get("pg_name") ?? "pricing-cycle"
-  state playground_value = ctx.url.searchParams.get("pg_value") ?? "annual"
+  state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+  state playground_name = ctx.url.searchParams.get("pg_name") ?? "billing-cycle"
+  state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1"
   state playground_firstValue = ctx.url.searchParams.get("pg_firstValue") ?? "monthly"
-  state playground_firstLabel = ctx.url.searchParams.get("pg_firstLabel") ?? "Monthly"
+  state playground_firstLabel = ctx.url.searchParams.get("pg_firstLabel") ?? "Toggle Count"
   state playground_secondValue = ctx.url.searchParams.get("pg_secondValue") ?? "annual"
-  state playground_secondLabel = ctx.url.searchParams.get("pg_secondLabel") ?? "Annual"
-  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Billing frequency"
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"label\": \"Startup\",\n    \"monthly\": 19,\n    \"annual\": 190\n  },\n  {\n    \"label\": \"Team\",\n    \"monthly\": 89,\n    \"annual\": 890\n  },\n  {\n    \"label\": \"Enterprise\",\n    \"monthly\": 129,\n    \"annual\": 1290\n  }\n]"
+  state playground_secondLabel = ctx.url.searchParams.get("pg_secondLabel") ?? "Toggle Count"
+  state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Toggle Count 1 example"
+  state playground_items = JSON.parse(ctx.url.searchParams.get("pg_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\"]}]")
   state playground_currency = ctx.url.searchParams.get("pg_currency") ?? "$"
   state playground_suffix = ctx.url.searchParams.get("pg_suffix") ?? ""
   state playground_firstValueKey = ctx.url.searchParams.get("pg_firstValueKey") ?? "monthly"
   state playground_secondValueKey = ctx.url.searchParams.get("pg_secondValueKey") ?? "annual"
   state playground_emptyValue = ctx.url.searchParams.get("pg_emptyValue") ?? "—"
-  state playground_align = ctx.url.searchParams.get("pg_align") ?? "end"
-  state playground_fullWidth = ctx.url.searchParams.get("pg_fullWidth") ?? "true"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
-  state playground_animate = ctx.url.searchParams.get("pg_animate") ?? "true"
-  state playground_animationDuration = ctx.url.searchParams.get("pg_animationDuration") ?? "450"
-  state playground_animationSteps = ctx.url.searchParams.get("pg_animationSteps") ?? "18"
+  state playground_align = ctx.url.searchParams.get("pg_align") ?? "start"
+  state playground_fullWidth = (ctx.url.searchParams.get("pg_fullWidth") ?? "false") === "true"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  state playground_animate = (ctx.url.searchParams.get("pg_animate") ?? "true") === "true"
+  state playground_animationDuration = Number(ctx.url.searchParams.get("pg_animationDuration") ?? "450")
+  state playground_animationSteps = Number(ctx.url.searchParams.get("pg_animationSteps") ?? "18")
   seo {
     title = "Toggle Count"
     description = "Theme-aware, responsive toggle count component."
@@ -41,57 +41,244 @@ page ToggleCountDetail {
       </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="ToggleCount" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="ToggleCount" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="change,toggle">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Toggle Count</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="ToggleCount" size="{playground_size}" color="{playground_color}" variant="{playground_variant}" class="{playground_class}" name="{playground_name}" value="{playground_value}" firstValue="{playground_firstValue}" firstLabel="{playground_firstLabel}" secondValue="{playground_secondValue}" secondLabel="{playground_secondLabel}" ariaLabel="{playground_ariaLabel}" items="{playground_items}" currency="{playground_currency}" suffix="{playground_suffix}" firstValueKey="{playground_firstValueKey}" secondValueKey="{playground_secondValueKey}" emptyValue="{playground_emptyValue}" align="{playground_align}" fullWidth="{playground_fullWidth}" disabled="{playground_disabled}" animate="{playground_animate}" animationDuration="{playground_animationDuration}" animationSteps="{playground_animationSteps}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><ToggleCount size='{playground_size}' color='{playground_color}' variant='{playground_variant}' class='{playground_class}' name='{playground_name}' value='{playground_value}' firstValue='{playground_firstValue}' firstLabel='{playground_firstLabel}' secondValue='{playground_secondValue}' secondLabel='{playground_secondLabel}' ariaLabel='{playground_ariaLabel}' items='{playground_items}' currency='{playground_currency}' suffix='{playground_suffix}' firstValueKey='{playground_firstValueKey}' secondValueKey='{playground_secondValueKey}' emptyValue='{playground_emptyValue}' align='{playground_align}' fullWidth='{playground_fullWidth}' disabled='{playground_disabled}' animate='{playground_animate}' animationDuration='{playground_animationDuration}' animationSteps='{playground_animationSteps}' /></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;ToggleCount
-  name="pricing-cycle"
-  value="annual"
+  value="sample-1"
+  firstLabel="Toggle Count"
+  secondLabel="Toggle Count"
+  ariaLabel="Toggle Count 1 example"
   items='[
     &#123;
-      "label": "Startup",
-      "monthly": 19,
-      "annual": 190
+      "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": [
+        &#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": "Team",
-      "monthly": 89,
-      "annual": 890
-    &#125;,
-    &#123;
-      "label": "Enterprise",
-      "monthly": 129,
-      "annual": 1290
+      "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": [
+        &#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"
+  fullWidth="false"
 /&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-toggle-count-size"><span><strong>size</strong><small>string</small></span><select id="playground-toggle-count-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-toggle-count-color"><span><strong>color</strong><small>string</small></span><select id="playground-toggle-count-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-toggle-count-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-toggle-count-variant" name="pg_variant"><option value="segmented" selected>segmented</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="switch">switch</option></select></label><label class="playground-field" for="playground-toggle-count-class"><span><strong>class</strong><small>string</small></span><input id="playground-toggle-count-class" name="pg_class" type="text" value="" /></label><label class="playground-field" for="playground-toggle-count-name"><span><strong>name</strong><small>string</small></span><input id="playground-toggle-count-name" name="pg_name" type="text" value="pricing-cycle" /></label><label class="playground-field" for="playground-toggle-count-value"><span><strong>value</strong><small>string</small></span><input id="playground-toggle-count-value" name="pg_value" type="text" value="annual" /></label><label class="playground-field" for="playground-toggle-count-firstValue"><span><strong>first Value</strong><small>string</small></span><input id="playground-toggle-count-firstValue" name="pg_firstValue" type="text" value="monthly" /></label><label class="playground-field" for="playground-toggle-count-firstLabel"><span><strong>first Label</strong><small>string</small></span><input id="playground-toggle-count-firstLabel" name="pg_firstLabel" type="text" value="Monthly" /></label><label class="playground-field" for="playground-toggle-count-secondValue"><span><strong>second Value</strong><small>string</small></span><input id="playground-toggle-count-secondValue" name="pg_secondValue" type="text" value="annual" /></label><label class="playground-field" for="playground-toggle-count-secondLabel"><span><strong>second Label</strong><small>string</small></span><input id="playground-toggle-count-secondLabel" name="pg_secondLabel" type="text" value="Annual" /></label><label class="playground-field" for="playground-toggle-count-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-toggle-count-ariaLabel" name="pg_ariaLabel" type="text" value="Billing frequency" /></label><label class="playground-field" for="playground-toggle-count-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-toggle-count-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
+          <div class="playground-fields"><label class="playground-field" for="playground-toggle-count-size"><span><strong>size</strong><small>string</small></span><select id="playground-toggle-count-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-toggle-count-color"><span><strong>color</strong><small>string</small></span><select id="playground-toggle-count-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-toggle-count-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-toggle-count-variant" name="pg_variant" type="text" value="segmented" /></label><label class="playground-field" for="playground-toggle-count-class"><span><strong>class</strong><small>string</small></span><input id="playground-toggle-count-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label><label class="playground-field" for="playground-toggle-count-name"><span><strong>name</strong><small>string</small></span><input id="playground-toggle-count-name" name="pg_name" type="text" value="billing-cycle" /></label><label class="playground-field" for="playground-toggle-count-value"><span><strong>value</strong><small>string</small></span><input id="playground-toggle-count-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-toggle-count-firstValue"><span><strong>first Value</strong><small>string</small></span><input id="playground-toggle-count-firstValue" name="pg_firstValue" type="text" value="monthly" /></label><label class="playground-field" for="playground-toggle-count-firstLabel"><span><strong>first Label</strong><small>string</small></span><input id="playground-toggle-count-firstLabel" name="pg_firstLabel" type="text" value="Toggle Count" /></label><label class="playground-field" for="playground-toggle-count-secondValue"><span><strong>second Value</strong><small>string</small></span><input id="playground-toggle-count-secondValue" name="pg_secondValue" type="text" value="annual" /></label><label class="playground-field" for="playground-toggle-count-secondLabel"><span><strong>second Label</strong><small>string</small></span><input id="playground-toggle-count-secondLabel" name="pg_secondLabel" type="text" value="Toggle Count" /></label><label class="playground-field" for="playground-toggle-count-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-toggle-count-ariaLabel" name="pg_ariaLabel" type="text" value="Toggle Count 1 example" /></label><label class="playground-field" for="playground-toggle-count-items"><span><strong>items</strong><small>string</small></span><textarea id="playground-toggle-count-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
   {
-    "label": "Startup",
-    "monthly": 19,
-    "annual": 190
+    "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"
+    ]
   },
   {
-    "label": "Team",
-    "monthly": 89,
-    "annual": 890
-  },
-  {
-    "label": "Enterprise",
-    "monthly": 129,
-    "annual": 1290
+    "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"
+    ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-toggle-count-currency"><span><strong>currency</strong><small>string</small></span><input id="playground-toggle-count-currency" name="pg_currency" type="text" value="$" /></label><label class="playground-field" for="playground-toggle-count-suffix"><span><strong>suffix</strong><small>string</small></span><input id="playground-toggle-count-suffix" name="pg_suffix" type="text" value="" /></label><label class="playground-field" for="playground-toggle-count-firstValueKey"><span><strong>first Value Key</strong><small>string</small></span><input id="playground-toggle-count-firstValueKey" name="pg_firstValueKey" type="text" value="monthly" /></label><label class="playground-field" for="playground-toggle-count-secondValueKey"><span><strong>second Value Key</strong><small>string</small></span><input id="playground-toggle-count-secondValueKey" name="pg_secondValueKey" type="text" value="annual" /></label><label class="playground-field" for="playground-toggle-count-emptyValue"><span><strong>empty Value</strong><small>string</small></span><input id="playground-toggle-count-emptyValue" name="pg_emptyValue" type="text" value="—" /></label><label class="playground-field" for="playground-toggle-count-align"><span><strong>align</strong><small>string</small></span><select id="playground-toggle-count-align" name="pg_align"><option value="end" selected>end</option><option value="start">start</option><option value="center">center</option></select></label><label class="playground-toggle" for="playground-toggle-count-fullWidth"><span><strong>full Width</strong><small>boolean</small></span><input id="playground-toggle-count-fullWidth" name="pg_fullWidth" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-toggle-count-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-toggle-count-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-toggle-count-animate"><span><strong>animate</strong><small>boolean</small></span><input id="playground-toggle-count-animate" name="pg_animate" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-toggle-count-animationDuration"><span><strong>animation Duration</strong><small>number</small></span><input id="playground-toggle-count-animationDuration" name="pg_animationDuration" type="number" value="450" /></label><label class="playground-field" for="playground-toggle-count-animationSteps"><span><strong>animation Steps</strong><small>number</small></span><input id="playground-toggle-count-animationSteps" name="pg_animationSteps" type="number" value="18" /></label></div>
+]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-toggle-count-currency"><span><strong>currency</strong><small>string</small></span><input id="playground-toggle-count-currency" name="pg_currency" type="text" value="$" /></label><label class="playground-field" for="playground-toggle-count-suffix"><span><strong>suffix</strong><small>string</small></span><input id="playground-toggle-count-suffix" name="pg_suffix" type="text" value="" /></label><label class="playground-field" for="playground-toggle-count-firstValueKey"><span><strong>first Value Key</strong><small>string</small></span><input id="playground-toggle-count-firstValueKey" name="pg_firstValueKey" type="text" value="monthly" /></label><label class="playground-field" for="playground-toggle-count-secondValueKey"><span><strong>second Value Key</strong><small>string</small></span><input id="playground-toggle-count-secondValueKey" name="pg_secondValueKey" type="text" value="annual" /></label><label class="playground-field" for="playground-toggle-count-emptyValue"><span><strong>empty Value</strong><small>string</small></span><input id="playground-toggle-count-emptyValue" name="pg_emptyValue" type="text" value="—" /></label><label class="playground-field" for="playground-toggle-count-align"><span><strong>align</strong><small>string</small></span><select id="playground-toggle-count-align" name="pg_align"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="stretch">stretch</option></select></label><label class="playground-toggle" for="playground-toggle-count-fullWidth"><span><strong>full Width</strong><small>boolean</small></span><input id="playground-toggle-count-fullWidth" name="pg_fullWidth" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-toggle-count-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-toggle-count-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-toggle-count-animate"><span><strong>animate</strong><small>boolean</small></span><input id="playground-toggle-count-animate" name="pg_animate" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-toggle-count-animationDuration"><span><strong>animation Duration</strong><small>number</small></span><input id="playground-toggle-count-animationDuration" name="pg_animationDuration" type="number" value="450" /></label><label class="playground-field" for="playground-toggle-count-animationSteps"><span><strong>animation Steps</strong><small>number</small></span><input id="playground-toggle-count-animationSteps" name="pg_animationSteps" type="number" value="18" /></label></div>
         </form>
       </div>
     </section>
@@ -100,164 +287,418 @@ page ToggleCountDetail {
         <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">Pricing</span><h2>Monthly and annual pricing</h2><p>Compare plan prices with an aligned segmented control and clear selected state.</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="toggle-count-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="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="demo-render"><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>
-          <section class="demo-code" aria-label="Monthly and annual pricing 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;ToggleCount
-  name="pricing-cycle"
-  value="annual"
+  value="sample-1"
+  firstLabel="Toggle Count"
+  secondLabel="Toggle Count"
+  ariaLabel="Toggle Count 1 example"
   items='[
     &#123;
-      "label": "Startup",
-      "monthly": 19,
-      "annual": 190
+      "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": [
+        &#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": "Team",
-      "monthly": 89,
-      "annual": 890
-    &#125;,
-    &#123;
-      "label": "Enterprise",
-      "monthly": 129,
-      "annual": 1290
+      "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": [
+        &#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"
+  fullWidth="false"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Pricing</span><h2>Switch control</h2><p>Use a compact switch between labels while updating every displayed plan value.</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="toggle-count-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="ToggleCount" size="default" color="primary" variant="switch" name="pricing-switch" value="monthly" 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="center"></div></div>
+            
+            <div class="demo-render"><ToggleCount size="sm" variant="secondary" class="showcase-instance showcase-instance--2" value="sample-2" firstLabel="Compact example" secondLabel="Compact example" ariaLabel="Toggle Count 2 example" items='[{"id":"toggle-count-1-1","key":"toggle-count-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":"#toggle-count-demo","actionHref":"#toggle-count-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":"toggle-count-1-2","key":"toggle-count-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#toggle-count-demo","actionHref":"#toggle-count-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"]}]' align="center" fullWidth="false" disabled="false" animate="true" animationDuration="450" animationSteps="18" /></div>
           </div>
-          <section class="demo-code" aria-label="Switch control 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;ToggleCount
-  variant="switch"
-  name="pricing-switch"
+  size="sm"
+  variant="secondary"
+  value="sample-2"
+  firstLabel="Compact example"
+  secondLabel="Compact example"
+  ariaLabel="Toggle Count 2 example"
   items='[
     &#123;
-      "label": "Startup",
-      "monthly": 19,
-      "annual": 190
+      "id": "toggle-count-1-1",
+      "key": "toggle-count-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": "#toggle-count-demo",
+      "actionHref": "#toggle-count-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": "Team",
-      "monthly": 89,
-      "annual": 890
-    &#125;,
-    &#123;
-      "label": "Enterprise",
-      "monthly": 129,
-      "annual": 1290
+      "id": "toggle-count-1-2",
+      "key": "toggle-count-1-2",
+      "value": "secondary",
+      "label": "Additional option",
+      "title": "Supporting example",
+      "description": "A compact configuration designed for dense application layouts.",
+      "text": "Another configurable message.",
+      "href": "#toggle-count-demo",
+      "actionHref": "#toggle-count-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"
+  fullWidth="false"
 /&gt;</code></pre>
           </section>
         </div>
       </article>
       <article class="demo-case">
         <header class="demo-case-header">
-          <div><span class="demo-case-eyebrow">Configuration</span><h2>Custom billing periods</h2><p>Configure custom values, labels, currency, suffixes, and plan descriptions.</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="toggle-count-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="ToggleCount" size="default" color="primary" name="contract-length" value="quarterly" firstValue="quarterly" firstLabel="Quarterly" secondValue="yearly" secondLabel="Yearly" items="[{&quot;label&quot;:&quot;Core&quot;,&quot;description&quot;:&quot;For small product teams&quot;,&quot;quarterly&quot;:29,&quot;yearly&quot;:22},{&quot;label&quot;:&quot;Scale&quot;,&quot;description&quot;:&quot;For growing organizations&quot;,&quot;quarterly&quot;:79,&quot;yearly&quot;:62}]" currency="€" suffix="/seat" firstValueKey="quarterly" secondValueKey="yearly"></div></div>
+            
+            <div class="demo-render"><ToggleCount size="lg" variant="success" class="showcase-instance showcase-instance--3" value="sample-3" firstLabel="Advanced example" secondLabel="Advanced example" ariaLabel="Toggle Count 3 example" items='[{"id":"toggle-count-2-1","key":"toggle-count-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":"#toggle-count-demo","actionHref":"#toggle-count-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":"toggle-count-2-2","key":"toggle-count-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":"#toggle-count-demo","actionHref":"#toggle-count-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"]}]' align="end" fullWidth="true" disabled="false" animate="true" animationDuration="450" animationSteps="18" /></div>
           </div>
-          <section class="demo-code" aria-label="Custom billing periods 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;ToggleCount
-  name="contract-length"
-  value="quarterly"
-  firstValue="quarterly"
-  firstLabel="Quarterly"
-  secondValue="yearly"
-  secondLabel="Yearly"
+  size="lg"
+  variant="success"
+  value="sample-3"
+  firstLabel="Advanced example"
+  secondLabel="Advanced example"
+  ariaLabel="Toggle Count 3 example"
   items='[
     &#123;
-      "label": "Core",
-      "description": "For small product teams",
-      "quarterly": 29,
-      "yearly": 22
+      "id": "toggle-count-2-1",
+      "key": "toggle-count-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": "#toggle-count-demo",
+      "actionHref": "#toggle-count-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": "Scale",
-      "description": "For growing organizations",
-      "quarterly": 79,
-      "yearly": 62
+      "id": "toggle-count-2-2",
+      "key": "toggle-count-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": "#toggle-count-demo",
+      "actionHref": "#toggle-count-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;
   ]'
-  currency="€"
-  suffix="/seat"
-  firstValueKey="quarterly"
-  secondValueKey="yearly"
-/&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 pricing toggle</h2><p>Keep the current comparison visible while preventing billing-period changes.</p></div>
-          <span class="demo-case-number">04</span>
-        </header>
-        <div class="demo-workbench">
-          <div id="toggle-count-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="ToggleCount" size="default" color="primary" variant="segmented" name="disabled-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" disabled="true"></div></div>
-          </div>
-          <section class="demo-code" aria-label="Disabled pricing toggle usage">
-            <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
-            <pre><code>&lt;ToggleCount
-  name="disabled-pricing-cycle"
-  value="annual"
-  items='[
-    &#123;
-      "label": "Startup",
-      "monthly": 19,
-      "annual": 190
-    &#125;,
-    &#123;
-      "label": "Team",
-      "monthly": 89,
-      "annual": 890
-    &#125;,
-    &#123;
-      "label": "Enterprise",
-      "monthly": 129,
-      "annual": 1290
-    &#125;
-  ]'
-  disabled="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>@change</code><span>Fires when the component value or selection changes.</span></div><div><code>@toggle</code><span>Fires when the component toggles between states.</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>@toggle</code><span>Fires when the component changes between open and closed or on and off states.</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;ToggleCount
+  @change='console.log(event.detail)'
+  @toggle='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=\"ToggleCount\"], [data-component=\"ToggleCount\"]")
 
-component.addEventListener('change', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("toggle", (event) =&gt; &#123;
+  console.log("toggle", 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>"segmented"</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>name</code></td><td>string</td><td><code>"billing-cycle"</code></td><td>No</td></tr><tr><td><code>value</code></td><td>string</td><td><code>"monthly"</code></td><td>No</td></tr><tr><td><code>firstValue</code></td><td>string</td><td><code>"monthly"</code></td><td>No</td></tr><tr><td><code>firstLabel</code></td><td>string</td><td><code>"Monthly"</code></td><td>No</td></tr><tr><td><code>secondValue</code></td><td>string</td><td><code>"annual"</code></td><td>No</td></tr><tr><td><code>secondLabel</code></td><td>string</td><td><code>"Annual"</code></td><td>No</td></tr><tr><td><code>ariaLabel</code></td><td>string</td><td><code>"Billing frequency"</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>currency</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>firstValueKey</code></td><td>string</td><td><code>"monthly"</code></td><td>No</td></tr><tr><td><code>secondValueKey</code></td><td>string</td><td><code>"annual"</code></td><td>No</td></tr><tr><td><code>emptyValue</code></td><td>string</td><td><code>"—"</code></td><td>No</td></tr><tr><td><code>align</code></td><td>string</td><td><code>"end"</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>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>animate</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>animationDuration</code></td><td>number</td><td><code>450</code></td><td>No</td></tr><tr><td><code>animationSteps</code></td><td>number</td><td><code>18</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="#toggle-count-demo-1">Monthly and annual pricing</a><a href="#toggle-count-demo-2">Switch control</a><a href="#toggle-count-demo-3">Custom billing periods</a><a href="#toggle-count-demo-4">Disabled pricing toggle</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="#toggle-count-demo-1">Production default</a><a href="#toggle-count-demo-2">Compact application</a><a href="#toggle-count-demo-3">Rich configuration</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/toggle-password.wrn b/examples/component-showcase/app/pages/components/toggle-password.wrn
index 64ff2fa3..6ad4f2b4 100644
--- a/examples/component-showcase/app/pages/components/toggle-password.wrn
+++ b/examples/component-showcase/app/pages/components/toggle-password.wrn
@@ -11,17 +11,17 @@ page TogglePasswordDetail {
   state playground_minlength = ctx.url.searchParams.get("pg_minlength") ?? ""
   state playground_maxlength = ctx.url.searchParams.get("pg_maxlength") ?? "128"
   state playground_pattern = ctx.url.searchParams.get("pg_pattern") ?? "(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}"
-  state playground_fields = ctx.url.searchParams.get("pg_fields") ?? "[]"
-  state playground_visible = ctx.url.searchParams.get("pg_visible") ?? "false"
-  state playground_toggleable = ctx.url.searchParams.get("pg_toggleable") ?? "true"
+  state playground_fields = JSON.parse(ctx.url.searchParams.get("pg_fields") ?? "[]")
+  state playground_visible = (ctx.url.searchParams.get("pg_visible") ?? "false") === "true"
+  state playground_toggleable = (ctx.url.searchParams.get("pg_toggleable") ?? "true") === "true"
   state playground_toggleMode = ctx.url.searchParams.get("pg_toggleMode") ?? "button"
   state playground_checkboxLabel = ctx.url.searchParams.get("pg_checkboxLabel") ?? "Show password"
   state playground_showLabel = ctx.url.searchParams.get("pg_showLabel") ?? "Show password"
   state playground_hideLabel = ctx.url.searchParams.get("pg_hideLabel") ?? "Hide password"
-  state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
-  state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false"
-  state playground_required = ctx.url.searchParams.get("pg_required") ?? "false"
-  state playground_invalid = ctx.url.searchParams.get("pg_invalid") ?? "false"
+  state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
+  state playground_readonly = (ctx.url.searchParams.get("pg_readonly") ?? "false") === "true"
+  state playground_required = (ctx.url.searchParams.get("pg_required") ?? "false") === "true"
+  state playground_invalid = (ctx.url.searchParams.get("pg_invalid") ?? "false") === "true"
   state playground_helpText = ctx.url.searchParams.get("pg_helpText") ?? ""
   state playground_validationMessage = ctx.url.searchParams.get("pg_validationMessage") ?? ""
   state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
@@ -42,12 +42,12 @@ page TogglePasswordDetail {
       </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="TogglePassword" data-playground-public-tag="true" data-playground-has-slot="false">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="TogglePassword" data-playground-public-tag="true" data-playground-has-slot="false" data-playground-events="input,change,toggle">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Toggle Password</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="TogglePassword" size="{playground_size}" color="{playground_color}" label="{playground_label}" name="{playground_name}" value="{playground_value}" placeholder="{playground_placeholder}" autocomplete="{playground_autocomplete}" minlength="{playground_minlength}" maxlength="{playground_maxlength}" pattern="{playground_pattern}" fields="{playground_fields}" visible="{playground_visible}" toggleable="{playground_toggleable}" toggleMode="{playground_toggleMode}" checkboxLabel="{playground_checkboxLabel}" showLabel="{playground_showLabel}" hideLabel="{playground_hideLabel}" disabled="{playground_disabled}" readonly="{playground_readonly}" required="{playground_required}" invalid="{playground_invalid}" helpText="{playground_helpText}" validationMessage="{playground_validationMessage}" class="{playground_class}"></div></div>
+          <div class="playground-preview-source" data-playground-preview><TogglePassword size='{playground_size}' color='{playground_color}' label='{playground_label}' name='{playground_name}' value='{playground_value}' placeholder='{playground_placeholder}' autocomplete='{playground_autocomplete}' minlength='{playground_minlength}' maxlength='{playground_maxlength}' pattern='{playground_pattern}' fields='{playground_fields}' visible='{playground_visible}' toggleable='{playground_toggleable}' toggleMode='{playground_toggleMode}' checkboxLabel='{playground_checkboxLabel}' showLabel='{playground_showLabel}' hideLabel='{playground_hideLabel}' disabled='{playground_disabled}' readonly='{playground_readonly}' required='{playground_required}' invalid='{playground_invalid}' helpText='{playground_helpText}' 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;TogglePassword
@@ -58,10 +58,11 @@ page TogglePasswordDetail {
 /&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>24 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-toggle-password-size"><span><strong>size</strong><small>string</small></span><select id="playground-toggle-password-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-toggle-password-color"><span><strong>color</strong><small>string</small></span><select id="playground-toggle-password-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-toggle-password-label"><span><strong>label</strong><small>string</small></span><input id="playground-toggle-password-label" name="pg_label" type="text" value="Password" /></label><label class="playground-field" for="playground-toggle-password-name"><span><strong>name</strong><small>string</small></span><input id="playground-toggle-password-name" name="pg_name" type="text" value="toggle-password-1" /></label><label class="playground-field" for="playground-toggle-password-value"><span><strong>value</strong><small>string</small></span><input id="playground-toggle-password-value" name="pg_value" type="text" value="Northstar!2026" /></label><label class="playground-field" for="playground-toggle-password-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-toggle-password-placeholder" name="pg_placeholder" type="text" value="Enter your password" /></label><label class="playground-field" for="playground-toggle-password-autocomplete"><span><strong>autocomplete</strong><small>string</small></span><input id="playground-toggle-password-autocomplete" name="pg_autocomplete" type="text" value="current-password" /></label><label class="playground-field" for="playground-toggle-password-minlength"><span><strong>minlength</strong><small>string</small></span><input id="playground-toggle-password-minlength" name="pg_minlength" type="text" value="" /></label><label class="playground-field" for="playground-toggle-password-maxlength"><span><strong>maxlength</strong><small>string</small></span><input id="playground-toggle-password-maxlength" name="pg_maxlength" type="text" value="128" /></label><label class="playground-field" for="playground-toggle-password-pattern"><span><strong>pattern</strong><small>string</small></span><input id="playground-toggle-password-pattern" name="pg_pattern" type="text" value="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" /></label><label class="playground-field" for="playground-toggle-password-fields"><span><strong>fields</strong><small>string</small></span><textarea id="playground-toggle-password-fields" name="pg_fields" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-toggle-password-visible"><span><strong>visible</strong><small>boolean</small></span><input id="playground-toggle-password-visible" name="pg_visible" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-toggle-password-toggleable"><span><strong>toggleable</strong><small>boolean</small></span><input id="playground-toggle-password-toggleable" name="pg_toggleable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-toggle-password-toggleMode"><span><strong>toggle Mode</strong><small>string</small></span><select id="playground-toggle-password-toggleMode" name="pg_toggleMode"><option value="button" selected>button</option><option value="checkbox">checkbox</option></select></label><label class="playground-field" for="playground-toggle-password-checkboxLabel"><span><strong>checkbox Label</strong><small>string</small></span><input id="playground-toggle-password-checkboxLabel" name="pg_checkboxLabel" type="text" value="Show password" /></label><label class="playground-field" for="playground-toggle-password-showLabel"><span><strong>show Label</strong><small>string</small></span><input id="playground-toggle-password-showLabel" name="pg_showLabel" type="text" value="Show password" /></label><label class="playground-field" for="playground-toggle-password-hideLabel"><span><strong>hide Label</strong><small>string</small></span><input id="playground-toggle-password-hideLabel" name="pg_hideLabel" type="text" value="Hide password" /></label><label class="playground-toggle" for="playground-toggle-password-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-toggle-password-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-toggle-password-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-toggle-password-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-toggle-password-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-toggle-password-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-toggle-password-invalid"><span><strong>invalid</strong><small>boolean</small></span><input id="playground-toggle-password-invalid" name="pg_invalid" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-toggle-password-helpText"><span><strong>help Text</strong><small>string</small></span><input id="playground-toggle-password-helpText" name="pg_helpText" type="text" value="" /></label><label class="playground-field" for="playground-toggle-password-validationMessage"><span><strong>validation Message</strong><small>string</small></span><input id="playground-toggle-password-validationMessage" name="pg_validationMessage" type="text" value="" /></label><label class="playground-field" for="playground-toggle-password-class"><span><strong>class</strong><small>string</small></span><input id="playground-toggle-password-class" name="pg_class" type="text" value="" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-toggle-password-size"><span><strong>size</strong><small>string</small></span><select id="playground-toggle-password-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-toggle-password-color"><span><strong>color</strong><small>string</small></span><select id="playground-toggle-password-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-toggle-password-label"><span><strong>label</strong><small>string</small></span><input id="playground-toggle-password-label" name="pg_label" type="text" value="Password" /></label><label class="playground-field" for="playground-toggle-password-name"><span><strong>name</strong><small>string</small></span><input id="playground-toggle-password-name" name="pg_name" type="text" value="toggle-password-1" /></label><label class="playground-field" for="playground-toggle-password-value"><span><strong>value</strong><small>string</small></span><input id="playground-toggle-password-value" name="pg_value" type="text" value="Northstar!2026" /></label><label class="playground-field" for="playground-toggle-password-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-toggle-password-placeholder" name="pg_placeholder" type="text" value="Enter your password" /></label><label class="playground-field" for="playground-toggle-password-autocomplete"><span><strong>autocomplete</strong><small>string</small></span><input id="playground-toggle-password-autocomplete" name="pg_autocomplete" type="text" value="current-password" /></label><label class="playground-field" for="playground-toggle-password-minlength"><span><strong>minlength</strong><small>string</small></span><input id="playground-toggle-password-minlength" name="pg_minlength" type="text" value="" /></label><label class="playground-field" for="playground-toggle-password-maxlength"><span><strong>maxlength</strong><small>string</small></span><input id="playground-toggle-password-maxlength" name="pg_maxlength" type="text" value="128" /></label><label class="playground-field" for="playground-toggle-password-pattern"><span><strong>pattern</strong><small>string</small></span><input id="playground-toggle-password-pattern" name="pg_pattern" type="text" value="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" /></label><label class="playground-field" for="playground-toggle-password-fields"><span><strong>fields</strong><small>string</small></span><textarea id="playground-toggle-password-fields" name="pg_fields" rows="5" spellcheck="false" data-playground-json>[]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-toggle-password-visible"><span><strong>visible</strong><small>boolean</small></span><input id="playground-toggle-password-visible" name="pg_visible" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-toggle-password-toggleable"><span><strong>toggleable</strong><small>boolean</small></span><input id="playground-toggle-password-toggleable" name="pg_toggleable" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-toggle-password-toggleMode"><span><strong>toggle Mode</strong><small>string</small></span><input id="playground-toggle-password-toggleMode" name="pg_toggleMode" type="text" value="button" /></label><label class="playground-field" for="playground-toggle-password-checkboxLabel"><span><strong>checkbox Label</strong><small>string</small></span><input id="playground-toggle-password-checkboxLabel" name="pg_checkboxLabel" type="text" value="Show password" /></label><label class="playground-field" for="playground-toggle-password-showLabel"><span><strong>show Label</strong><small>string</small></span><input id="playground-toggle-password-showLabel" name="pg_showLabel" type="text" value="Show password" /></label><label class="playground-field" for="playground-toggle-password-hideLabel"><span><strong>hide Label</strong><small>string</small></span><input id="playground-toggle-password-hideLabel" name="pg_hideLabel" type="text" value="Hide password" /></label><label class="playground-toggle" for="playground-toggle-password-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-toggle-password-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-toggle-password-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-toggle-password-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-toggle-password-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-toggle-password-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-toggle-password-invalid"><span><strong>invalid</strong><small>boolean</small></span><input id="playground-toggle-password-invalid" name="pg_invalid" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-toggle-password-helpText"><span><strong>help Text</strong><small>string</small></span><input id="playground-toggle-password-helpText" name="pg_helpText" type="text" value="" /></label><label class="playground-field" for="playground-toggle-password-validationMessage"><span><strong>validation Message</strong><small>string</small></span><input id="playground-toggle-password-validationMessage" name="pg_validationMessage" type="text" value="" /></label><label class="playground-field" for="playground-toggle-password-class"><span><strong>class</strong><small>string</small></span><input id="playground-toggle-password-class" name="pg_class" type="text" value="" /></label></div>
         </form>
       </div>
     </section>
@@ -76,7 +77,8 @@ page TogglePasswordDetail {
         <div class="demo-workbench">
           <div id="toggle-password-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="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="demo-render"><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>
           <section class="demo-code" aria-label="Inline visibility button usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -97,7 +99,8 @@ page TogglePasswordDetail {
         <div class="demo-workbench">
           <div id="toggle-password-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="TogglePassword" size="default" label="Checkbox-controlled toggle" name="toggle-password-2" 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="checkbox" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage=""></div></div>
+            
+            <div class="demo-render"><TogglePassword size="default" label="Checkbox-controlled toggle" name="toggle-password-2" 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="checkbox" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Checkbox-controlled toggle 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 TogglePasswordDetail {
         <div class="demo-workbench">
           <div id="toggle-password-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="TogglePassword" size="default" label="Passwords" name="toggle-password-3" value="" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields="[{&quot;label&quot;:&quot;New password&quot;,&quot;name&quot;:&quot;new-password&quot;,&quot;placeholder&quot;:&quot;Enter new password&quot;,&quot;autocomplete&quot;:&quot;new-password&quot;},{&quot;label&quot;:&quot;Current password&quot;,&quot;name&quot;:&quot;current-password&quot;,&quot;value&quot;:&quot;Northstar!2026&quot;,&quot;autocomplete&quot;:&quot;current-password&quot;}]" visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage=""></div></div>
+            
+            <div class="demo-render"><TogglePassword size="default" label="Passwords" name="toggle-password-3" value="" placeholder="Enter your password" autocomplete="current-password" minlength="" maxlength="128" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{8,}" fields='[{"label":"New password","name":"new-password","placeholder":"Enter new password","autocomplete":"new-password"},{"label":"Current password","name":"current-password","value":"Northstar!2026","autocomplete":"current-password"}]' visible="false" toggleable="true" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Synchronized password fields usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -154,7 +158,8 @@ page TogglePasswordDetail {
         <div class="demo-workbench">
           <div id="toggle-password-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="TogglePassword" size="default" label="Without visibility toggle" name="toggle-password-4" value="" 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="false" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage=""></div></div>
+            
+            <div class="demo-render"><TogglePassword size="default" label="Without visibility toggle" name="toggle-password-4" value="" 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="false" toggleMode="button" checkboxLabel="Show password" disabled="false" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Without visibility toggle usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -176,7 +181,8 @@ page TogglePasswordDetail {
         <div class="demo-workbench">
           <div id="toggle-password-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="TogglePassword" size="default" label="Supporting help text" name="toggle-password-5" value="" 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="Use at least eight characters and avoid passwords used on other sites." validationMessage=""></div></div>
+            
+            <div class="demo-render"><TogglePassword size="default" label="Supporting help text" name="toggle-password-5" value="" 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="Use at least eight characters and avoid passwords used on other sites." 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>
@@ -198,7 +204,8 @@ page TogglePasswordDetail {
         <div class="demo-workbench">
           <div id="toggle-password-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"><form data-schema="toggle-password-validation" class="demo-validation-form"><div data-component="TogglePassword" size="default" label="Required validation" name="toggle-password-6" value="" placeholder="Enter your password" autocomplete="current-password" minlength="8" 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="true" invalid="false" helpText="" validationMessage=""></div><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
+            
+            <div class="demo-render"><form data-schema="toggle-password-validation" class="demo-validation-form"><TogglePassword size="default" label="Required validation" name="toggle-password-6" value="" placeholder="Enter your password" autocomplete="current-password" minlength="8" 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="true" invalid="false" helpText="" validationMessage="" /><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
           </div>
           <section class="demo-code" aria-label="Required validation usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -221,7 +228,8 @@ page TogglePasswordDetail {
         <div class="demo-workbench">
           <div id="toggle-password-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="TogglePassword" size="default" label="Disabled password" name="toggle-password-7" value="" 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="true" readonly="false" required="false" invalid="false" helpText="" validationMessage=""></div></div>
+            
+            <div class="demo-render"><TogglePassword size="default" label="Disabled password" name="toggle-password-7" value="" 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="true" readonly="false" required="false" invalid="false" helpText="" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Disabled password usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -243,7 +251,8 @@ page TogglePasswordDetail {
         <div class="demo-workbench">
           <div id="toggle-password-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="TogglePassword" size="default" label="Read-only password" name="toggle-password-8" 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="true" required="false" invalid="false" helpText="" validationMessage=""></div></div>
+            
+            <div class="demo-render"><TogglePassword size="default" label="Read-only password" name="toggle-password-8" 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="true" required="false" invalid="false" helpText="" validationMessage="" /></div>
           </div>
           <section class="demo-code" aria-label="Read-only password usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -266,7 +275,8 @@ page TogglePasswordDetail {
         <div class="demo-workbench">
           <div id="toggle-password-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="TogglePassword" size="lg" label="Large password field" name="toggle-password-9" value="" 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="demo-render"><TogglePassword size="lg" label="Large password field" name="toggle-password-9" value="" 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>
           <section class="demo-code" aria-label="Large password field usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -288,7 +298,8 @@ page TogglePasswordDetail {
         <div class="demo-workbench">
           <div id="toggle-password-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="TogglePassword" size="default" label="Toggle events" name="toggle-password-10" value="" 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="demo-render"><TogglePassword size="default" label="Toggle events" name="toggle-password-10" value="" 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>
           <section class="demo-code" aria-label="Toggle events usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
@@ -301,11 +312,23 @@ page TogglePasswordDetail {
           </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>@toggle</code><span>Fires when the component toggles between states.</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>@toggle</code><span>Fires when the component changes between open and closed or on and off states.</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;TogglePassword
+  @input='console.log(event.detail)'
+  @change='console.log(event.detail)'
+  @toggle='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=\"TogglePassword\"], [data-component=\"TogglePassword\"]")
 
-component.addEventListener('input', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("toggle", (event) =&gt; &#123;
+  console.log("toggle", 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>"Password"</code></td><td>No</td></tr><tr><td><code>name</code></td><td>string</td><td><code>"password"</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>"Enter your password"</code></td><td>No</td></tr><tr><td><code>autocomplete</code></td><td>string</td><td><code>"current-password"</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>"(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).&#123;8,&#125;"</code></td><td>No</td></tr><tr><td><code>fields</code></td><td>string</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>visible</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>toggleable</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>toggleMode</code></td><td>string</td><td><code>"button"</code></td><td>No</td></tr><tr><td><code>checkboxLabel</code></td><td>string</td><td><code>"Show password"</code></td><td>No</td></tr><tr><td><code>showLabel</code></td><td>string</td><td><code>"Show password"</code></td><td>No</td></tr><tr><td><code>hideLabel</code></td><td>string</td><td><code>"Hide password"</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>invalid</code></td><td>boolean</td><td><code>false</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>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">
diff --git a/examples/component-showcase/app/pages/components/tooltip.wrn b/examples/component-showcase/app/pages/components/tooltip.wrn
index a86abfde..ee32df96 100644
--- a/examples/component-showcase/app/pages/components/tooltip.wrn
+++ b/examples/component-showcase/app/pages/components/tooltip.wrn
@@ -1,17 +1,26 @@
 // Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page TooltipDetail {
   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") ?? ""
+  state playground_open = (ctx.url.searchParams.get("pg_open") ?? "false") === "true"
+  state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Tooltip example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default tooltip for a modern application."
-  state playground_open = ctx.url.searchParams.get("pg_open") ?? "true"
-  state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "bottom"
-  state playground_closeLabel = ctx.url.searchParams.get("pg_closeLabel") ?? "Tooltip"
+  state playground_content = ctx.url.searchParams.get("pg_content") ?? "Hover or focus the trigger to inspect the tooltip."
+  state playground_trigger = ctx.url.searchParams.get("pg_trigger") ?? "hover"
+  state playground_placement = ctx.url.searchParams.get("pg_placement") ?? "top"
+  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") ?? "dark"
+  state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "18rem"
+  state playground_offset = Number(ctx.url.searchParams.get("pg_offset") ?? "10")
+  state playground_showArrow = (ctx.url.searchParams.get("pg_showArrow") ?? "true") === "true"
+  state playground_interactive = (ctx.url.searchParams.get("pg_interactive") ?? "false") === "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 = "Tooltip"
-    description = "Theme-aware, responsive tooltip component."
+    description = "Show concise accessible contextual help on hover, focus, click, or controlled open state."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -21,32 +30,33 @@ page TooltipDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Overlays component</span>
         <h1>Tooltip</h1>
-        <p>Theme-aware, responsive tooltip component.</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>
+        <p>Show concise accessible contextual help on hover, focus, click, or controlled open state.</p>
+        <div class="detail-badges"><span>17 props</span><span>2 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="Tooltip" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Tooltip" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="toggle,open,close">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Tooltip</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="Tooltip" size="{playground_size}" color="{playground_color}" title="{playground_title}" description="{playground_description}" open="{playground_open}" placement="{playground_placement}" closeLabel="{playground_closeLabel}" class="{playground_class}"><button type="button" class="wire-btn wire-btn--secondary">Hover for details</button></div></div>
+          <div class="playground-preview-source" data-playground-preview><Tooltip id='{playground_id}' open='{playground_open}' defaultOpen='{playground_defaultOpen}' title='{playground_title}' description='{playground_description}' content='{playground_content}' trigger='{playground_trigger}' placement='{playground_placement}' size='{playground_size}' color='{playground_color}' variant='{playground_variant}' maxWidth='{playground_maxWidth}' offset='{playground_offset}' showArrow='{playground_showArrow}' interactive='{playground_interactive}' disabled='{playground_disabled}' class='{playground_class}'><div data-slot="trigger"><button type="button" class="showcase-action">Hover or focus</button></div></Tooltip></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;Tooltip
   title="Tooltip example"
-  description="A polished default tooltip for a modern application."
-  open="true"
-  closeLabel="Tooltip"&gt;
-  &lt;!-- Add default slot content here --&gt;
+  description="A polished default tooltip for a modern application."&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;div class="showcase-slot"&gt;trigger slot&lt;/div&gt;
+  &lt;/div&gt;
 &lt;/Tooltip&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-tooltip-size"><span><strong>size</strong><small>string</small></span><select id="playground-tooltip-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-tooltip-color"><span><strong>color</strong><small>string</small></span><select id="playground-tooltip-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-tooltip-title"><span><strong>title</strong><small>string</small></span><input id="playground-tooltip-title" name="pg_title" type="text" value="Tooltip example" /></label><label class="playground-field" for="playground-tooltip-description"><span><strong>description</strong><small>string</small></span><input id="playground-tooltip-description" name="pg_description" type="text" value="A polished default tooltip for a modern application." /></label><label class="playground-toggle" for="playground-tooltip-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-tooltip-open" name="pg_open" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-tooltip-placement"><span><strong>placement</strong><small>string</small></span><input id="playground-tooltip-placement" name="pg_placement" type="text" value="bottom" /></label><label class="playground-field" for="playground-tooltip-closeLabel"><span><strong>close Label</strong><small>string</small></span><input id="playground-tooltip-closeLabel" name="pg_closeLabel" type="text" value="Tooltip" /></label><label class="playground-field" for="playground-tooltip-class"><span><strong>class</strong><small>string</small></span><input id="playground-tooltip-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <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-tooltip-id"><span><strong>id</strong><small>string</small></span><input id="playground-tooltip-id" name="pg_id" type="text" value="" /></label><label class="playground-toggle" for="playground-tooltip-open"><span><strong>open</strong><small>boolean</small></span><input id="playground-tooltip-open" name="pg_open" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-tooltip-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-tooltip-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-tooltip-title"><span><strong>title</strong><small>string</small></span><input id="playground-tooltip-title" name="pg_title" type="text" value="Tooltip example" /></label><label class="playground-field" for="playground-tooltip-description"><span><strong>description</strong><small>string</small></span><input id="playground-tooltip-description" name="pg_description" type="text" value="A polished default tooltip for a modern application." /></label><label class="playground-field" for="playground-tooltip-content"><span><strong>content</strong><small>string</small></span><input id="playground-tooltip-content" name="pg_content" type="text" value="Hover or focus the trigger to inspect the tooltip." /></label><label class="playground-field" for="playground-tooltip-trigger"><span><strong>trigger</strong><small>string</small></span><select id="playground-tooltip-trigger" name="pg_trigger"><option value="hover" selected>hover</option><option value="focus">focus</option><option value="click">click</option><option value="both">both</option><option value="manual">manual</option></select></label><label class="playground-field" for="playground-tooltip-placement"><span><strong>placement</strong><small>string</small></span><select id="playground-tooltip-placement" name="pg_placement"><option value="top" selected>top</option><option value="top-start">top-start</option><option value="top-end">top-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="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-tooltip-size"><span><strong>size</strong><small>string</small></span><select id="playground-tooltip-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-tooltip-color"><span><strong>color</strong><small>string</small></span><select id="playground-tooltip-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-tooltip-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-tooltip-variant" name="pg_variant"><option value="dark" selected>dark</option><option value="light">light</option><option value="soft">soft</option><option value="solid">solid</option></select></label><label class="playground-field" for="playground-tooltip-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-tooltip-maxWidth" name="pg_maxWidth"><option value="18rem" selected>18rem</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><option value="full">full</option></select></label><label class="playground-field" for="playground-tooltip-offset"><span><strong>offset</strong><small>number</small></span><input id="playground-tooltip-offset" name="pg_offset" type="number" value="10" /></label><label class="playground-toggle" for="playground-tooltip-showArrow"><span><strong>show Arrow</strong><small>boolean</small></span><input id="playground-tooltip-showArrow" name="pg_showArrow" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-tooltip-interactive"><span><strong>interactive</strong><small>boolean</small></span><input id="playground-tooltip-interactive" name="pg_interactive" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-tooltip-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-tooltip-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-tooltip-class"><span><strong>class</strong><small>string</small></span><input id="playground-tooltip-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -55,81 +65,109 @@ page TooltipDetail {
         <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>Hover and focus tooltip</h2><p>Explain an unfamiliar control without interrupting the workflow.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="tooltip-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="Tooltip" size="default" title="Tooltip example" description="A polished default tooltip for a modern application." open="true" closeLabel="Tooltip" class="showcase-instance showcase-instance--1"><button type="button" class="wire-btn wire-btn--secondary">Hover for details</button></div></div>
+            <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Hover, focus, or click the trigger</p>
+            <div class="demo-render"><Tooltip id="help-tooltip" open="false" defaultOpen="false" title="Helpful information" description="A polished default tooltip for a modern application." content="Tooltips explain controls without interrupting the user." placement="top" size="default" variant="dark" offset="10" showArrow="true" interactive="false" disabled="false" class="showcase-instance showcase-instance--1"><div data-slot="trigger"><button type="button" class="showcase-action">Hover or focus</button></div></Tooltip></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Hover and focus 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;Tooltip
-  title="Tooltip example"
+  id="help-tooltip"
+  title="Helpful information"
   description="A polished default tooltip for a modern application."
-  open="true"
-  closeLabel="Tooltip"&gt;
-  &lt;!-- Add default slot content here --&gt;
+  content="Tooltips explain controls without interrupting the user."&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;button type="button" class="showcase-action"&gt;Hover or focus&lt;/button&gt;
+  &lt;/div&gt;
 &lt;/Tooltip&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 tooltip</h2><p>Use click activation for touch-first or interactive help.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="tooltip-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="Tooltip" size="sm" title="Compact Tooltip" description="A compact configuration for dashboards and dense product surfaces." open="true" closeLabel="Compact example" class="showcase-instance showcase-instance--2"><button type="button" class="wire-btn wire-btn--secondary">Hover for details</button></div></div>
+            <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Hover, focus, or click the trigger</p>
+            <div class="demo-render"><Tooltip id="click-tooltip" open="false" defaultOpen="false" title="Compact Tooltip" description="A compact configuration for dashboards and dense product surfaces." content="Click again or press Escape to close." trigger="click" placement="bottom" size="sm" variant="soft" offset="10" showArrow="true" interactive="false" disabled="false" class="showcase-instance showcase-instance--2"><div data-slot="trigger"><button type="button" class="showcase-action">Click for help</button></div></Tooltip></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Click 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;Tooltip
-  size="sm"
+  id="click-tooltip"
   title="Compact Tooltip"
   description="A compact configuration for dashboards and dense product surfaces."
-  open="true"
-  closeLabel="Compact example"&gt;
-  &lt;!-- Add default slot content here --&gt;
+  content="Click again or press Escape to close."
+  trigger="click"
+  placement="bottom"
+  size="sm"
+  variant="soft"&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;button type="button" class="showcase-action"&gt;Click for help&lt;/button&gt;
+  &lt;/div&gt;
 &lt;/Tooltip&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>Interactive rich tooltip</h2><p>Allow pointer interaction when the tooltip contains supporting links or controls.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="tooltip-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="Tooltip" size="lg" title="Advanced Tooltip" description="A richer configuration demonstrating additional content and hierarchy." open="true" closeLabel="Advanced example" class="showcase-instance showcase-instance--3"><button type="button" class="wire-btn wire-btn--secondary">Hover for details</button></div></div>
+            <p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Hover, focus, or click the trigger</p>
+            <div class="demo-render"><Tooltip id="interactive-tooltip" open="false" defaultOpen="false" title="Keyboard shortcut" description="Open global search from anywhere." content="Press Ctrl or Command plus K." trigger="both" placement="right" size="lg" variant="dark" maxWidth="22rem" offset="10" showArrow="true" interactive="true" disabled="false" class="showcase-instance showcase-instance--3"><div data-slot="trigger"><button type="button" class="showcase-action">Show shortcut</button></div></Tooltip></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Interactive rich 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;Tooltip
+  id="interactive-tooltip"
+  title="Keyboard shortcut"
+  description="Open global search from anywhere."
+  content="Press Ctrl or Command plus K."
+  trigger="both"
+  placement="right"
   size="lg"
-  title="Advanced Tooltip"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  open="true"
-  closeLabel="Advanced example"&gt;
-  &lt;!-- Add default slot content here --&gt;
+  maxWidth="22rem"
+  interactive="true"&gt;
+  &lt;div data-slot="trigger"&gt;
+    &lt;button type="button" class="showcase-action"&gt;Show shortcut&lt;/button&gt;
+  &lt;/div&gt;
 &lt;/Tooltip&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><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;Tooltip
+  @toggle='console.log(event.detail)'
+  @open='console.log(event.detail)'
+  @close='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=\"Tooltip\"], [data-component=\"Tooltip\"]")
 
-component.addEventListener('open', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
-        <section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>title</code></td><td>string</td><td><code>"Tooltip"</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("toggle", (event) =&gt; &#123;
+  console.log("toggle", 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;)</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>id</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>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>content</code></td><td>string</td><td><code>"Tooltip"</code></td><td>No</td></tr><tr><td><code>trigger</code></td><td>string</td><td><code>"hover"</code></td><td>No</td></tr><tr><td><code>placement</code></td><td>string</td><td><code>"top"</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>"dark"</code></td><td>No</td></tr><tr><td><code>maxWidth</code></td><td>string</td><td><code>"18rem"</code></td><td>No</td></tr><tr><td><code>offset</code></td><td>number</td><td><code>10</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>interactive</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>disabled</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#tooltip-demo-1">Production default</a><a href="#tooltip-demo-2">Compact application</a><a href="#tooltip-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="#tooltip-demo-1">Hover and focus tooltip</a><a href="#tooltip-demo-2">Click tooltip</a><a href="#tooltip-demo-3">Interactive rich tooltip</a><a href="#events">Events</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
diff --git a/examples/component-showcase/app/pages/components/tree-view.wrn b/examples/component-showcase/app/pages/components/tree-view.wrn
index 7014bcba..14534f41 100644
--- a/examples/component-showcase/app/pages/components/tree-view.wrn
+++ b/examples/component-showcase/app/pages/components/tree-view.wrn
@@ -5,7 +5,7 @@ page TreeViewDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Tree View example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default tree view for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"tree-view-0-1\",\n    \"key\": \"tree-view-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\": \"#tree-view-demo\",\n    \"actionHref\": \"#tree-view-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\": \"tree-view-0-2\",\n    \"key\": \"tree-view-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\": \"#tree-view-demo\",\n    \"actionHref\": \"#tree-view-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\":\"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\"]}]")
   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 TreeViewDetail {
       </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="TreeView" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="TreeView" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="select,toggle,expand,collapse">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Tree View</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="TreeView" 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><TreeView 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;TreeView
@@ -147,6 +147,7 @@ page TreeViewDetail {
 /&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 TreeViewDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-tree-view-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-tree-view-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-tree-view-class"><span><strong>class</strong><small>string</small></span><input id="playground-tree-view-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-tree-view-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-tree-view-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-tree-view-class"><span><strong>class</strong><small>string</small></span><input id="playground-tree-view-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page TreeViewDetail {
         <div class="demo-workbench">
           <div id="tree-view-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="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="demo-render"><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>
           <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 TreeViewDetail {
         <div class="demo-workbench">
           <div id="tree-view-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="TreeView" size="sm" title="Compact Tree View" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;tree-view-1-1&quot;,&quot;key&quot;:&quot;tree-view-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;#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--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;tree-view-1-2&quot;,&quot;key&quot;:&quot;tree-view-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;#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--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"><TreeView size="sm" title="Compact Tree View" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"tree-view-1-1","key":"tree-view-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":"#tree-view-demo","actionHref":"#tree-view-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":"tree-view-1-2","key":"tree-view-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#tree-view-demo","actionHref":"#tree-view-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 TreeViewDetail {
         <div class="demo-workbench">
           <div id="tree-view-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="TreeView" size="lg" title="Advanced Tree View" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;tree-view-2-1&quot;,&quot;key&quot;:&quot;tree-view-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;#tree-view-demo&quot;,&quot;actionHref&quot;:&quot;#tree-view-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;tree-view-2-2&quot;,&quot;key&quot;:&quot;tree-view-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;#tree-view-demo&quot;,&quot;actionHref&quot;:&quot;#tree-view-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"><TreeView size="lg" title="Advanced Tree View" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"tree-view-2-1","key":"tree-view-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":"#tree-view-demo","actionHref":"#tree-view-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":"tree-view-2-2","key":"tree-view-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":"#tree-view-demo","actionHref":"#tree-view-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 TreeViewDetail {
           </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>@toggle</code><span>Fires when the component toggles between states.</span></div><div><code>@expand</code><span>Fires when the component emits the expand event.</span></div><div><code>@collapse</code><span>Fires when the component emits the collapse 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>@toggle</code><span>Fires when the component changes between open and closed or on and off states.</span></div><div><code>@expand</code><span>Fires when the component emits the expand event.</span></div><div><code>@collapse</code><span>Fires when the component emits the collapse 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;TreeView
+  @select='console.log(event.detail)'
+  @toggle='console.log(event.detail)'
+  @expand='console.log(event.detail)'
+  @collapse='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=\"TreeView\"], [data-component=\"TreeView\"]")
 
-component.addEventListener('select', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("select", (event) =&gt; &#123;
+  console.log("select", event.detail)
+&#125;)
+
+component?.addEventListener("toggle", (event) =&gt; &#123;
+  console.log("toggle", event.detail)
+&#125;)
+
+component?.addEventListener("expand", (event) =&gt; &#123;
+  console.log("expand", event.detail)
+&#125;)
+
+component?.addEventListener("collapse", (event) =&gt; &#123;
+  console.log("collapse", 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>"Tree View"</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">
diff --git a/examples/component-showcase/app/pages/components/typography.wrn b/examples/component-showcase/app/pages/components/typography.wrn
index cdfe7b35..45aef5cc 100644
--- a/examples/component-showcase/app/pages/components/typography.wrn
+++ b/examples/component-showcase/app/pages/components/typography.wrn
@@ -3,13 +3,13 @@ page TypographyDetail {
   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 = "Typography"
-    description = "Theme-aware, responsive typography component."
+    description = "Apply consistent readable responsive typography, widths, columns, spacing, and editorial hierarchy."
   }
   view {
     <nav class="docs-breadcrumbs" aria-label="Breadcrumb">
@@ -19,28 +19,29 @@ page TypographyDetail {
       <div class="detail-hero-copy">
         <span class="showcase-eyebrow">Layout component</span>
         <h1>Typography</h1>
-        <p>Theme-aware, responsive typography component.</p>
+        <p>Apply consistent readable responsive typography, widths, columns, spacing, and editorial hierarchy.</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="Typography" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="Typography" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Typography</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="Typography" 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><Typography size='{playground_size}' color='{playground_color}' columns='{playground_columns}' gap='{playground_gap}' maxWidth='{playground_maxWidth}' class='{playground_class}'><div class="showcase-typography"><h2>Readable page content</h2><p>Typography creates consistent hierarchy and comfortable reading rhythm.</p><ul><li>Clear headings</li><li>Readable paragraphs</li><li>Consistent lists</li></ul></div></Typography></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;Typography&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;/Typography&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-typography-size"><span><strong>size</strong><small>string</small></span><select id="playground-typography-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-typography-color"><span><strong>color</strong><small>string</small></span><select id="playground-typography-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-typography-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-typography-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-typography-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-typography-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-field" for="playground-typography-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-typography-maxWidth" name="pg_maxWidth"><option value="xl" selected>xl</option><option value="md">md</option><option value="lg">lg</option><option value="full">full</option></select></label><label class="playground-field" for="playground-typography-class"><span><strong>class</strong><small>string</small></span><input id="playground-typography-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
+          <div class="playground-fields"><label class="playground-field" for="playground-typography-size"><span><strong>size</strong><small>string</small></span><select id="playground-typography-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-typography-color"><span><strong>color</strong><small>string</small></span><select id="playground-typography-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-typography-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-typography-columns" name="pg_columns" type="number" value="2" /></label><label class="playground-field" for="playground-typography-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-typography-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><option value="none">none</option><option value="xs">xs</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-typography-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-typography-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-typography-class"><span><strong>class</strong><small>string</small></span><input id="playground-typography-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -49,69 +50,75 @@ page TypographyDetail {
         <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>Readable content typography</h2><p>Apply consistent typography to headings, paragraphs, lists, and inline content.</p></div>
           <span class="demo-case-number">01</span>
         </header>
         <div class="demo-workbench">
           <div id="typography-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="Typography" 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"><Typography size="default" columns="2" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-typography"><h2>Readable page content</h2><p>Typography creates consistent hierarchy and comfortable reading rhythm.</p><ul><li>Clear headings</li><li>Readable paragraphs</li><li>Consistent lists</li></ul></div></Typography></div>
           </div>
-          <section class="demo-code" aria-label="Production default usage">
+          <section class="demo-code" aria-label="Readable content typography usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Typography&gt;
-  &lt;!-- Add default slot content here --&gt;
+  &lt;div class="showcase-typography"&gt;&lt;h2&gt;Readable page content&lt;/h2&gt;&lt;p&gt;Typography creates consistent hierarchy and comfortable reading rhythm.&lt;/p&gt;&lt;ul&gt;&lt;li&gt;Clear headings&lt;/li&gt;&lt;li&gt;Readable paragraphs&lt;/li&gt;&lt;li&gt;Consistent lists&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;
 &lt;/Typography&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 documentation typography</h2><p>Use reduced spacing in reference pages and dense product help.</p></div>
           <span class="demo-case-number">02</span>
         </header>
         <div class="demo-workbench">
           <div id="typography-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="Typography" 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"><Typography size="compact" columns="2" maxWidth="compact" class="showcase-instance showcase-instance--2"><div class="showcase-typography"><h3>Compact reference</h3><p>Focused content with reduced spacing.</p></div></Typography></div>
           </div>
-          <section class="demo-code" aria-label="Compact application usage">
+          <section class="demo-code" aria-label="Compact documentation typography usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Typography
-  size="sm"&gt;
-  &lt;!-- Add default slot content here --&gt;
+  size="compact"
+  maxWidth="compact"&gt;
+  &lt;div class="showcase-typography"&gt;&lt;h3&gt;Compact reference&lt;/h3&gt;&lt;p&gt;Focused content with reduced spacing.&lt;/p&gt;&lt;/div&gt;
 &lt;/Typography&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 editorial typography</h2><p>Use wider content and multiple columns for editorial or policy content.</p></div>
           <span class="demo-case-number">03</span>
         </header>
         <div class="demo-workbench">
           <div id="typography-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="Typography" 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"><Typography size="spacious" columns="2" gap="xl" maxWidth="wide" class="showcase-instance showcase-instance--3"><div class="showcase-typography"><h2>Long-form public information</h2><p>Structured editorial content can use a wider two-column layout on large screens.</p><p>Responsive behavior returns content to one column on smaller screens.</p></div></Typography></div>
           </div>
-          <section class="demo-code" aria-label="Rich configuration usage">
+          <section class="demo-code" aria-label="Wide editorial typography usage">
             <header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
             <pre><code>&lt;Typography
-  size="lg"&gt;
-  &lt;!-- Add default slot content here --&gt;
+  size="spacious"
+  gap="xl"
+  maxWidth="wide"&gt;
+  &lt;div class="showcase-typography"&gt;&lt;h2&gt;Long-form public information&lt;/h2&gt;&lt;p&gt;Structured editorial content can use a wider two-column layout on large screens.&lt;/p&gt;&lt;p&gt;Responsive behavior returns content to one column on smaller screens.&lt;/p&gt;&lt;/div&gt;
 &lt;/Typography&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="#typography-demo-1">Production default</a><a href="#typography-demo-2">Compact application</a><a href="#typography-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="#typography-demo-1">Readable content typography</a><a href="#typography-demo-2">Compact documentation typography</a><a href="#typography-demo-3">Wide editorial typography</a><a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
-      <a href="/components/text-link"><small>Previous</small><strong>← Text Link</strong></a>
+      <a href="/components/section-header"><small>Previous</small><strong>← Section Header</strong></a>
       <span></span>
     </nav>
   }
diff --git a/examples/component-showcase/app/pages/components/wysiwyg-editor.wrn b/examples/component-showcase/app/pages/components/wysiwyg-editor.wrn
index f55fe697..f89b6c64 100644
--- a/examples/component-showcase/app/pages/components/wysiwyg-editor.wrn
+++ b/examples/component-showcase/app/pages/components/wysiwyg-editor.wrn
@@ -5,7 +5,7 @@ page WysiwygEditorDetail {
   state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
   state playground_title = ctx.url.searchParams.get("pg_title") ?? "Wysiwyg Editor example"
   state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default wysiwyg editor for a modern application."
-  state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n  {\n    \"id\": \"wysiwyg-editor-0-1\",\n    \"key\": \"wysiwyg-editor-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\": \"#wysiwyg-editor-demo\",\n    \"actionHref\": \"#wysiwyg-editor-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\": \"wysiwyg-editor-0-2\",\n    \"key\": \"wysiwyg-editor-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\": \"#wysiwyg-editor-demo\",\n    \"actionHref\": \"#wysiwyg-editor-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\":\"wysiwyg-editor-0-1\",\"key\":\"wysiwyg-editor-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#wysiwyg-editor-demo\",\"actionHref\":\"#wysiwyg-editor-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"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\":\"wysiwyg-editor-0-2\",\"key\":\"wysiwyg-editor-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#wysiwyg-editor-demo\",\"actionHref\":\"#wysiwyg-editor-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"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 WysiwygEditorDetail {
       </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="WysiwygEditor" data-playground-public-tag="true" data-playground-has-slot="true">
+    <section id="playground" class="detail-section playground-section" data-playground data-playground-component="WysiwygEditor" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="input,change,focus,blur">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Wysiwyg Editor</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="WysiwygEditor" 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><WysiwygEditor 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;WysiwygEditor
@@ -147,6 +147,7 @@ page WysiwygEditorDetail {
 /&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 WysiwygEditorDetail {
       "Standard"
     ]
   }
-]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-wysiwyg-editor-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-wysiwyg-editor-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-wysiwyg-editor-class"><span><strong>class</strong><small>string</small></span><input id="playground-wysiwyg-editor-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-wysiwyg-editor-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-wysiwyg-editor-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-wysiwyg-editor-class"><span><strong>class</strong><small>string</small></span><input id="playground-wysiwyg-editor-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
         </form>
       </div>
     </section>
@@ -272,7 +273,8 @@ page WysiwygEditorDetail {
         <div class="demo-workbench">
           <div id="wysiwyg-editor-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="WysiwygEditor" size="default" title="Wysiwyg Editor example" description="A polished default wysiwyg editor for a modern application." items="[{&quot;id&quot;:&quot;wysiwyg-editor-0-1&quot;,&quot;key&quot;:&quot;wysiwyg-editor-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;#wysiwyg-editor-demo&quot;,&quot;actionHref&quot;:&quot;#wysiwyg-editor-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;wysiwyg-editor-0-2&quot;,&quot;key&quot;:&quot;wysiwyg-editor-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;#wysiwyg-editor-demo&quot;,&quot;actionHref&quot;:&quot;#wysiwyg-editor-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"><WysiwygEditor size="default" title="Wysiwyg Editor example" description="A polished default wysiwyg editor for a modern application." items='[{"id":"wysiwyg-editor-0-1","key":"wysiwyg-editor-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#wysiwyg-editor-demo","actionHref":"#wysiwyg-editor-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"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":"wysiwyg-editor-0-2","key":"wysiwyg-editor-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#wysiwyg-editor-demo","actionHref":"#wysiwyg-editor-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"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 WysiwygEditorDetail {
         <div class="demo-workbench">
           <div id="wysiwyg-editor-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="WysiwygEditor" size="sm" title="Compact Wysiwyg Editor" description="A compact configuration for dashboards and dense product surfaces." items="[{&quot;id&quot;:&quot;wysiwyg-editor-1-1&quot;,&quot;key&quot;:&quot;wysiwyg-editor-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;#wysiwyg-editor-demo&quot;,&quot;actionHref&quot;:&quot;#wysiwyg-editor-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;wysiwyg-editor-1-2&quot;,&quot;key&quot;:&quot;wysiwyg-editor-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;#wysiwyg-editor-demo&quot;,&quot;actionHref&quot;:&quot;#wysiwyg-editor-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"><WysiwygEditor size="sm" title="Compact Wysiwyg Editor" description="A compact configuration for dashboards and dense product surfaces." items='[{"id":"wysiwyg-editor-1-1","key":"wysiwyg-editor-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":"#wysiwyg-editor-demo","actionHref":"#wysiwyg-editor-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":"wysiwyg-editor-1-2","key":"wysiwyg-editor-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#wysiwyg-editor-demo","actionHref":"#wysiwyg-editor-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 WysiwygEditorDetail {
         <div class="demo-workbench">
           <div id="wysiwyg-editor-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="WysiwygEditor" size="lg" title="Advanced Wysiwyg Editor" description="A richer configuration demonstrating additional content and hierarchy." items="[{&quot;id&quot;:&quot;wysiwyg-editor-2-1&quot;,&quot;key&quot;:&quot;wysiwyg-editor-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;#wysiwyg-editor-demo&quot;,&quot;actionHref&quot;:&quot;#wysiwyg-editor-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;wysiwyg-editor-2-2&quot;,&quot;key&quot;:&quot;wysiwyg-editor-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;#wysiwyg-editor-demo&quot;,&quot;actionHref&quot;:&quot;#wysiwyg-editor-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"><WysiwygEditor size="lg" title="Advanced Wysiwyg Editor" description="A richer configuration demonstrating additional content and hierarchy." items='[{"id":"wysiwyg-editor-2-1","key":"wysiwyg-editor-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":"#wysiwyg-editor-demo","actionHref":"#wysiwyg-editor-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":"wysiwyg-editor-2-2","key":"wysiwyg-editor-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":"#wysiwyg-editor-demo","actionHref":"#wysiwyg-editor-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 WysiwygEditorDetail {
           </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;WysiwygEditor
+  @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=\"WysiwygEditor\"], [data-component=\"WysiwygEditor\"]")
 
-component.addEventListener('input', (event) =&gt; &#123;
-  console.log(event.detail)
-&#125;)</code></pre></section></div></section>
+component?.addEventListener("input", (event) =&gt; &#123;
+  console.log("input", event.detail)
+&#125;)
+
+component?.addEventListener("change", (event) =&gt; &#123;
+  console.log("change", event.detail)
+&#125;)
+
+component?.addEventListener("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>title</code></td><td>string</td><td><code>"Wysiwyg Editor"</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">
diff --git a/examples/component-showcase/app/pages/core.wrn b/examples/component-showcase/app/pages/core.wrn
new file mode 100644
index 00000000..79d8e5b2
--- /dev/null
+++ b/examples/component-showcase/app/pages/core.wrn
@@ -0,0 +1,57 @@
+// Generated by scripts/generate-showcase.mjs. Do not edit directly.
+page CoreShowcase {
+  layout = "showcase"
+  seo {
+    title = "Core components"
+    description = "4 core components from @wrnexus/ui."
+  }
+  view {
+    <header class="showcase-hero showcase-hero--category">
+      <span class="showcase-eyebrow">Component category</span>
+      <h1 class="showcase-title">Core</h1>
+      <p class="showcase-description">4 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
+      <div class="category-meta"><span>4 components</span><span>Multiple use cases</span><span>12 live configurations</span></div>
+    </header>
+    <div class="catalog-grid">
+      <article class="catalog-card" data-interactive-preview="false">
+        <div class="catalog-card-preview">
+          <div class="catalog-card-glow" aria-hidden="true"></div>
+          <div class="catalog-card-stage"><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="catalog-card-body">
+          <div><span class="catalog-card-category">Core</span><h2>Auth Form</h2><p>Reusable auth form component.</p></div>
+          <div class="catalog-card-footer"><span>13 props · 1 slots</span><a href="/components/auth-form">Explore component <span aria-hidden="true">→</span></a></div>
+        </div>
+      </article>
+      <article class="catalog-card" data-interactive-preview="false">
+        <div class="catalog-card-preview">
+          <div class="catalog-card-glow" aria-hidden="true"></div>
+          <div class="catalog-card-stage"><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>
+        <div class="catalog-card-body">
+          <div><span class="catalog-card-category">Core</span><h2>Auth Split Layout</h2><p>Reusable auth split layout component.</p></div>
+          <div class="catalog-card-footer"><span>8 props · 2 slots</span><a href="/components/auth-split-layout">Explore component <span aria-hidden="true">→</span></a></div>
+        </div>
+      </article>
+      <article class="catalog-card" data-interactive-preview="false">
+        <div class="catalog-card-preview">
+          <div class="catalog-card-glow" aria-hidden="true"></div>
+          <div class="catalog-card-stage"><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","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"]}]' 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"]}]' class="showcase-instance showcase-instance--1" /></div>
+        </div>
+        <div class="catalog-card-body">
+          <div><span class="catalog-card-category">Core</span><h2>Portal Dashboard</h2><p>Reusable portal dashboard component.</p></div>
+          <div class="catalog-card-footer"><span>14 props · 1 slots</span><a href="/components/portal-dashboard">Explore component <span aria-hidden="true">→</span></a></div>
+        </div>
+      </article>
+      <article class="catalog-card" data-interactive-preview="false">
+        <div class="catalog-card-preview">
+          <div class="catalog-card-glow" aria-hidden="true"></div>
+          <div class="catalog-card-stage"><PreferenceSwitcher size="default" themeLabel="Preference Switcher" colorLabel="Preference Switcher" languageLabel="Preference Switcher" compact="false" class="showcase-instance showcase-instance--1" /></div>
+        </div>
+        <div class="catalog-card-body">
+          <div><span class="catalog-card-category">Core</span><h2>Preference Switcher</h2><p>Reusable preference switcher component.</p></div>
+          <div class="catalog-card-footer"><span>9 props · 0 slots</span><a href="/components/preference-switcher">Explore component <span aria-hidden="true">→</span></a></div>
+        </div>
+      </article></div>
+  }
+}
diff --git a/examples/component-showcase/app/pages/dark-mode.wrn b/examples/component-showcase/app/pages/dark-mode.wrn
index 98564937..6f45a671 100644
--- a/examples/component-showcase/app/pages/dark-mode.wrn
+++ b/examples/component-showcase/app/pages/dark-mode.wrn
@@ -10,7 +10,7 @@ page DarkModeGuide {
       <header class="docs-intro"><span class="showcase-eyebrow">Customization</span><h1>Dark mode</h1><p>Choose light, dark, or system mode. The selection persists and updates every preview.</p></header>
       <section class="guide-section"><h2>Overview</h2><p>Choose light, dark, or system mode. The selection persists and updates every preview.</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>
   }
 }
diff --git a/examples/component-showcase/app/pages/data.wrn b/examples/component-showcase/app/pages/data.wrn
new file mode 100644
index 00000000..806f02ca
--- /dev/null
+++ b/examples/component-showcase/app/pages/data.wrn
@@ -0,0 +1,47 @@
+// Generated by scripts/generate-showcase.mjs. Do not edit directly.
+page DataShowcase {
+  layout = "showcase"
+  seo {
+    title = "Data components"
+    description = "3 data components from @wrnexus/ui."
+  }
+  view {
+    <header class="showcase-hero showcase-hero--category">
+      <span class="showcase-eyebrow">Component category</span>
+      <h1 class="showcase-title">Data</h1>
+      <p class="showcase-description">3 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
+      <div class="category-meta"><span>3 components</span><span>Multiple use cases</span><span>9 live configurations</span></div>
+    </header>
+    <div class="catalog-grid">
+      <article class="catalog-card" data-interactive-preview="false">
+        <div class="catalog-card-preview">
+          <div class="catalog-card-glow" aria-hidden="true"></div>
+          <div class="catalog-card-stage"><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>
+        <div class="catalog-card-body">
+          <div><span class="catalog-card-category">Data</span><h2>Metric Card</h2><p>Display one operational metric with value, suffix, description, icon, trend, progress, and optional action.</p></div>
+          <div class="catalog-card-footer"><span>28 props · 2 slots</span><a href="/components/metric-card">Explore component <span aria-hidden="true">→</span></a></div>
+        </div>
+      </article>
+      <article class="catalog-card" data-interactive-preview="false">
+        <div class="catalog-card-preview">
+          <div class="catalog-card-glow" aria-hidden="true"></div>
+          <div class="catalog-card-stage"><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>
+        <div class="catalog-card-body">
+          <div><span class="catalog-card-category">Data</span><h2>Metric Grid</h2><p>Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.</p></div>
+          <div class="catalog-card-footer"><span>13 props · 1 slots</span><a href="/components/metric-grid">Explore component <span aria-hidden="true">→</span></a></div>
+        </div>
+      </article>
+      <article class="catalog-card" data-interactive-preview="false">
+        <div class="catalog-card-preview">
+          <div class="catalog-card-glow" aria-hidden="true"></div>
+          <div class="catalog-card-stage"><StatsBar items='[{"label":"Composite components","value":"18","description":"Reusable public-page building blocks","icon":"icon-[lucide--blocks]","color":"primary"},{"label":"Rendering","value":"SSR","description":"Server-first WRNexusJS rendering","icon":"icon-[lucide--server]","color":"info"},{"label":"Responsive","value":"Yes","description":"Mobile, tablet, and desktop layouts","icon":"icon-[lucide--monitor-smartphone]","color":"success"},{"label":"Theme aware","value":"Yes","description":"Active theme and accent palettes","icon":"icon-[lucide--palette]","color":"warning"}]' columns="4" compact="true" dividers="true" icons="true" size="default" variant="raised" maxWidth="xl" class="showcase-instance showcase-instance--1" /></div>
+        </div>
+        <div class="catalog-card-body">
+          <div><span class="catalog-card-category">Data</span><h2>Stats Bar</h2><p>Present a compact responsive strip of key facts, counts, performance indicators, or trust signals.</p></div>
+          <div class="catalog-card-footer"><span>10 props · 0 slots</span><a href="/components/stats-bar">Explore component <span aria-hidden="true">→</span></a></div>
+        </div>
+      </article></div>
+  }
+}
diff --git a/examples/component-showcase/app/pages/fonts.wrn b/examples/component-showcase/app/pages/fonts.wrn
index b8ec3d80..0a4cdeff 100644
--- a/examples/component-showcase/app/pages/fonts.wrn
+++ b/examples/component-showcase/app/pages/fonts.wrn
@@ -10,7 +10,7 @@ page FontsGuide {
       <header class="docs-intro"><span class="showcase-eyebrow">Customization</span><h1>Fonts</h1><p>Select a font family globally while components continue to inherit typography correctly.</p></header>
       <section class="guide-section"><h2>Overview</h2><p>Select a font family globally while components continue to inherit typography correctly.</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>
   }
 }
diff --git a/examples/component-showcase/app/pages/forms.wrn b/examples/component-showcase/app/pages/forms.wrn
index fa93ce10..8cca1653 100644
--- a/examples/component-showcase/app/pages/forms.wrn
+++ b/examples/component-showcase/app/pages/forms.wrn
@@ -10,123 +10,123 @@ page FormsShowcase {
       <span class="showcase-eyebrow">Component category</span>
       <h1 class="showcase-title">Forms</h1>
       <p class="showcase-description">12 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
-      <div class="category-meta"><span>12 components</span><span>Multiple use cases</span><span>106 live configurations</span></div>
+      <div class="category-meta"><span>12 components</span><span>Multiple use cases</span><span>36 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="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>
-        <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Forms</span><h2>Auth Form</h2><p>Reusable authentication form for sign-in, registration, recovery, reset, and MFA.</p></div>
-          <div class="catalog-card-footer"><span>13 props · 1 slots</span><a href="/components/auth-form">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="Checkbox" size="default" color="primary" id="checkbox-1" name="checkboxField" label="Accept notifications" placeholder="Enter checkbox" variant="normal" icon="" iconPosition="start" value="terms" values="[]" options="[]" checked="true" indeterminate="false" orientation="vertical" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
+          <div class="catalog-card-stage"><Checkbox size="default" label="Checkbox" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" values='[{"id":"checkbox-0-1","key":"checkbox-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#checkbox-demo","actionHref":"#checkbox-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"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":"checkbox-0-2","key":"checkbox-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#checkbox-demo","actionHref":"#checkbox-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"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"]}]' options='[{"id":"checkbox-0-1","key":"checkbox-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#checkbox-demo","actionHref":"#checkbox-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"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":"checkbox-0-2","key":"checkbox-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#checkbox-demo","actionHref":"#checkbox-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"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"]}]' checked="false" indeterminate="false" card="false" rightAligned="false" list="false" 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">Forms</span><h2>Checkbox</h2><p>Theme-aware, responsive checkbox component.</p></div>
           <div class="catalog-card-footer"><span>27 props · 1 slots</span><a href="/components/checkbox">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="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="catalog-card-stage"><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>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Forms</span><h2>Color Picker</h2><p>Theme-aware, responsive color picker component.</p></div>
           <div class="catalog-card-footer"><span>19 props · 0 slots</span><a href="/components/color-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="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="catalog-card-stage"><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>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Forms</span><h2>File Input</h2><p>Theme-aware, responsive file input component.</p></div>
           <div class="catalog-card-footer"><span>21 props · 0 slots</span><a href="/components/file-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="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="catalog-card-stage"><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>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Forms</span><h2>Input</h2><p>Theme-aware, responsive input component.</p></div>
           <div class="catalog-card-footer"><span>28 props · 0 slots</span><a href="/components/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="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="catalog-card-stage"><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>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Forms</span><h2>Input Group</h2><p>Theme-aware, responsive input group component.</p></div>
           <div class="catalog-card-footer"><span>23 props · 0 slots</span><a href="/components/input-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="Radio" size="default" color="primary" id="radio-1" name="radioField" label="Standard plan" placeholder="Enter radio" variant="normal" icon="" iconPosition="start" value="standard" options="[]" checked="true" orientation="vertical" card="false" rightAligned="false" list="false" helperText="" cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
+          <div class="catalog-card-stage"><Radio size="default" label="Radio" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" options='[{"id":"radio-0-1","key":"radio-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#radio-demo","actionHref":"#radio-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","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":"radio-0-2","key":"radio-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#radio-demo","actionHref":"#radio-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' checked="false" card="false" rightAligned="false" list="false" 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">Forms</span><h2>Radio</h2><p>Theme-aware, responsive radio component.</p></div>
           <div class="catalog-card-footer"><span>25 props · 0 slots</span><a href="/components/radio">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="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="catalog-card-stage"><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>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Forms</span><h2>Range Slider</h2><p>Theme-aware, responsive range slider component.</p></div>
           <div class="catalog-card-footer"><span>26 props · 0 slots</span><a href="/components/range-slider">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="Select" size="default" color="primary" id="select-1" name="selectField" label="Team" value="" options="[{&quot;label&quot;:&quot;Engineering&quot;,&quot;value&quot;:&quot;engineering&quot;},{&quot;label&quot;:&quot;Design&quot;,&quot;value&quot;:&quot;design&quot;},{&quot;label&quot;:&quot;Marketing&quot;,&quot;value&quot;:&quot;marketing&quot;}]" placeholder="Enter select" variant="normal" icon="" iconPosition="start" helperText="Helpful context for this field." cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
+          <div class="catalog-card-stage"><SearchBox size="default" label="Search documentation" name="site-search" value="sample-1" placeholder="Search components and guides" type="search" disabled="false" required="false" class="showcase-instance showcase-instance--1" /></div>
+        </div>
+        <div class="catalog-card-body">
+          <div><span class="catalog-card-category">Forms</span><h2>Search Box</h2><p>Provide an accessible responsive search field with labels, validation states, sizes, and input or change events.</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" data-interactive-preview="false">
+        <div class="catalog-card-preview">
+          <div class="catalog-card-glow" aria-hidden="true"></div>
+          <div class="catalog-card-stage"><Select size="default" label="Select" hiddenLabel="false" value="sample-1" values='[{"id":"select-0-1","key":"select-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#select-demo","actionHref":"#select-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"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":"select-0-2","key":"select-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#select-demo","actionHref":"#select-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"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"]}]' options='[{"id":"select-0-1","key":"select-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#select-demo","actionHref":"#select-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"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":"select-0-2","key":"select-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#select-demo","actionHref":"#select-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"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"]}]' placeholder="Enter a sample value" variant="normal" icon="" inline="false" multiple="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">Forms</span><h2>Select</h2><p>Theme-aware, responsive select component.</p></div>
           <div class="catalog-card-footer"><span>22 props · 0 slots</span><a href="/components/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="Switch" size="default" color="primary" id="switch-1" name="switchField" label="Email notifications" placeholder="Enter switch" variant="normal" icon="" iconPosition="start" value="enabled" checked="false" helperText="Helpful context for this field." cornerHint="" error="" inline="false" readonly="false" disabled="false" required="false"></div></div>
+          <div class="catalog-card-stage"><Switch size="default" label="Switch" hiddenLabel="false" placeholder="Enter a sample value" variant="normal" icon="" value="sample-1" checked="false" 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">Forms</span><h2>Switch</h2><p>Theme-aware, responsive switch component.</p></div>
           <div class="catalog-card-footer"><span>20 props · 0 slots</span><a href="/components/switch">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="Textarea" size="default" color="primary" id="textarea-1" name="textareaField" label="Description" placeholder="Enter textarea" value="" variant="normal" icon="" iconPosition="start" helperText="Helpful context for this field." cornerHint="" error="" inline="false" rows="4" readonly="false" disabled="false" required="false"></div></div>
+          <div class="catalog-card-stage"><Textarea size="default" label="Textarea" hiddenLabel="false" placeholder="Enter a sample value" value="sample-1" variant="normal" icon="" inline="false" rows="5" 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">Forms</span><h2>Textarea</h2><p>Theme-aware, responsive textarea component.</p></div>
           <div class="catalog-card-footer"><span>23 props · 0 slots</span><a href="/components/textarea">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="TimePicker" size="default" color="primary" id="time-picker-1" name="time-pickerField" label="Start time" value="" placeholder="Enter time picker" variant="normal" icon="" iconPosition="start" helperText="Helpful context for this field." cornerHint="" error="" inline="false" min="08:00" max="18:00" readonly="false" disabled="false" required="false"></div></div>
+          <div class="catalog-card-stage"><TimePicker size="default" label="Time Picker" hiddenLabel="false" value="sample-1" placeholder="Enter a sample value" variant="normal" icon="" inline="false" minuteStep="5" 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">Forms</span><h2>Time Picker</h2><p>Theme-aware, responsive time picker component.</p></div>
diff --git a/examples/component-showcase/app/pages/framework-guides.wrn b/examples/component-showcase/app/pages/framework-guides.wrn
index 5f579b52..7d25b15a 100644
--- a/examples/component-showcase/app/pages/framework-guides.wrn
+++ b/examples/component-showcase/app/pages/framework-guides.wrn
@@ -10,7 +10,7 @@ page FrameworkGuidesGuide {
       <header class="docs-intro"><span class="showcase-eyebrow">Getting Started</span><h1>Framework guides</h1><p>WRNexus components use native HTML semantics and framework component mounts.</p></header>
       <section class="guide-section"><h2>Overview</h2><p>WRNexus components use native HTML semantics and framework component mounts.</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>
   }
 }
diff --git a/examples/component-showcase/app/pages/index.wrn b/examples/component-showcase/app/pages/index.wrn
index 8aa77968..e48b09da 100644
--- a/examples/component-showcase/app/pages/index.wrn
+++ b/examples/component-showcase/app/pages/index.wrn
@@ -11,17 +11,17 @@ page ComponentShowcase {
         <span class="showcase-eyebrow">The UI foundation for WRNexus</span>
         <h1 class="showcase-title">Build modern products<br /><em>at framework speed.</em></h1>
         <p class="showcase-description">A complete, accessible component system with 108 primitives, ready-made blocks, page templates, responsive behavior, and deeply configurable design tokens.</p>
-        <div class="home-actions"><a class="home-primary-action" href="/docs">Get started <span aria-hidden="true">→</span></a><a class="home-secondary-action" href="/blocks">Explore blocks</a></div>
+        <div class="home-actions"><a class="home-primary-action" href="/docs">Get started <span aria-hidden="true">→</span></a><a class="home-secondary-action" href="/block-library">Explore blocks</a></div>
         <div class="home-install"><span>$</span><code>bun add @wrnexus/ui</code><button type="button" data-copy-text="bun add @wrnexus/ui" aria-label="Copy install command"><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span></button></div>
       </header>
-      <section class="home-product-grid"><article><span class="icon-[lucide--component] size-7"></span><strong>108 components</strong><p>Accessible primitives for every product surface.</p><a href="/base">Browse components →</a></article><article><span class="icon-[lucide--layout-template] size-7"></span><strong>Ready-made blocks</strong><p>Composable sections assembled from WRNexus UI.</p><a href="/blocks">Explore blocks →</a></article><article><span class="icon-[lucide--panels-top-left] size-7"></span><strong>Page templates</strong><p>Complete responsive pages ready to customize.</p><a href="/templates">View templates →</a></article></section>
+      <section class="home-product-grid"><article><span class="icon-[lucide--component] size-7"></span><strong>108 components</strong><p>Accessible primitives for every product surface.</p><a href="/base">Browse components →</a></article><article><span class="icon-[lucide--layout-template] size-7"></span><strong>Ready-made blocks</strong><p>Composable sections assembled from WRNexus UI.</p><a href="/block-library">Explore blocks →</a></article><article><span class="icon-[lucide--panels-top-left] size-7"></span><strong>Page templates</strong><p>Complete responsive pages ready to customize.</p><a href="/templates">View templates →</a></article></section>
       <section class="showcase-stats">
         <div class="showcase-stat"><strong>108</strong><span>Unique components</span></div>
-        <div class="showcase-stat"><strong>571</strong><span>Live configurations</span></div>
+        <div class="showcase-stat"><strong>417</strong><span>Live configurations</span></div>
         <div class="showcase-stat"><strong>0</strong><span>Duplicate implementations</span></div>
-        <div class="showcase-stat"><strong>9</strong><span>Focused categories</span></div>
+        <div class="showcase-stat"><strong>11</strong><span>Focused categories</span></div>
       </section>
-      <section class="home-categories"><div class="home-section-heading"><span>Explore the system</span><h2>Everything your product needs</h2></div><div class="home-category-grid"><a class="home-category home-category--1" href="/advanced-forms"><span class="home-category-index">01</span><div><strong>Advanced Forms</strong><p>9 components · 116 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/base"><span class="home-category-index">02</span><div><strong>Base</strong><p>28 components · 172 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/blocks"><span class="home-category-index">03</span><div><strong>Blocks</strong><p>11 components · 33 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/forms"><span class="home-category-index">04</span><div><strong>Forms</strong><p>12 components · 106 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--1" href="/integrations"><span class="home-category-index">05</span><div><strong>Integrations</strong><p>12 components · 36 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/layout"><span class="home-category-index">06</span><div><strong>Layout</strong><p>17 components · 51 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/navigation"><span class="home-category-index">07</span><div><strong>Navigation</strong><p>12 components · 36 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/overlays"><span class="home-category-index">08</span><div><strong>Overlays</strong><p>6 components · 18 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--1" href="/tables"><span class="home-category-index">09</span><div><strong>Tables</strong><p>1 components · 3 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a></div></section>
+      <section class="home-categories"><div class="home-section-heading"><span>Explore the system</span><h2>Everything your product needs</h2></div><div class="home-category-grid"><a class="home-category home-category--1" href="/advanced-forms"><span class="home-category-index">01</span><div><strong>Advanced Forms</strong><p>8 components · 112 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/base"><span class="home-category-index">02</span><div><strong>Base</strong><p>27 components · 86 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/core"><span class="home-category-index">03</span><div><strong>Core</strong><p>4 components · 12 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/data"><span class="home-category-index">04</span><div><strong>Data</strong><p>3 components · 9 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--1" href="/forms"><span class="home-category-index">05</span><div><strong>Forms</strong><p>12 components · 36 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/integrations"><span class="home-category-index">06</span><div><strong>Integrations</strong><p>12 components · 36 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/layout"><span class="home-category-index">07</span><div><strong>Layout</strong><p>15 components · 45 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--4" href="/marketing"><span class="home-category-index">08</span><div><strong>Marketing</strong><p>10 components · 30 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--1" href="/navigation"><span class="home-category-index">09</span><div><strong>Navigation</strong><p>10 components · 30 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--2" href="/overlays"><span class="home-category-index">010</span><div><strong>Overlays</strong><p>6 components · 18 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a><a class="home-category home-category--3" href="/tables"><span class="home-category-index">011</span><div><strong>Tables</strong><p>1 components · 3 live demos</p></div><span class="icon-[lucide--arrow-up-right] size-5" aria-hidden="true"></span></a></div></section>
     </div>
   }
 }
diff --git a/examples/component-showcase/app/pages/installation.wrn b/examples/component-showcase/app/pages/installation.wrn
index 552acd11..737d099a 100644
--- a/examples/component-showcase/app/pages/installation.wrn
+++ b/examples/component-showcase/app/pages/installation.wrn
@@ -10,7 +10,7 @@ page InstallationGuide {
       <header class="docs-intro"><span class="showcase-eyebrow">Getting Started</span><h1>Installation</h1><p>Install the package and import the shared stylesheet once in your application.</p></header>
       <section class="guide-section"><h2>Overview</h2><p>Install the package and import the shared stylesheet once in your application.</p></section><section class="guide-section"><h2>Configuration</h2><p>Use the design switcher in the header to test this setting live.</p></section><section class="guide-section"><h2>Component behavior</h2><p>The setting is inherited by components, blocks, templates, and playground previews.</p></section>
       <section class="guide-section"><h2>Quick start</h2><pre><code>bun add @wrnexus/ui</code></pre></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>
   }
 }
diff --git a/examples/component-showcase/app/pages/integrations.wrn b/examples/component-showcase/app/pages/integrations.wrn
index 62222a63..5e224b48 100644
--- a/examples/component-showcase/app/pages/integrations.wrn
+++ b/examples/component-showcase/app/pages/integrations.wrn
@@ -13,120 +13,120 @@ page IntegrationsShowcase {
       <div class="category-meta"><span>12 components</span><span>Multiple use cases</span><span>36 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="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="catalog-card-stage"><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>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Integrations</span><h2>Advanced Date Picker</h2><p>Theme-aware, responsive advanced date picker component.</p></div>
           <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/advanced-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="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="catalog-card-stage"><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>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Integrations</span><h2>Advanced Range Slider</h2><p>Theme-aware, responsive advanced range slider component.</p></div>
           <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/advanced-range-slider">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="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="catalog-card-stage"><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>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Integrations</span><h2>Chart</h2><p>Theme-aware, responsive chart component.</p></div>
           <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/chart">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="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="catalog-card-stage"><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>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Integrations</span><h2>Clipboard</h2><p>Theme-aware, responsive clipboard component.</p></div>
           <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/clipboard">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="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="catalog-card-stage"><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>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Integrations</span><h2>Confetti</h2><p>Theme-aware, responsive confetti component.</p></div>
           <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/confetti">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="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="catalog-card-stage"><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>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Integrations</span><h2>Data Map</h2><p>Theme-aware, responsive data map component.</p></div>
           <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/data-map">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="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 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;]}]" striped="true" class="showcase-instance showcase-instance--1"></div></div>
+          <div class="catalog-card-stage"><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>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Integrations</span><h2>Data Table</h2><p>Theme-aware, responsive data table component.</p></div>
           <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/data-table">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="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="catalog-card-stage"><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>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Integrations</span><h2>Drag And Drop</h2><p>Theme-aware, responsive drag and drop component.</p></div>
           <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/drag-and-drop">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="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="catalog-card-stage"><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>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Integrations</span><h2>File Upload</h2><p>Theme-aware, responsive file upload component.</p></div>
           <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/file-upload">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="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="catalog-card-stage"><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>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Integrations</span><h2>Map</h2><p>Theme-aware, responsive map component.</p></div>
+          <div><span class="catalog-card-category">Integrations</span><h2>Map</h2><p>Present responsive location information and markers with map-ready metadata and movement or marker events.</p></div>
           <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/map">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="ToastNotifications" size="default" title="Toast Notifications example" description="A polished default toast notifications for a modern application." items="[{&quot;id&quot;:&quot;toast-notifications-0-1&quot;,&quot;key&quot;:&quot;toast-notifications-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-notifications-demo&quot;,&quot;actionHref&quot;:&quot;#toast-notifications-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-notifications-0-2&quot;,&quot;key&quot;:&quot;toast-notifications-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-notifications-demo&quot;,&quot;actionHref&quot;:&quot;#toast-notifications-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"><ToastNotifications size="default" title="Toast Notifications example" description="A polished default toast notifications for a modern application." items='[{"id":"toast-notifications-0-1","key":"toast-notifications-0-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-notifications-demo","actionHref":"#toast-notifications-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"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-notifications-0-2","key":"toast-notifications-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-notifications-demo","actionHref":"#toast-notifications-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"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">Integrations</span><h2>Toast Notifications</h2><p>Theme-aware, responsive toast notifications component.</p></div>
           <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/toast-notifications">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="WysiwygEditor" size="default" title="Wysiwyg Editor example" description="A polished default wysiwyg editor for a modern application." items="[{&quot;id&quot;:&quot;wysiwyg-editor-0-1&quot;,&quot;key&quot;:&quot;wysiwyg-editor-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;#wysiwyg-editor-demo&quot;,&quot;actionHref&quot;:&quot;#wysiwyg-editor-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;wysiwyg-editor-0-2&quot;,&quot;key&quot;:&quot;wysiwyg-editor-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;#wysiwyg-editor-demo&quot;,&quot;actionHref&quot;:&quot;#wysiwyg-editor-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"><WysiwygEditor size="default" title="Wysiwyg Editor example" description="A polished default wysiwyg editor for a modern application." items='[{"id":"wysiwyg-editor-0-1","key":"wysiwyg-editor-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#wysiwyg-editor-demo","actionHref":"#wysiwyg-editor-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"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":"wysiwyg-editor-0-2","key":"wysiwyg-editor-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#wysiwyg-editor-demo","actionHref":"#wysiwyg-editor-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"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">Integrations</span><h2>Wysiwyg Editor</h2><p>Theme-aware, responsive wysiwyg editor component.</p></div>
diff --git a/examples/component-showcase/app/pages/layout.wrn b/examples/component-showcase/app/pages/layout.wrn
index b424d97f..0a8377bd 100644
--- a/examples/component-showcase/app/pages/layout.wrn
+++ b/examples/component-showcase/app/pages/layout.wrn
@@ -3,183 +3,168 @@ page LayoutShowcase {
   layout = "showcase"
   seo {
     title = "Layout components"
-    description = "17 layout components from @wrnexus/ui."
+    description = "15 layout components from @wrnexus/ui."
   }
   view {
     <header class="showcase-hero showcase-hero--category">
       <span class="showcase-eyebrow">Component category</span>
       <h1 class="showcase-title">Layout</h1>
-      <p class="showcase-description">17 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
-      <div class="category-meta"><span>17 components</span><span>Multiple use cases</span><span>51 live configurations</span></div>
+      <p class="showcase-description">15 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
+      <div class="category-meta"><span>15 components</span><span>Multiple use cases</span><span>45 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="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="catalog-card-stage"><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>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Layout</span><h2>Auth Split Layout</h2><p>Responsive 50/50 authentication layout with content and form regions.</p></div>
-          <div class="catalog-card-footer"><span>8 props · 2 slots</span><a href="/components/auth-split-layout">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="Columns" size="default" columns="2" class="showcase-instance showcase-instance--1"></div></div>
-        </div>
-        <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Layout</span><h2>Columns</h2><p>Theme-aware, responsive columns component.</p></div>
+          <div><span class="catalog-card-category">Layout</span><h2>Columns</h2><p>Create responsive balanced content columns with configurable count, gap, density, and maximum width.</p></div>
           <div class="catalog-card-footer"><span>6 props · 1 slots</span><a href="/components/columns">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="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="catalog-card-stage"><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>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Layout</span><h2>Container</h2><p>Theme-aware, responsive container component.</p></div>
+          <div><span class="catalog-card-category">Layout</span><h2>Container</h2><p>Constrain and align page content with responsive gutters and compact, wide, or full width options.</p></div>
           <div class="catalog-card-footer"><span>6 props · 1 slots</span><a href="/components/container">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="CustomScrollbar" size="default" columns="2" class="showcase-instance showcase-instance--1"></div></div>
+          <div class="catalog-card-stage"><CustomScrollbar size="default" columns="2" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Layout</span><h2>Custom Scrollbar</h2><p>Theme-aware, responsive custom scrollbar component.</p></div>
           <div class="catalog-card-footer"><span>6 props · 1 slots</span><a href="/components/custom-scrollbar">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="Divider" size="default" label="Divider" class="showcase-instance showcase-instance--1"></div></div>
+          <div class="catalog-card-stage"><Divider size="default" label="Related information" orientation="horizontal" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Layout</span><h2>Divider</h2><p>Theme-aware, responsive divider component.</p></div>
+          <div><span class="catalog-card-category">Layout</span><h2>Divider</h2><p>Separate related horizontal or vertical content with optional labels, sizes, and semantic colors.</p></div>
           <div class="catalog-card-footer"><span>5 props · 0 slots</span><a href="/components/divider">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="FeatureGrid" size="default" columns="3" tabletColumns="2" mobileColumns="1" equalHeight="true" align="start" class="showcase-instance showcase-instance--1"></div></div>
+          <div class="catalog-card-stage"><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>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Layout</span><h2>Feature Grid</h2><p>Responsive equal-height grid for feature and service cards.</p></div>
-          <div class="catalog-card-footer"><span>11 props · 1 slots</span><a href="/components/feature-grid">Explore component <span aria-hidden="true">→</span></a></div>
+          <div><span class="catalog-card-category">Layout</span><h2>Feature Grid</h2><p>Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.</p></div>
+          <div class="catalog-card-footer"><span>12 props · 1 slots</span><a href="/components/feature-grid">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="Grid" size="default" columns="2" class="showcase-instance showcase-instance--1"></div></div>
+          <div class="catalog-card-stage"><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>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Layout</span><h2>Grid</h2><p>Theme-aware, responsive grid component.</p></div>
+          <div><span class="catalog-card-category">Layout</span><h2>Footer</h2><p>Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.</p></div>
+          <div class="catalog-card-footer"><span>8 props · 4 slots</span><a href="/components/footer">Explore component <span aria-hidden="true">→</span></a></div>
+        </div>
+      </article>
+      <article class="catalog-card" data-interactive-preview="false">
+        <div class="catalog-card-preview">
+          <div class="catalog-card-glow" aria-hidden="true"></div>
+          <div class="catalog-card-stage"><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>
+        <div class="catalog-card-body">
+          <div><span class="catalog-card-category">Layout</span><h2>Grid</h2><p>Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width.</p></div>
           <div class="catalog-card-footer"><span>6 props · 1 slots</span><a href="/components/grid">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="Image" size="default" rounded="false" class="showcase-instance showcase-instance--1"></div></div>
+          <div class="catalog-card-stage"><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>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Layout</span><h2>Image</h2><p>Theme-aware, responsive image component.</p></div>
+          <div><span class="catalog-card-category">Layout</span><h2>Image</h2><p>Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment.</p></div>
           <div class="catalog-card-footer"><span>9 props · 1 slots</span><a href="/components/image">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="Kbd" size="default" label="Kbd" class="showcase-instance showcase-instance--1"></div></div>
+          <div class="catalog-card-stage"><Kbd size="default" label="Kbd" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Layout</span><h2>Kbd</h2><p>Theme-aware, responsive kbd component.</p></div>
           <div class="catalog-card-footer"><span>4 props · 1 slots</span><a href="/components/kbd">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="LayoutSplitter" size="default" columns="2" class="showcase-instance showcase-instance--1"></div></div>
+          <div class="catalog-card-stage"><LayoutSplitter size="default" columns="2" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Layout</span><h2>Layout Splitter</h2><p>Theme-aware, responsive layout splitter component.</p></div>
           <div class="catalog-card-footer"><span>6 props · 1 slots</span><a href="/components/layout-splitter">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="Link" size="default" label="Link" href="#link-demo" external="false" class="showcase-instance showcase-instance--1"></div></div>
+          <div class="catalog-card-stage"><Link size="default" label="Open components" href="/base" external="false" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Layout</span><h2>Link</h2><p>Theme-aware, responsive link component.</p></div>
+          <div><span class="catalog-card-category">Layout</span><h2>Link</h2><p>Render an accessible internal or external link with target, relation, size, color, and public focus or click events.</p></div>
           <div class="catalog-card-footer"><span>8 props · 1 slots</span><a href="/components/link">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="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="catalog-card-stage"><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>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Layout</span><h2>Metric Grid</h2><p>Responsive collection of metric cards.</p></div>
-          <div class="catalog-card-footer"><span>11 props · 1 slots</span><a href="/components/metric-grid">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="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>
-        <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Layout</span><h2>Public Page Shell</h2><p>Consistent structural wrapper for public-facing pages.</p></div>
+          <div><span class="catalog-card-category">Layout</span><h2>Public Page Shell</h2><p>Provide the outer responsive structure, width, background, slots, overflow, and minimum-height behavior for public pages.</p></div>
           <div class="catalog-card-footer"><span>10 props · 3 slots</span><a href="/components/public-page-shell">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="Section" size="default" variant="default" fullWidth="false" borderTop="false" borderBottom="false" 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="catalog-card-stage"><Section id="standard-section" size="default" variant="default" spacing="lg" maxWidth="xl" fullWidth="false" borderTop="false" borderBottom="false" class="showcase-instance showcase-instance--1"><div class="showcase-content-block">Standard section content</div></Section></div>
         </div>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Layout</span><h2>Section</h2><p>Theme-aware page section with consistent spacing, width, background, and border controls.</p></div>
+          <div><span class="catalog-card-category">Layout</span><h2>Section</h2><p>Create a responsive themed page section with controlled spacing, width, borders, and surface treatment.</p></div>
           <div class="catalog-card-footer"><span>10 props · 1 slots</span><a href="/components/section">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="SectionHeader" title="Section Header example" description="A polished default section header for a modern application." align="start" size="default" headingLevel="2" 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="catalog-card-stage"><SectionHeader eyebrow="Public services" title="Everything citizens need" description="Discover online services, directories, guidance, and verified public information." align="left" size="default" headingLevel="2" maxWidth="3xl" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Layout</span><h2>Section Header</h2><p>Reusable accessible section heading with eyebrow, title, description, icon, and actions.</p></div>
+          <div><span class="catalog-card-category">Layout</span><h2>Section Header</h2><p>Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.</p></div>
           <div class="catalog-card-footer"><span>10 props · 3 slots</span><a href="/components/section-header">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="TextLink" label="Text Link" href="#text-link-demo" external="false" icon="" showArrow="true" underline="false" size="default" variant="default" disabled="false" class="showcase-instance showcase-instance--1"></div></div>
+          <div class="catalog-card-stage"><Typography size="default" columns="2" maxWidth="xl" class="showcase-instance showcase-instance--1"><div class="showcase-typography"><h2>Readable page content</h2><p>Typography creates consistent hierarchy and comfortable reading rhythm.</p><ul><li>Clear headings</li><li>Readable paragraphs</li><li>Consistent lists</li></ul></div></Typography></div>
         </div>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Layout</span><h2>Text Link</h2><p>Styled inline action link with icons, arrows, external state, and disabled handling.</p></div>
-          <div class="catalog-card-footer"><span>14 props · 0 slots</span><a href="/components/text-link">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="Typography" 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>
-        <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Layout</span><h2>Typography</h2><p>Theme-aware, responsive typography component.</p></div>
+          <div><span class="catalog-card-category">Layout</span><h2>Typography</h2><p>Apply consistent readable responsive typography, widths, columns, spacing, and editorial hierarchy.</p></div>
           <div class="catalog-card-footer"><span>6 props · 1 slots</span><a href="/components/typography">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article></div>
diff --git a/examples/component-showcase/app/pages/marketing.wrn b/examples/component-showcase/app/pages/marketing.wrn
new file mode 100644
index 00000000..6be65f9e
--- /dev/null
+++ b/examples/component-showcase/app/pages/marketing.wrn
@@ -0,0 +1,132 @@
+// Generated by scripts/generate-showcase.mjs. Do not edit directly.
+page MarketingShowcase {
+  layout = "showcase"
+  seo {
+    title = "Marketing components"
+    description = "10 marketing components from @wrnexus/ui."
+  }
+  view {
+    <header class="showcase-hero showcase-hero--category">
+      <span class="showcase-eyebrow">Component category</span>
+      <h1 class="showcase-title">Marketing</h1>
+      <p class="showcase-description">10 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
+      <div class="category-meta"><span>10 components</span><span>Multiple use cases</span><span>30 live configurations</span></div>
+    </header>
+    <div class="catalog-grid">
+      <article class="catalog-card" data-interactive-preview="false">
+        <div class="catalog-card-preview">
+          <div class="catalog-card-glow" aria-hidden="true"></div>
+          <div class="catalog-card-stage"><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>
+        <div class="catalog-card-body">
+          <div><span class="catalog-card-category">Marketing</span><h2>Announcement Bar</h2><p>Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.</p></div>
+          <div class="catalog-card-footer"><span>19 props · 0 slots</span><a href="/components/announcement-bar">Explore component <span aria-hidden="true">→</span></a></div>
+        </div>
+      </article>
+      <article class="catalog-card" data-interactive-preview="false">
+        <div class="catalog-card-preview">
+          <div class="catalog-card-glow" aria-hidden="true"></div>
+          <div class="catalog-card-stage"><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>
+        <div class="catalog-card-body">
+          <div><span class="catalog-card-category">Marketing</span><h2>CTASection</h2><p>Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.</p></div>
+          <div class="catalog-card-footer"><span>25 props · 4 slots</span><a href="/components/ctasection">Explore component <span aria-hidden="true">→</span></a></div>
+        </div>
+      </article>
+      <article class="catalog-card" data-interactive-preview="false">
+        <div class="catalog-card-preview">
+          <div class="catalog-card-glow" aria-hidden="true"></div>
+          <div class="catalog-card-stage"><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>
+        <div class="catalog-card-body">
+          <div><span class="catalog-card-category">Marketing</span><h2>Feature Card</h2><p>Present one linked feature or service with media, icon, badge, description, and action.</p></div>
+          <div class="catalog-card-footer"><span>28 props · 4 slots</span><a href="/components/feature-card">Explore component <span aria-hidden="true">→</span></a></div>
+        </div>
+      </article>
+      <article class="catalog-card" data-interactive-preview="false">
+        <div class="catalog-card-preview">
+          <div class="catalog-card-glow" aria-hidden="true"></div>
+          <div class="catalog-card-stage"><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>
+        <div class="catalog-card-body">
+          <div><span class="catalog-card-category">Marketing</span><h2>Feature Icon Card</h2><p>Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.</p></div>
+          <div class="catalog-card-footer"><span>14 props · 2 slots</span><a href="/components/feature-icon-card">Explore component <span aria-hidden="true">→</span></a></div>
+        </div>
+      </article>
+      <article class="catalog-card" data-interactive-preview="false">
+        <div class="catalog-card-preview">
+          <div class="catalog-card-glow" aria-hidden="true"></div>
+          <div class="catalog-card-stage"><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","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"]}]' maxWidth="wide" 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></Hero></div>
+        </div>
+        <div class="catalog-card-body">
+          <div><span class="catalog-card-category">Marketing</span><h2>Hero</h2><p>Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel.</p></div>
+          <div class="catalog-card-footer"><span>38 props · 6 slots</span><a href="/components/hero">Explore component <span aria-hidden="true">→</span></a></div>
+        </div>
+      </article>
+      <article class="catalog-card" data-interactive-preview="false">
+        <div class="catalog-card-preview">
+          <div class="catalog-card-glow" aria-hidden="true"></div>
+          <div class="catalog-card-stage"><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>
+        <div class="catalog-card-body">
+          <div><span class="catalog-card-category">Marketing</span><h2>Hero Actions</h2><p>Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.</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" data-interactive-preview="false">
+        <div class="catalog-card-preview">
+          <div class="catalog-card-glow" aria-hidden="true"></div>
+          <div class="catalog-card-stage"><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>
+        <div class="catalog-card-body">
+          <div><span class="catalog-card-category">Marketing</span><h2>Marketing Section Header</h2><p>Introduce marketing content with an eyebrow, title, description, and optional linked action.</p></div>
+          <div class="catalog-card-footer"><span>12 props · 3 slots</span><a href="/components/marketing-section-header">Explore component <span aria-hidden="true">→</span></a></div>
+        </div>
+      </article>
+      <article class="catalog-card" data-interactive-preview="false">
+        <div class="catalog-card-preview">
+          <div class="catalog-card-glow" aria-hidden="true"></div>
+          <div class="catalog-card-stage"><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>
+        <div class="catalog-card-body">
+          <div><span class="catalog-card-category">Marketing</span><h2>Page Header</h2><p>Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.</p></div>
+          <div class="catalog-card-footer"><span>25 props · 3 slots</span><a href="/components/page-header">Explore component <span aria-hidden="true">→</span></a></div>
+        </div>
+      </article>
+      <article class="catalog-card" data-interactive-preview="false">
+        <div class="catalog-card-preview">
+          <div class="catalog-card-glow" aria-hidden="true"></div>
+          <div class="catalog-card-stage"><SplitHero eyebrow="Balanced layout" title="Combine detailed content" highlight="with a strong visual panel" description="Use SplitHero for product explanations, department introductions, campaigns, and feature storytelling." primaryLabel="View public services" primaryHref="#services" primaryIcon="icon-[lucide--arrow-right]" secondaryLabel="Contact department" secondaryHref="#contact" secondaryIcon="icon-[lucide--phone]" visualPosition="right" reverse="false" ratio="balanced" align="start" size="default" variant="default" maxWidth="wide" fullBleed="true" visualTitle="Split Hero example" visualDescription="A polished default split hero for a modern application." visualItems='[{"id":"split-hero-0-1","key":"split-hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"split-hero-0-2","key":"split-hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' trustItems='[{"id":"split-hero-0-1","key":"split-hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"split-hero-0-2","key":"split-hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' class="showcase-instance showcase-instance--1"><div data-slot="visual">
+<div class="showcase-visual-panel">
+  <span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
+  <strong>Composable visual panel</strong>
+  <p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
+</div></div></SplitHero></div>
+        </div>
+        <div class="catalog-card-body">
+          <div><span class="catalog-card-category">Marketing</span><h2>Split Hero</h2><p>Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel.</p></div>
+          <div class="catalog-card-footer"><span>31 props · 4 slots</span><a href="/components/split-hero">Explore component <span aria-hidden="true">→</span></a></div>
+        </div>
+      </article>
+      <article class="catalog-card" data-interactive-preview="false">
+        <div class="catalog-card-preview">
+          <div class="catalog-card-glow" aria-hidden="true"></div>
+          <div class="catalog-card-stage"><TextLink label="Learn more" href="#learn" external="false" icon="" showArrow="true" underline="false" size="default" variant="default" disabled="false" class="showcase-instance showcase-instance--1" /></div>
+        </div>
+        <div class="catalog-card-body">
+          <div><span class="catalog-card-category">Marketing</span><h2>Text Link</h2><p>Render an accessible text action with optional icon, arrow, underline, external state, and semantic styling.</p></div>
+          <div class="catalog-card-footer"><span>14 props · 0 slots</span><a href="/components/text-link">Explore component <span aria-hidden="true">→</span></a></div>
+        </div>
+      </article></div>
+  }
+}
diff --git a/examples/component-showcase/app/pages/navigation.wrn b/examples/component-showcase/app/pages/navigation.wrn
index 30aef08e..8705dd94 100644
--- a/examples/component-showcase/app/pages/navigation.wrn
+++ b/examples/component-showcase/app/pages/navigation.wrn
@@ -3,133 +3,113 @@ page NavigationShowcase {
   layout = "showcase"
   seo {
     title = "Navigation components"
-    description = "12 navigation components from @wrnexus/ui."
+    description = "10 navigation components from @wrnexus/ui."
   }
   view {
     <header class="showcase-hero showcase-hero--category">
       <span class="showcase-eyebrow">Component category</span>
       <h1 class="showcase-title">Navigation</h1>
-      <p class="showcase-description">12 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
-      <div class="category-meta"><span>12 components</span><span>Multiple use cases</span><span>36 live configurations</span></div>
+      <p class="showcase-description">10 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
+      <div class="category-meta"><span>10 components</span><span>Multiple use cases</span><span>30 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="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="catalog-card-stage"><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>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Navigation</span><h2>Back To Top</h2><p>Accessible scroll-to-top control with visibility threshold.</p></div>
-          <div class="catalog-card-footer"><span>12 props · 0 slots</span><a href="/components/back-to-top">Explore component <span aria-hidden="true">→</span></a></div>
+          <div><span class="catalog-card-category">Navigation</span><h2>Back To Top</h2><p>Provide a responsive floating control that returns long pages to the top and can show scroll progress.</p></div>
+          <div class="catalog-card-footer"><span>15 props · 0 slots</span><a href="/components/back-to-top">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="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="catalog-card-stage"><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>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Navigation</span><h2>Breadcrumb</h2><p>Theme-aware, responsive breadcrumb component.</p></div>
-          <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/breadcrumb">Explore component <span aria-hidden="true">→</span></a></div>
+          <div><span class="catalog-card-category">Navigation</span><h2>Breadcrumb</h2><p>Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events.</p></div>
+          <div class="catalog-card-footer"><span>12 props · 0 slots</span><a href="/components/breadcrumb">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="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>
-        <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Navigation</span><h2>Footer</h2><p>Responsive application footer with structured links and pre/post content slots.</p></div>
-          <div class="catalog-card-footer"><span>8 props · 4 slots</span><a href="/components/footer">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="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="catalog-card-stage"><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>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Navigation</span><h2>Mega Menu</h2><p>Theme-aware, responsive mega menu component.</p></div>
           <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/mega-menu">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="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="catalog-card-stage"><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>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Navigation</span><h2>Nav</h2><p>Theme-aware, responsive nav component.</p></div>
           <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/nav">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="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;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;]}]" sticky="false" openOnHover="false" mobileLabel="Navbar" class="showcase-instance showcase-instance--1"><div slot="topbar" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>topbar 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="catalog-card-stage"><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>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Navigation</span><h2>Navbar</h2><p>Theme-aware, responsive navbar component.</p></div>
           <div class="catalog-card-footer"><span>13 props · 2 slots</span><a href="/components/navbar">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="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="catalog-card-stage"><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>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Navigation</span><h2>Pagination</h2><p>Theme-aware, responsive pagination component.</p></div>
           <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/pagination">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="PreferenceSwitcher" size="default" themeLabel="Preference Switcher" colorLabel="Preference Switcher" languageLabel="Preference Switcher" compact="false" class="showcase-instance showcase-instance--1"></div></div>
-        </div>
-        <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Navigation</span><h2>Preference Switcher</h2><p>Accessible theme, accent color, and language preference controls.</p></div>
-          <div class="catalog-card-footer"><span>9 props · 0 slots</span><a href="/components/preference-switcher">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="Scrollspy" size="default" label="Scrollspy" items="[{&quot;id&quot;:&quot;scrollspy-0-1&quot;,&quot;key&quot;:&quot;scrollspy-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;#scrollspy-demo&quot;,&quot;actionHref&quot;:&quot;#scrollspy-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;scrollspy-0-2&quot;,&quot;key&quot;:&quot;scrollspy-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;#scrollspy-demo&quot;,&quot;actionHref&quot;:&quot;#scrollspy-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="catalog-card-stage"><Scrollspy size="default" label="Scrollspy" items='[{"id":"scrollspy-0-1","key":"scrollspy-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#scrollspy-demo","actionHref":"#scrollspy-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","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":"scrollspy-0-2","key":"scrollspy-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#scrollspy-demo","actionHref":"#scrollspy-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","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>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Navigation</span><h2>Scrollspy</h2><p>Theme-aware, responsive scrollspy component.</p></div>
           <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/scrollspy">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="Sidebar" size="default" label="Sidebar" items="[{&quot;id&quot;:&quot;sidebar-0-1&quot;,&quot;key&quot;:&quot;sidebar-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;#sidebar-demo&quot;,&quot;actionHref&quot;:&quot;#sidebar-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;sidebar-0-2&quot;,&quot;key&quot;:&quot;sidebar-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;#sidebar-demo&quot;,&quot;actionHref&quot;:&quot;#sidebar-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;]}]" mobileLabel="Sidebar" class="showcase-instance showcase-instance--1"></div></div>
+          <div class="catalog-card-stage"><Sidebar size="default" label="Sidebar" items='[{"id":"sidebar-0-1","key":"sidebar-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#sidebar-demo","actionHref":"#sidebar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","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":"sidebar-0-2","key":"sidebar-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#sidebar-demo","actionHref":"#sidebar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' mobileLabel="Sidebar" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Navigation</span><h2>Sidebar</h2><p>Theme-aware, responsive sidebar component.</p></div>
           <div class="catalog-card-footer"><span>8 props · 1 slots</span><a href="/components/sidebar">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="Stepper" size="default" label="Stepper" items="[{&quot;id&quot;:&quot;stepper-0-1&quot;,&quot;key&quot;:&quot;stepper-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;#stepper-demo&quot;,&quot;actionHref&quot;:&quot;#stepper-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;stepper-0-2&quot;,&quot;key&quot;:&quot;stepper-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;#stepper-demo&quot;,&quot;actionHref&quot;:&quot;#stepper-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="catalog-card-stage"><Stepper size="default" label="Stepper" items='[{"id":"stepper-0-1","key":"stepper-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#stepper-demo","actionHref":"#stepper-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"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":"stepper-0-2","key":"stepper-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#stepper-demo","actionHref":"#stepper-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"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>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Navigation</span><h2>Stepper</h2><p>Theme-aware, responsive stepper component.</p></div>
           <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/stepper">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="Tabs" size="default" label="Tabs" items="[{&quot;id&quot;:&quot;tabs-0-1&quot;,&quot;key&quot;:&quot;tabs-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;#tabs-demo&quot;,&quot;actionHref&quot;:&quot;#tabs-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;tabs-0-2&quot;,&quot;key&quot;:&quot;tabs-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;#tabs-demo&quot;,&quot;actionHref&quot;:&quot;#tabs-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="catalog-card-stage"><Tabs size="default" label="Service information" items='[{"label":"Overview","value":"overview","content":"Overview content"},{"label":"Requirements","value":"requirements","content":"Requirements content"},{"label":"Process","value":"process","content":"Process content"}]' active="overview" orientation="horizontal" class="showcase-instance showcase-instance--1" /></div>
         </div>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Navigation</span><h2>Tabs</h2><p>Theme-aware, responsive tabs component.</p></div>
+          <div><span class="catalog-card-category">Navigation</span><h2>Tabs</h2><p>Switch between related responsive content panels with horizontal or vertical orientation and selection events.</p></div>
           <div class="catalog-card-footer"><span>7 props · 1 slots</span><a href="/components/tabs">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article></div>
diff --git a/examples/component-showcase/app/pages/overlays.wrn b/examples/component-showcase/app/pages/overlays.wrn
index 8d03d267..43c9ea5e 100644
--- a/examples/component-showcase/app/pages/overlays.wrn
+++ b/examples/component-showcase/app/pages/overlays.wrn
@@ -13,64 +13,64 @@ page OverlaysShowcase {
       <div class="category-meta"><span>6 components</span><span>Multiple use cases</span><span>18 live configurations</span></div>
     </header>
     <div class="catalog-grid">
-      <article class="catalog-card">
+      <article class="catalog-card" data-interactive-preview="true">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><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>
+          <div class="catalog-card-stage"><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><p class="catalog-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Right-click or use the trigger button</p></div>
         </div>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Overlays</span><h2>Context Menu</h2><p>Theme-aware, responsive context menu component.</p></div>
-          <div class="catalog-card-footer"><span>8 props · 1 slots</span><a href="/components/context-menu">Explore component <span aria-hidden="true">→</span></a></div>
+          <div><span class="catalog-card-category">Overlays</span><h2>Context Menu</h2><p>Open an accessible keyboard-aware action menu from pointer or keyboard context interactions.</p></div>
+          <div class="catalog-card-footer"><span>18 props · 4 slots</span><a href="/components/context-menu">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
-      <article class="catalog-card">
+      <article class="catalog-card" data-interactive-preview="true">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><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>
+          <div class="catalog-card-stage"><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><p class="catalog-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the drawer</p></div>
         </div>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Overlays</span><h2>Drawer</h2><p>Theme-aware, responsive drawer component.</p></div>
-          <div class="catalog-card-footer"><span>8 props · 1 slots</span><a href="/components/drawer">Explore component <span aria-hidden="true">→</span></a></div>
+          <div><span class="catalog-card-category">Overlays</span><h2>Drawer</h2><p>Present responsive modal side or bottom content with focus management, backdrop behavior, slots, and close events.</p></div>
+          <div class="catalog-card-footer"><span>19 props · 4 slots</span><a href="/components/drawer">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
-      <article class="catalog-card">
+      <article class="catalog-card" data-interactive-preview="true">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><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>
+          <div class="catalog-card-stage"><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" /><p class="catalog-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the menu</p></div>
         </div>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Overlays</span><h2>Dropdown</h2><p>Theme-aware, responsive dropdown component.</p></div>
-          <div class="catalog-card-footer"><span>6 props · 3 slots</span><a href="/components/dropdown">Explore component <span aria-hidden="true">→</span></a></div>
+          <div><span class="catalog-card-category">Overlays</span><h2>Dropdown</h2><p>Open an accessible anchored menu with keyboard navigation, item selection, actions, and responsive placement.</p></div>
+          <div class="catalog-card-footer"><span>17 props · 4 slots</span><a href="/components/dropdown">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
-      <article class="catalog-card">
+      <article class="catalog-card" data-interactive-preview="true">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><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>
+          <div class="catalog-card-stage"><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><p class="catalog-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the modal</p></div>
         </div>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Overlays</span><h2>Modal</h2><p>Theme-aware, responsive modal component.</p></div>
-          <div class="catalog-card-footer"><span>8 props · 1 slots</span><a href="/components/modal">Explore component <span aria-hidden="true">→</span></a></div>
+          <div><span class="catalog-card-category">Overlays</span><h2>Modal</h2><p>Present an accessible modal dialog with focus management, confirmation, cancellation, slots, and responsive sizing.</p></div>
+          <div class="catalog-card-footer"><span>28 props · 4 slots</span><a href="/components/modal">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
-      <article class="catalog-card">
+      <article class="catalog-card" data-interactive-preview="true">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><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>
+          <div class="catalog-card-stage"><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><p class="catalog-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Click the trigger to open the popover</p></div>
         </div>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Overlays</span><h2>Popover</h2><p>Theme-aware, responsive popover component.</p></div>
-          <div class="catalog-card-footer"><span>8 props · 1 slots</span><a href="/components/popover">Explore component <span aria-hidden="true">→</span></a></div>
+          <div><span class="catalog-card-category">Overlays</span><h2>Popover</h2><p>Display anchored supporting content with configurable trigger, placement, responsive sizing, and open or close events.</p></div>
+          <div class="catalog-card-footer"><span>23 props · 4 slots</span><a href="/components/popover">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article>
-      <article class="catalog-card">
+      <article class="catalog-card" data-interactive-preview="true">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage"><div data-component="Tooltip" size="default" title="Tooltip example" description="A polished default tooltip for a modern application." open="true" closeLabel="Tooltip" class="showcase-instance showcase-instance--1"><button type="button" class="wire-btn wire-btn--secondary">Hover for details</button></div></div>
+          <div class="catalog-card-stage"><Tooltip id="help-tooltip" open="false" defaultOpen="false" title="Helpful information" description="A polished default tooltip for a modern application." content="Tooltips explain controls without interrupting the user." placement="top" size="default" variant="dark" offset="10" showArrow="true" interactive="false" disabled="false" class="showcase-instance showcase-instance--1"><div data-slot="trigger"><button type="button" class="showcase-action">Hover or focus</button></div></Tooltip><p class="catalog-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>Hover, focus, or click the trigger</p></div>
         </div>
         <div class="catalog-card-body">
-          <div><span class="catalog-card-category">Overlays</span><h2>Tooltip</h2><p>Theme-aware, responsive tooltip component.</p></div>
-          <div class="catalog-card-footer"><span>8 props · 1 slots</span><a href="/components/tooltip">Explore component <span aria-hidden="true">→</span></a></div>
+          <div><span class="catalog-card-category">Overlays</span><h2>Tooltip</h2><p>Show concise accessible contextual help on hover, focus, click, or controlled open state.</p></div>
+          <div class="catalog-card-footer"><span>17 props · 2 slots</span><a href="/components/tooltip">Explore component <span aria-hidden="true">→</span></a></div>
         </div>
       </article></div>
   }
diff --git a/examples/component-showcase/app/pages/resources.wrn b/examples/component-showcase/app/pages/resources.wrn
index 94e522fd..8eb6f36c 100644
--- a/examples/component-showcase/app/pages/resources.wrn
+++ b/examples/component-showcase/app/pages/resources.wrn
@@ -10,7 +10,7 @@ page ResourcesGuide {
       <header class="docs-intro"><span class="showcase-eyebrow">Getting Started</span><h1>Resources</h1><p>Use the component API pages, blocks, and templates as production starting points.</p></header>
       <section class="guide-section"><h2>Overview</h2><p>Use the component API pages, blocks, and templates as production starting points.</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>
   }
 }
diff --git a/examples/component-showcase/app/pages/sizing.wrn b/examples/component-showcase/app/pages/sizing.wrn
index 24eb85d4..32bbbd97 100644
--- a/examples/component-showcase/app/pages/sizing.wrn
+++ b/examples/component-showcase/app/pages/sizing.wrn
@@ -10,7 +10,7 @@ page SizingGuide {
       <header class="docs-intro"><span class="showcase-eyebrow">Customization</span><h1>Sizing</h1><p>Compact through large scales adjust the complete component system consistently.</p></header>
       <section class="guide-section"><h2>Component size</h2><p>Every component accepts xs, sm, default, md, lg, and xl.</p></section><section class="guide-section"><h2>Global density</h2><p>Compact, default, comfortable, and large scale the complete interface.</p></section><section class="guide-section"><h2>Responsive sizing</h2><p>Component sizing cooperates with responsive breakpoints.</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>
   }
 }
diff --git a/examples/component-showcase/app/pages/tables.wrn b/examples/component-showcase/app/pages/tables.wrn
index 0429e8b2..7c4d3bd4 100644
--- a/examples/component-showcase/app/pages/tables.wrn
+++ b/examples/component-showcase/app/pages/tables.wrn
@@ -13,10 +13,10 @@ page TablesShowcase {
       <div class="category-meta"><span>1 components</span><span>Multiple use cases</span><span>3 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="Table" size="default" columns="[{&quot;id&quot;:&quot;table-0-1&quot;,&quot;key&quot;:&quot;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;#table-demo&quot;,&quot;actionHref&quot;:&quot;#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;table-0-2&quot;,&quot;key&quot;:&quot;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;#table-demo&quot;,&quot;actionHref&quot;:&quot;#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;table-0-1&quot;,&quot;key&quot;:&quot;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;#table-demo&quot;,&quot;actionHref&quot;:&quot;#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;table-0-2&quot;,&quot;key&quot;:&quot;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;#table-demo&quot;,&quot;actionHref&quot;:&quot;#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;]}]" striped="true" class="showcase-instance showcase-instance--1"><thead><tr><th>Name</th><th>Status</th></tr></thead><tbody><tr><td>Production</td><td>Active</td></tr><tr><td>Staging</td><td>Ready</td></tr></tbody></div></div>
+          <div class="catalog-card-stage"><Table size="default" columns='[{"id":"table-0-1","key":"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":"#table-demo","actionHref":"#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":"table-0-2","key":"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":"#table-demo","actionHref":"#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":"table-0-1","key":"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":"#table-demo","actionHref":"#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":"table-0-2","key":"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":"#table-demo","actionHref":"#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"><thead><tr><th>Name</th><th>Status</th></tr></thead><tbody><tr><td>Production</td><td>Active</td></tr><tr><td>Staging</td><td>Ready</td></tr></tbody></Table></div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">Tables</span><h2>Table</h2><p>Theme-aware, responsive table component.</p></div>
diff --git a/examples/component-showcase/app/pages/templates.wrn b/examples/component-showcase/app/pages/templates.wrn
index a3b5ddbc..e1ae8ae7 100644
--- a/examples/component-showcase/app/pages/templates.wrn
+++ b/examples/component-showcase/app/pages/templates.wrn
@@ -5,7 +5,7 @@ page Templates {
     <div class="page-marketplace page-templates">
       <nav class="market-tabs"><a href="#all">All templates</a><a href="#admin">Dashboards & Admin</a><a href="#commerce">Ecommerce</a><a href="#websites">Websites</a><a href="#support">Support</a><a href="#finance">Finance</a></nav>
       <header><span class="showcase-eyebrow">Complete products</span><h1>Production-ready templates</h1><p>Responsive page systems assembled from WRNexus blocks and components.</p></header>
-      <div class="template-list"><article class="template-card"><div><small>31 pages</small><h2>Admin dashboard</h2><p>Dashboard & Admin template with consistent navigation, content, forms, and responsive behavior.</p><a href="/blocks">Preview <span>→</span></a></div><div class="template-scenes template-scenes--1"><i></i><i></i><i></i></div></article><article class="template-card"><div><small>18 pages</small><h2>Commerce storefront</h2><p>Ecommerce template with consistent navigation, content, forms, and responsive behavior.</p><a href="/blocks">Preview <span>→</span></a></div><div class="template-scenes template-scenes--2"><i></i><i></i><i></i></div></article><article class="template-card"><div><small>12 pages</small><h2>SaaS website</h2><p>Websites template with consistent navigation, content, forms, and responsive behavior.</p><a href="/blocks">Preview <span>→</span></a></div><div class="template-scenes template-scenes--3"><i></i><i></i><i></i></div></article><article class="template-card"><div><small>9 pages</small><h2>Support center</h2><p>Support template with consistent navigation, content, forms, and responsive behavior.</p><a href="/blocks">Preview <span>→</span></a></div><div class="template-scenes template-scenes--4"><i></i><i></i><i></i></div></article><article class="template-card"><div><small>14 pages</small><h2>Finance workspace</h2><p>Finance & Payments template with consistent navigation, content, forms, and responsive behavior.</p><a href="/blocks">Preview <span>→</span></a></div><div class="template-scenes template-scenes--5"><i></i><i></i><i></i></div></article></div>
+      <div class="template-list"><article class="template-card"><div><small>31 pages</small><h2>Admin dashboard</h2><p>Dashboard & Admin template with consistent navigation, content, forms, and responsive behavior.</p><a href="/block-library">Preview <span>→</span></a></div><div class="template-scenes template-scenes--1"><i></i><i></i><i></i></div></article><article class="template-card"><div><small>18 pages</small><h2>Commerce storefront</h2><p>Ecommerce template with consistent navigation, content, forms, and responsive behavior.</p><a href="/block-library">Preview <span>→</span></a></div><div class="template-scenes template-scenes--2"><i></i><i></i><i></i></div></article><article class="template-card"><div><small>12 pages</small><h2>SaaS website</h2><p>Websites template with consistent navigation, content, forms, and responsive behavior.</p><a href="/block-library">Preview <span>→</span></a></div><div class="template-scenes template-scenes--3"><i></i><i></i><i></i></div></article><article class="template-card"><div><small>9 pages</small><h2>Support center</h2><p>Support template with consistent navigation, content, forms, and responsive behavior.</p><a href="/block-library">Preview <span>→</span></a></div><div class="template-scenes template-scenes--4"><i></i><i></i><i></i></div></article><article class="template-card"><div><small>14 pages</small><h2>Finance workspace</h2><p>Finance & Payments template with consistent navigation, content, forms, and responsive behavior.</p><a href="/block-library">Preview <span>→</span></a></div><div class="template-scenes template-scenes--5"><i></i><i></i><i></i></div></article></div>
     </div>
   }
 }
diff --git a/examples/component-showcase/app/pages/themes.wrn b/examples/component-showcase/app/pages/themes.wrn
index d4d1fade..c118b6d0 100644
--- a/examples/component-showcase/app/pages/themes.wrn
+++ b/examples/component-showcase/app/pages/themes.wrn
@@ -10,7 +10,7 @@ page ThemesGuide {
       <header class="docs-intro"><span class="showcase-eyebrow">Customization</span><h1>Themes</h1><p>Theme presets control radius, surface treatment, borders, shadows, and motion.</p></header>
       <section class="guide-section"><h2>Default</h2><p>Balanced surfaces, borders, elevation, and radius.</p></section><section class="guide-section"><h2>Soft and sharp</h2><p>Choose friendly rounded surfaces or dense operational styling.</p></section><section class="guide-section"><h2>Glass</h2><p>Use translucent layered surfaces while retaining semantic tokens.</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>
   }
 }
diff --git a/examples/component-showcase/app/routes.gen.ts b/examples/component-showcase/app/routes.gen.ts
index 8680dae8..da58280e 100644
--- a/examples/component-showcase/app/routes.gen.ts
+++ b/examples/component-showcase/app/routes.gen.ts
@@ -6,7 +6,7 @@ export interface Routes {
   "/accessibility": Record<string, never>;
   "/advanced-forms": Record<string, never>;
   "/base": Record<string, never>;
-  "/blocks": Record<string, never>;
+  "/block-library": Record<string, never>;
   "/colors": Record<string, never>;
   "/components/accordion": Record<string, never>;
   "/components/advanced-date-picker": Record<string, never>;
@@ -116,7 +116,9 @@ export interface Routes {
   "/components/tree-view": Record<string, never>;
   "/components/typography": Record<string, never>;
   "/components/wysiwyg-editor": Record<string, never>;
+  "/core": Record<string, never>;
   "/dark-mode": Record<string, never>;
+  "/data": Record<string, never>;
   "/docs": Record<string, never>;
   "/fonts": Record<string, never>;
   "/forms": Record<string, never>;
@@ -124,6 +126,7 @@ export interface Routes {
   "/installation": Record<string, never>;
   "/integrations": Record<string, never>;
   "/layout": Record<string, never>;
+  "/marketing": Record<string, never>;
   "/navigation": Record<string, never>;
   "/overlays": Record<string, never>;
   "/resources": Record<string, never>;
diff --git a/examples/component-showcase/app/styles/global.css b/examples/component-showcase/app/styles/global.css
index dfdd7483..742c472b 100644
--- a/examples/component-showcase/app/styles/global.css
+++ b/examples/component-showcase/app/styles/global.css
@@ -986,10 +986,6 @@ html[data-design-panel-open] .design-panel {
 }
 
 .docs-directory-group > div > a {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
   overflow: hidden;
   padding: 0.42rem 0.55rem;
   border-radius: 0.45rem;
@@ -1001,34 +997,6 @@ html[data-design-panel-open] .design-panel {
   white-space: nowrap;
 }
 
-.docs-directory-group > div > a > [data-docs-component-name] {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.docs-directory-group [data-component-status] {
-  flex: 0 0 auto;
-  padding: 0.08rem 0.32rem;
-  border: 1px solid currentColor;
-  border-radius: 999px;
-  font-size: 0.5rem;
-  font-weight: 800;
-  letter-spacing: 0.03em;
-  line-height: 1.25;
-}
-
-.docs-directory-group [data-component-status="complete"] {
-  color: var(--wire-color-success);
-}
-
-.docs-directory-group [data-component-status="pending"] {
-  color: var(--wire-color-muted);
-}
-
-.docs-directory-group [data-component-status="working"] {
-  color: var(--wire-color-warning);
-}
-
 .docs-directory-group > div > a:hover,
 .docs-directory-group > div > a[aria-current="page"] {
   color: var(--wire-color-text);
@@ -2319,19 +2287,6 @@ body {
   color: var(--wire-color-primary);
 }
 
-.detail-toc-group {
-  margin-top: 0.35rem;
-  color: var(--wire-color-text);
-  font-size: 0.72rem;
-  font-weight: 700;
-}
-
-.detail-toc-group + a,
-.detail-toc-group + a + a,
-.detail-toc-group + a + a + a {
-  padding-inline-start: 0.75rem;
-}
-
 .docs-table-wrap {
   overflow: auto;
   border: 1px solid var(--wire-color-border);
@@ -2510,3 +2465,371 @@ body {
     grid-template-columns: 1fr;
   }
 }
+
+/* Component-specific showcase stages generated from showcase-profiles.mjs. */
+.showcase-visual-panel,
+.showcase-shell-preview,
+.showcase-content-block,
+.showcase-overlay-content,
+.showcase-status-panel,
+.showcase-context-target {
+  width: 100%;
+  min-width: 0;
+  border: 1px solid var(--wire-color-border);
+  border-radius: 1.25rem;
+  background: color-mix(in srgb, var(--wire-color-surface-raised) 92%, transparent);
+  color: var(--wire-color-text);
+}
+
+.showcase-visual-panel {
+  display: grid;
+  place-items: center;
+  gap: 0.75rem;
+  min-height: 18rem;
+  padding: clamp(1.5rem, 4vw, 3rem);
+  text-align: center;
+  background:
+    radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--wire-color-primary) 22%, transparent), transparent 38%),
+    color-mix(in srgb, var(--wire-color-surface-raised) 94%, transparent);
+}
+
+.showcase-visual-panel > span {
+  color: var(--wire-color-primary);
+}
+
+.showcase-visual-panel strong {
+  font-size: clamp(1.1rem, 2vw, 1.45rem);
+}
+
+.showcase-visual-panel p,
+.showcase-card-copy,
+.showcase-content-block p,
+.showcase-overlay-content p,
+.showcase-status-panel p {
+  margin: 0;
+  color: var(--wire-color-muted);
+  line-height: 1.7;
+}
+
+.showcase-shell-preview {
+  display: grid;
+  overflow: hidden;
+}
+
+.showcase-shell-preview > * {
+  padding: 1rem 1.25rem;
+}
+
+.showcase-shell-preview header,
+.showcase-shell-preview footer {
+  background: color-mix(in srgb, var(--wire-color-primary) 10%, transparent);
+}
+
+.showcase-shell-preview main {
+  min-height: 9rem;
+}
+
+.showcase-inline-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.showcase-action {
+  display: inline-flex;
+  min-height: 2.75rem;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.7rem 1rem;
+  border: 1px solid var(--wire-color-border);
+  border-radius: 0.8rem;
+  color: var(--wire-color-text);
+  background: color-mix(in srgb, var(--wire-color-surface-raised) 88%, transparent);
+  font-size: 0.875rem;
+  font-weight: 650;
+  text-decoration: none;
+}
+
+.showcase-action--primary {
+  border-color: color-mix(in srgb, var(--wire-color-primary) 72%, transparent);
+  background: var(--wire-color-primary);
+  color: var(--wire-color-primary-contrast);
+}
+
+.showcase-content-block,
+.showcase-overlay-content,
+.showcase-status-panel,
+.showcase-context-target {
+  display: grid;
+  gap: 0.75rem;
+  padding: 1.25rem;
+}
+
+.showcase-grid-items {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
+  gap: 0.75rem;
+  width: 100%;
+}
+
+.showcase-grid-items > * {
+  min-width: 0;
+  padding: 1rem;
+  border: 1px solid var(--wire-color-border);
+  border-radius: 0.85rem;
+  background: var(--wire-color-surface-raised);
+}
+
+.showcase-footer-banner,
+.showcase-footer-legal {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  width: 100%;
+  padding: 1rem clamp(1rem, 3vw, 2rem);
+}
+
+.showcase-footer-banner {
+  background: color-mix(in srgb, var(--wire-color-primary) 12%, var(--wire-color-surface));
+}
+
+.showcase-footer-legal {
+  color: var(--wire-color-muted);
+  font-size: 0.85rem;
+}
+
+.showcase-card-value {
+  display: block;
+  color: var(--wire-color-primary);
+  font-size: clamp(2rem, 5vw, 3.25rem);
+  line-height: 1;
+}
+
+.showcase-typography {
+  display: grid;
+  gap: 1rem;
+  color: var(--wire-color-text);
+}
+
+.showcase-typography :where(h2, h3, p, ul) {
+  margin: 0;
+}
+
+.showcase-typography ul {
+  padding-inline-start: 1.25rem;
+}
+
+.playground-event-log {
+  display: grid;
+  gap: 0.5rem;
+  margin: 0 1.25rem 1.25rem;
+  padding: 0.9rem 1rem;
+  border: 1px solid var(--wire-color-border);
+  border-radius: 0.9rem;
+  background: color-mix(in srgb, var(--wire-color-surface-raised) 88%, transparent);
+  color: var(--wire-color-muted);
+  font-size: 0.8rem;
+}
+
+.playground-event-log strong {
+  color: var(--wire-color-text);
+}
+
+.playground-event-log pre {
+  overflow: auto;
+  max-height: 12rem;
+  margin: 0;
+  white-space: pre-wrap;
+  color: var(--wire-color-primary);
+}
+
+.detail-event-examples {
+  display: grid;
+  gap: 1rem;
+  min-width: 0;
+}
+
+/* Full-width components must use the complete preview stage rather than the
+   generic compact component cap. This also prevents narrow MetricGrid cards. */
+:is(.demo-render, .playground-preview-source):has(
+    [data-ui-component="PublicPageShell"],
+    [data-ui-component="AnnouncementBar"],
+    [data-ui-component="PageHeader"],
+    [data-ui-component="Hero"],
+    [data-ui-component="SplitHero"],
+    [data-ui-component="Section"],
+    [data-ui-component="FeatureGrid"],
+    [data-ui-component="MetricGrid"],
+    [data-ui-component="StatsBar"],
+    [data-ui-component="CTASection"],
+    [data-ui-component="Footer"]
+  ) {
+  place-items: stretch;
+  align-content: start;
+}
+
+:is(.demo-render, .playground-preview-source)
+  > *:has(
+    [data-ui-component="PublicPageShell"],
+    [data-ui-component="AnnouncementBar"],
+    [data-ui-component="PageHeader"],
+    [data-ui-component="Hero"],
+    [data-ui-component="SplitHero"],
+    [data-ui-component="Section"],
+    [data-ui-component="FeatureGrid"],
+    [data-ui-component="MetricGrid"],
+    [data-ui-component="StatsBar"],
+    [data-ui-component="CTASection"],
+    [data-ui-component="Footer"]
+  ),
+:is(.demo-render, .playground-preview-source)
+  > :is(
+    [data-ui-component="PublicPageShell"],
+    [data-ui-component="AnnouncementBar"],
+    [data-ui-component="PageHeader"],
+    [data-ui-component="Hero"],
+    [data-ui-component="SplitHero"],
+    [data-ui-component="Section"],
+    [data-ui-component="FeatureGrid"],
+    [data-ui-component="MetricGrid"],
+    [data-ui-component="StatsBar"],
+    [data-ui-component="CTASection"],
+    [data-ui-component="Footer"]
+  ) {
+  width: 100%;
+  max-width: none;
+  min-width: 0;
+}
+
+:is(.demo-render, .playground-preview-source)
+  :is([data-ui-component="FeatureGrid"], [data-ui-component="MetricGrid"], [data-ui-component="StatsBar"]) {
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+}
+
+:is(.demo-render, .playground-preview-source):has(
+    [data-ui-component="ContextMenu"],
+    [data-ui-component="Dropdown"],
+    [data-ui-component="Popover"],
+    [data-ui-component="Tooltip"]
+  ) {
+  min-height: 24rem;
+  place-items: center;
+  overflow: visible;
+}
+
+:is(.demo-render, .playground-preview-source):has(
+    [data-ui-component="Drawer"],
+    [data-ui-component="Modal"]
+  ) {
+  min-height: 30rem;
+  place-items: stretch;
+  isolation: isolate;
+}
+
+@media (max-width: 640px) {
+  .showcase-inline-actions,
+  .showcase-footer-banner,
+  .showcase-footer-legal {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .showcase-action {
+    width: 100%;
+  }
+}
+
+/* Interactive overlay previews -------------------------------------------------
+   Overlay components must begin closed and remain usable inside catalog cards,
+   detail demos, and the live playground. */
+.catalog-card[data-interactive-preview="true"] {
+  overflow: visible;
+}
+
+.catalog-card[data-interactive-preview="true"]:hover {
+  transform: none;
+}
+
+.catalog-card[data-interactive-preview="true"] .catalog-card-preview {
+  overflow: visible;
+  min-height: 22rem;
+  border-radius: 1.4rem 1.4rem 0 0;
+}
+
+.catalog-card[data-interactive-preview="true"] .catalog-card-stage {
+  display: grid;
+  width: min(100%, 34rem);
+  justify-items: center;
+  gap: 0.85rem;
+}
+
+.catalog-interaction-hint,
+.demo-interaction-hint {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  gap: 0.45rem;
+  margin: 0;
+  padding: 0.42rem 0.65rem;
+  color: var(--wire-color-muted);
+  background: color-mix(in srgb, var(--wire-color-surface) 88%, transparent);
+  border: 1px solid var(--wire-color-border);
+  border-radius: 999px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.demo-interaction-hint {
+  margin: 1rem auto 0;
+}
+
+/* Keep full-screen overlays inside their showcase canvas instead of covering
+   the complete documentation application. */
+:is(.catalog-card-preview, .demo-render, .playground-preview-source):has(
+    [data-ui-component="Drawer"],
+    [data-ui-component="Modal"]
+  ) {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+:is(.catalog-card-preview, .demo-render, .playground-preview-source)
+  [data-ui-component="Drawer"]
+  .wire-drawer__layer,
+:is(.catalog-card-preview, .demo-render, .playground-preview-source)
+  [data-ui-component="Modal"]
+  .wire-modal__layer {
+  position: absolute !important;
+  inset: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  max-height: none !important;
+}
+
+:is(.catalog-card-preview, .demo-render, .playground-preview-source):has(
+    [data-ui-component="Drawer"],
+    [data-ui-component="Modal"]
+  )
+  .catalog-card-stage {
+  position: static;
+}
+
+@media (max-width: 640px) {
+  .catalog-card[data-interactive-preview="true"] .catalog-card-preview {
+    min-height: 18rem;
+  }
+
+  .catalog-interaction-hint,
+  .demo-interaction-hint {
+    border-radius: 0.75rem;
+    text-align: center;
+  }
+}
diff --git a/examples/component-showcase/package.json b/examples/component-showcase/package.json
index 45a019bf..fe1a2e85 100644
--- a/examples/component-showcase/package.json
+++ b/examples/component-showcase/package.json
@@ -4,7 +4,9 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "generate": "node scripts/generate-showcase.mjs",
+    "generate:reference": "bun run ../../scripts/generate-ui-component-reference.mjs",
+    "generate:pages": "node scripts/generate-showcase.mjs",
+    "generate": "bun run generate:reference && bun run generate:pages",
     "dev": "bun run generate && bun run ../../packages/cli/src/index.ts dev .",
     "build": "bun run generate && bun run ../../packages/cli/src/index.ts build .",
     "typecheck": "tsc --noEmit -p tsconfig.json",
diff --git a/examples/component-showcase/public/playground.js b/examples/component-showcase/public/playground.js
index ea18cfe6..f177ecce 100644
--- a/examples/component-showcase/public/playground.js
+++ b/examples/component-showcase/public/playground.js
@@ -1,4 +1,4 @@
-/* global AbortController, DOMParser, HTMLFormElement, HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement, Node, URL, URLSearchParams, clearTimeout, document, fetch, navigator, setTimeout, window */
+/* global AbortController, DOMParser, HTMLFormElement, HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement, MutationObserver, Node, URL, URLSearchParams, clearTimeout, document, fetch, navigator, setTimeout, window */
 
 (() => {
   const SELECTOR = "[data-playground]";
@@ -58,21 +58,10 @@
 
   let design = storedDesign();
   applyDesign(design, false);
-
-  function updateActiveNavigation() {
-    for (const link of document.querySelectorAll(".docs-directory a[href]")) {
-      const target = new URL(link.href, window.location.origin);
-      if (target.pathname === window.location.pathname) {
-        link.setAttribute("aria-current", "page");
-      } else {
-        link.removeAttribute("aria-current");
-      }
-    }
+  for (const link of document.querySelectorAll(".docs-directory a[href]")) {
+    const target = new URL(link.href, window.location.origin);
+    if (target.pathname === window.location.pathname) link.setAttribute("aria-current", "page");
   }
-
-  updateActiveNavigation();
-  window.addEventListener("wrnexus:navigated", updateActiveNavigation);
-
   window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
     if (design.mode === "system") applyDesign(design);
   });
@@ -108,7 +97,7 @@
 
       const name = field.name.slice(3);
       if (field instanceof HTMLInputElement && field.type === "checkbox") {
-        if (field.checked) attributes.push(name);
+        attributes.push(`${name}="${field.checked}"`);
       } else if (field.value !== "") {
         const value = field.hasAttribute("data-playground-json")
           ? `'${field.value.replaceAll("'", "\\'")}'`
@@ -202,6 +191,8 @@
       );
       window.__wrnexusHydrateScopes?.(preview);
       window.__wrnexusHydrateCsrFetches?.(preview);
+      window.wireTheme?.bind?.(document);
+      bindPlaygroundEvents(document);
       status.textContent = "Preview updated";
     } catch (error) {
       if (error?.name !== "AbortError") {
@@ -212,6 +203,51 @@
     }
   }
 
+  const observedPlaygroundEvents = new Set();
+
+  function formatEventDetail(detail) {
+    if (detail === undefined) return "No event detail";
+    if (typeof detail === "string") return detail;
+    try {
+      return JSON.stringify(detail, null, 2);
+    } catch {
+      return String(detail);
+    }
+  }
+
+  function bindPlaygroundEvents(root = document) {
+    for (const playground of root.querySelectorAll?.(SELECTOR) ?? []) {
+      const eventNames = (playground.getAttribute("data-playground-events") || "")
+        .split(",")
+        .map((name) => name.trim())
+        .filter(Boolean);
+      for (const eventName of eventNames) {
+        if (observedPlaygroundEvents.has(eventName)) continue;
+        observedPlaygroundEvents.add(eventName);
+        document.addEventListener(eventName, (event) => {
+          const owner = event.target?.closest?.(SELECTOR);
+          if (!owner) return;
+          const declaredEvents = (owner.getAttribute("data-playground-events") || "").split(",");
+          if (!declaredEvents.includes(eventName)) return;
+          const log = owner.querySelector("[data-playground-event-log]");
+          if (!log) return;
+          log.replaceChildren();
+          const heading = document.createElement("strong");
+          heading.textContent = `@${eventName}`;
+          const output = document.createElement("pre");
+          output.textContent = formatEventDetail(event.detail);
+          log.append(heading, output);
+        });
+      }
+    }
+  }
+
+  bindPlaygroundEvents();
+  new MutationObserver(() => bindPlaygroundEvents(document)).observe(
+    document.getElementById("app") || document.body,
+    { childList: true, subtree: true },
+  );
+
   function schedule(playground) {
     updateCode(playground);
     clearTimeout(timer);
@@ -304,8 +340,7 @@
     const links = [...document.querySelectorAll("[data-docs-component-link]")];
     let visible = 0;
     for (const link of links) {
-      const label = link.querySelector("[data-docs-component-name]")?.textContent || "";
-      const matches = !query || label.toLowerCase().includes(query);
+      const matches = !query || link.textContent.toLowerCase().includes(query);
       link.hidden = !matches;
       if (matches) visible++;
     }
diff --git a/examples/component-showcase/scripts/generate-showcase.mjs b/examples/component-showcase/scripts/generate-showcase.mjs
index 2bab730a..680ef985 100644
--- a/examples/component-showcase/scripts/generate-showcase.mjs
+++ b/examples/component-showcase/scripts/generate-showcase.mjs
@@ -2,6 +2,7 @@ import { mkdirSync, readFileSync, readdirSync, unlinkSync, writeFileSync } from
 import { dirname, join } from "node:path";
 import process from "node:process";
 import { fileURLToPath } from "node:url";
+import { eventDescriptionFor, profileFor } from "./showcase-profiles.mjs";
 
 const exampleRoot = join(dirname(fileURLToPath(import.meta.url)), "..");
 const workspaceRoot = join(exampleRoot, "..", "..");
@@ -12,13 +13,38 @@ const detailPagesDir = join(pagesDir, "components");
 const layoutsDir = join(exampleRoot, "app", "layouts");
 const reference = JSON.parse(readFileSync(referencePath, "utf8"));
 
-function writeIfChanged(path, contents) {
-  try {
-    if (readFileSync(path, "utf8") === contents) return;
-  } catch {
-    // The generated file does not exist yet.
+const interactiveOverlayComponents = new Set([
+  "ContextMenu",
+  "Drawer",
+  "Dropdown",
+  "Modal",
+  "Popover",
+  "Tooltip",
+]);
+
+const overlayVisibilityProps = new Set(["open", "defaultopen", "visible"]);
+
+function isInteractiveOverlay(component) {
+  return interactiveOverlayComponents.has(component.name);
+}
+
+function overlayInteractionLabel(component) {
+  switch (component.name) {
+    case "ContextMenu":
+      return "Right-click or use the trigger button";
+    case "Tooltip":
+      return "Hover, focus, or click the trigger";
+    case "Drawer":
+      return "Click the trigger to open the drawer";
+    case "Modal":
+      return "Click the trigger to open the modal";
+    case "Dropdown":
+      return "Click the trigger to open the menu";
+    case "Popover":
+      return "Click the trigger to open the popover";
+    default:
+      return "Interact with the trigger";
   }
-  writeFileSync(path, contents, "utf8");
 }
 
 const displayName = (name) => name.replace(/([a-z0-9])([A-Z])/g, "$1 $2");
@@ -229,70 +255,6 @@ function defaultValue(prop) {
 
 function sampleValue(prop, component, variation) {
   const name = prop.name.toLowerCase();
-  if (component.name === "FileUploadProgress") {
-    const configuration = fileUploadProgressConfiguration(variation);
-    if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name];
-  }
-  if (basicFormComponentNames.has(component.name)) {
-    const configuration = basicFormConfiguration(component.name, variation);
-    if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name];
-    return undefined;
-  }
-  if (component.name === "Accordion") {
-    const configuration = accordionConfiguration(variation);
-    if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name];
-    return undefined;
-  }
-  if (component.name === "Alert") {
-    const configuration = alertConfiguration(variation);
-    if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name];
-    return undefined;
-  }
-  if (component.name === "Avatar") {
-    const configuration = avatarConfiguration(variation);
-    if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name];
-    return undefined;
-  }
-  if (component.name === "AvatarGroup") {
-    const configuration = avatarGroupConfiguration(variation);
-    if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name];
-    return undefined;
-  }
-  if (component.name === "Badge") {
-    const configuration = badgeConfiguration(variation);
-    if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name];
-    return undefined;
-  }
-  if (component.name === "Blockquote") {
-    const configuration = blockquoteConfiguration(variation);
-    if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name];
-    return undefined;
-  }
-  if (component.name === "ButtonGroup") {
-    const configuration = buttonGroupConfiguration(variation);
-    if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name];
-    return undefined;
-  }
-  if (component.name === "Card") {
-    const configuration = cardConfiguration(variation);
-    if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name];
-    return undefined;
-  }
-  if (component.name === "Carousel") {
-    const configuration = carouselConfiguration(variation);
-    if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name];
-    return undefined;
-  }
-  if (component.name === "ChatBubble") {
-    const configuration = chatBubbleConfiguration(variation);
-    if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name];
-    return undefined;
-  }
-  if (component.name === "Collapse") {
-    const configuration = collapseConfiguration(variation);
-    if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name];
-    return undefined;
-  }
   if (component.name === "AdvancedSelect") {
     const configuration = advancedSelectConfiguration(variation);
     if (Object.hasOwn(configuration, prop.name)) return configuration[prop.name];
@@ -327,15 +289,6 @@ function sampleValue(prop, component, variation) {
 
     return undefined;
   }
-  if (component.name === "ToggleCount") {
-    const configuration = toggleCountConfiguration(variation);
-
-    if (Object.hasOwn(configuration, prop.name)) {
-      return configuration[prop.name];
-    }
-
-    return undefined;
-  }
   const isArray = prop.default === "[]" || prop.type.includes("[]") || prop.type === "array";
   const isObject = prop.default === "{}" || prop.type === "object";
   if (isArray) return sampleArray(prop, component, variation);
@@ -383,6 +336,10 @@ function sampleValue(prop, component, variation) {
   }
   if (name === "controlclass") return variation === 2 ? "shadow-xl" : "";
   if (prop.type === "boolean") {
+    // Interactive overlays must render closed. A hard-coded open=true prop turns
+    // the component into controlled mode, so its own click/hover handlers cannot
+    // close it and multiple overlays block the complete showcase page.
+    if (isInteractiveOverlay(component) && overlayVisibilityProps.has(name)) return false;
     if (name === "compact") return variation === 1;
     if (name === "fullwidth") return variation === 2;
     if (name === "loading" || name === "disabled") return false;
@@ -448,32 +405,59 @@ function sampleValue(prop, component, variation) {
   return undefined;
 }
 
+function wrnAttribute(name, value) {
+  if (typeof value === "object" && value !== null) {
+    const expression = JSON.stringify(value).replaceAll("'", "\\u0027");
+    return `${name}='${expression}'`;
+  }
+  return `${name}="${escapeAttribute(String(value))}"`;
+}
+
 function componentAttributes(component, variation, overrides = {}) {
-  const attributes = [`data-component="${component.mount}"`];
+  const attributes = [];
   for (const prop of component.props) {
     const value = Object.hasOwn(overrides, prop.name)
       ? overrides[prop.name]
       : sampleValue(prop, component, variation);
     if (value === undefined) continue;
-    const encoded =
-      typeof value === "object" ? jsonAttribute(value) : escapeAttribute(String(value));
-    attributes.push(`${prop.name}="${encoded}"`);
+    attributes.push(wrnAttribute(prop.name, value));
   }
   return attributes;
 }
 
-function componentMount(component, variation = 0, overrides = {}) {
-  const slotMarkup = component.slots
-    .map((slot) =>
-      slot === "default"
-        ? defaultSlotMarkup(component, variation)
-        : `<div slot="${escapeAttribute(slot)}" class="showcase-slot"><span class="icon-[lucide--panel-top] size-4" aria-hidden="true"></span><span>${escapeText(displayName(slot))} slot</span></div>`,
-    )
+function configuredSlotMarkup(component, variation, overrides = {}) {
+  const configured = overrides.__slots ?? {};
+  return component.slots
+    .map((slot) => {
+      const explicitlyConfigured = Object.hasOwn(configured, slot);
+      if (slot !== "default" && !explicitlyConfigured) return "";
+
+      const custom = configured[slot];
+      const content = custom ?? (slot === "default" ? defaultSlotMarkup(component, variation) : "");
+      if (!content) return "";
+      return slot === "default"
+        ? content
+        : `<div data-slot="${escapeAttribute(slot)}">${content}</div>`;
+    })
     .join("");
-  return `<div ${componentAttributes(component, variation, overrides).join(" ")}>${slotMarkup}</div>`;
+}
+
+function componentMount(component, variation = 0, overrides = {}) {
+  const attributes = componentAttributes(component, variation, overrides);
+  const slotMarkup = configuredSlotMarkup(component, variation, overrides);
+  const publicTag = /^[A-Z][A-Za-z0-9_]*$/.test(component.mount);
+  if (publicTag) {
+    const attributesSource = attributes.length ? ` ${attributes.join(" ")}` : "";
+    return slotMarkup
+      ? `<${component.mount}${attributesSource}>${slotMarkup}</${component.mount}>`
+      : `<${component.mount}${attributesSource} />`;
+  }
+  const attributesSource = attributes.length ? ` ${attributes.join(" ")}` : "";
+  return `<div data-component="${escapeAttribute(component.mount)}"${attributesSource}>${slotMarkup}</div>`;
 }
 
 const structuralDefaultSlots = new Set([
+  "Accordion",
   "AspectRatio",
   "AutoGrid",
   "card",
@@ -501,12 +485,20 @@ function defaultSlotMarkup(component, variation) {
     return '<option value="starter">Starter</option><option value="growth">Growth</option>';
   if (component.name === "Table")
     return "<thead><tr><th>Name</th><th>Status</th></tr></thead><tbody><tr><td>Production</td><td>Active</td></tr><tr><td>Staging</td><td>Ready</td></tr></tbody>";
-  if (component.name === "Tooltip")
-    return '<button type="button" class="wire-btn wire-btn--secondary">Hover for details</button>';
+  if (component.name === "Tooltip") return "";
   if (!structuralDefaultSlots.has(component.name)) return "";
   return `<div class="showcase-slot"><span class="icon-[lucide--layers-3] size-4" aria-hidden="true"></span><span>${variation === 2 ? "Rich supporting content with additional context." : "Composable content area."}</span></div>`;
 }
 
+function indentSource(value, spaces = 2) {
+  const indent = " ".repeat(spaces);
+  return String(value)
+    .trim()
+    .split("\n")
+    .map((line) => `${indent}${line}`)
+    .join("\n");
+}
+
 function sourceSnippet(component, variation, overrides = {}) {
   const attributes = component.props.flatMap((prop) => {
     const value = Object.hasOwn(overrides, prop.name)
@@ -522,7 +514,7 @@ function sourceSnippet(component, variation, overrides = {}) {
       return [];
     if (typeof value === "object") {
       const serialized = JSON.stringify(value, null, 2)
-        .replaceAll("'", "\\'")
+        .replaceAll("'", "\\u0027")
         .replaceAll("\n", "\n  ");
       return [`${prop.name}='${serialized}'`];
     }
@@ -530,12 +522,21 @@ function sourceSnippet(component, variation, overrides = {}) {
   });
   const formattedAttributes = attributes.length ? `\n  ${attributes.join("\n  ")}` : "";
   const hasPublicComponentTag = /^[A-Z][A-Za-z0-9_]*$/.test(component.mount);
-  const usesSlot = component.slots.some(
-    (slot) => slot !== "default" || defaultSlotMarkup(component, variation) !== "",
-  );
-  const slotMarkup = usesSlot
-    ? `\n  <!-- Add ${component.slots.join(", ")} slot content here -->\n`
-    : "";
+  const configured = overrides.__slots ?? {};
+  const slotParts = component.slots.flatMap((slot) => {
+    const custom = configured[slot];
+    const fallback =
+      slot === "default"
+        ? defaultSlotMarkup(component, variation)
+        : `<div class="showcase-slot">${displayName(slot)} slot</div>`;
+    const content = custom ?? fallback;
+    if (!content) return [];
+    if (slot === "default") return [indentSource(content, 2)];
+    return [
+      `  <div data-slot="${slot}">\n${indentSource(content, 4)}\n  </div>`,
+    ];
+  });
+  const slotMarkup = slotParts.length ? `\n${slotParts.join("\n")}\n` : "";
 
   if (hasPublicComponentTag) {
     const source = slotMarkup
@@ -564,9 +565,15 @@ function propsTable(component) {
     .join("")}</tbody></table></div>`;
 }
 
-function playgroundValue(prop, component) {
+function playgroundInitialValue(prop, component) {
+  const profileValue = profileFor(component.name)?.playground?.[prop.name];
+  if (profileValue !== undefined) return profileValue;
   const sampled = sampleValue(prop, component, 0);
-  const value = sampled === undefined ? (defaultValue(prop) ?? "") : sampled;
+  return sampled === undefined ? (defaultValue(prop) ?? "") : sampled;
+}
+
+function playgroundValue(prop, component) {
+  const value = playgroundInitialValue(prop, component);
   return typeof value === "object" ? JSON.stringify(value, null, 2) : String(value);
 }
 
@@ -574,28 +581,53 @@ function playgroundStateName(prop) {
   return `playground_${prop.name.replace(/[^A-Za-z0-9_$]/g, "_")}`;
 }
 
+function isStructuredProp(prop) {
+  return (
+    prop.default === "[]" ||
+    prop.default === "{}" ||
+    prop.type === "array" ||
+    prop.type === "object" ||
+    prop.type.includes("[]")
+  );
+}
+
 function playgroundStates(component) {
   return component.props
     .map((prop) => {
-      const initial = playgroundValue(prop, component);
-      return `  state ${playgroundStateName(prop)} = ctx.url.searchParams.get("pg_${prop.name}") ?? ${JSON.stringify(initial)}`;
+      const initialValue = playgroundInitialValue(prop, component);
+      const query = `ctx.url.searchParams.get("pg_${prop.name}")`;
+      if (prop.type === "boolean") {
+        const initial = initialValue === true ? "true" : "false";
+        return `  state ${playgroundStateName(prop)} = (${query} ?? "${initial}") === "true"`;
+      }
+      if (prop.type === "number") {
+        const initial = Number(initialValue || 0);
+        return `  state ${playgroundStateName(prop)} = Number(${query} ?? ${JSON.stringify(String(initial))})`;
+      }
+      if (isStructuredProp(prop)) {
+        const initial = JSON.stringify(initialValue ?? (prop.default === "{}" ? {} : []));
+        return `  state ${playgroundStateName(prop)} = JSON.parse(${query} ?? ${JSON.stringify(initial)})`;
+      }
+      return `  state ${playgroundStateName(prop)} = ${query} ?? ${JSON.stringify(String(initialValue ?? ""))}`;
     })
     .join("\n");
 }
 
 function playgroundMount(component) {
-  const attributes = [
-    `data-component="${component.mount}"`,
-    ...component.props.map((prop) => `${prop.name}="{${playgroundStateName(prop)}}"`),
-  ];
-  const slotMarkup = component.slots
-    .map((slot) =>
-      slot === "default"
-        ? defaultSlotMarkup(component, 0)
-        : `<div slot="${escapeAttribute(slot)}" class="showcase-slot">${escapeText(displayName(slot))} slot</div>`,
-    )
-    .join("");
-  return `<div ${attributes.join(" ")}>${slotMarkup}</div>`;
+  const attributes = component.props.map(
+    (prop) => `${prop.name}='{${playgroundStateName(prop)}}'`,
+  );
+  const profileSlots = profileFor(component.name)?.demos?.[0]?.slots ?? {};
+  const slotMarkup = configuredSlotMarkup(component, 0, { __slots: profileSlots });
+  const publicTag = /^[A-Z][A-Za-z0-9_]*$/.test(component.mount);
+  if (publicTag) {
+    const attributesSource = attributes.length ? ` ${attributes.join(" ")}` : "";
+    return slotMarkup
+      ? `<${component.mount}${attributesSource}>${slotMarkup}</${component.mount}>`
+      : `<${component.mount}${attributesSource} />`;
+  }
+  const attributesSource = attributes.length ? ` ${attributes.join(" ")}` : "";
+  return `<div data-component="${escapeAttribute(component.mount)}"${attributesSource}>${slotMarkup}</div>`;
 }
 
 function playgroundControl(prop, component) {
@@ -638,73 +670,59 @@ function playgroundControl(prop, component) {
 }
 
 const commonPlaygroundOptions = {
-  align: ["start", "center", "end"],
-  alignment: ["start", "center", "end"],
+  align: ["left", "center", "right", "start", "end", "stretch"],
+  alignment: ["left", "center", "right", "start", "end", "stretch"],
   as: ["", "button", "a"],
   color: ["primary", "secondary", "success", "warning", "danger", "info"],
   direction: ["row", "column"],
-  iconposition: ["start", "end"],
+  gap: ["none", "xs", "sm", "md", "lg", "xl", "2xl"],
+  iconposition: ["start", "end", "left", "right"],
+  imageposition: ["top", "left", "right"],
+  layout: ["content", "split", "stacked", "balanced", "visual"],
+  maxwidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
   method: ["get", "post"],
   orientation: ["horizontal", "vertical"],
-  position: ["top", "right", "bottom", "left", "start", "end"],
+  placement: ["top", "top-start", "top-end", "right", "right-start", "right-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end"],
+  position: ["top", "right", "bottom", "left", "start", "end", "center"],
+  shape: ["round", "rounded", "pill"],
   size: ["default", "xs", "sm", "md", "lg", "xl", "icon", "icon-xs", "icon-sm", "icon-lg"],
   target: ["_self", "_blank", "_parent", "_top"],
-  variant: ["default", "outline", "secondary", "ghost", "destructive", "link"],
+  trigger: ["click", "hover", "focus", "manual"],
+  visualposition: ["left", "right"],
+  width: ["default", "compact", "wide", "full"],
 };
 
 function playgroundOptions(prop, component, currentValue) {
   if (prop.type !== "string" || prop.name === "class" || prop.name === "controlClass") return [];
 
-  const discovered = new Set();
-  const add = (value) => {
-    if (typeof value === "string" && value.length <= 40) discovered.add(value);
-  };
-
+  const profileOptions = profileFor(component.name)?.options?.[prop.name] ?? [];
   const common = commonPlaygroundOptions[prop.name.toLowerCase()] ?? [];
-  for (const option of common) add(option);
-  if (component.name === "Button" && prop.name === "type") {
-    for (const option of ["button", "submit", "reset"]) add(option);
-  }
-  if (component.name === "Blockquote" && prop.name === "align") {
-    discovered.clear();
-    for (const option of ["left", "center", "right"]) add(option);
-  }
-  if (component.name === "Blockquote" && prop.name === "variant") {
-    discovered.clear();
-    for (const option of ["default", "bordered"]) add(option);
-  }
+  const componentSpecific =
+    component.name === "Button" && prop.name === "type"
+      ? ["button", "submit", "reset"]
+      : [];
+  const declared = [...profileOptions, ...componentSpecific, ...common];
 
-  const sourcePath = join(uiComponentsPath, `${component.name}.wrn`);
-  try {
-    const source = readFileSync(sourcePath, "utf8");
-    const escapedName = prop.name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-    const patterns = [
-      new RegExp(`\\b${escapedName}\\s*={2,3}\\s*["']([^"'\\n]+)["']`, "g"),
-      new RegExp(`["']([^"'\\n]+)["']\\s*={2,3}\\s*\\b${escapedName}\\b`, "g"),
-    ];
-    for (const pattern of patterns) {
-      for (const match of source.matchAll(pattern)) add(match[1]);
-    }
-  } catch {
-    // The generated reference can include virtual components without a same-name source file.
-  }
-
-  if (common.length === 0 && discovered.size < 2) return [];
+  // Free-form strings such as icon names, labels, URLs, IDs, and descriptions
+  // must remain text inputs. Implementation comparisons are not a public enum.
+  if (declared.length === 0) return [];
 
   const values = new Set();
-  if (typeof currentValue === "string" && currentValue.length <= 40) values.add(currentValue);
+  if (typeof currentValue === "string" && currentValue.length <= 120) values.add(currentValue);
   const declaredDefault = defaultValue(prop);
-  if (typeof declaredDefault === "string" && declaredDefault.length <= 40)
+  if (typeof declaredDefault === "string" && declaredDefault.length <= 120)
     values.add(declaredDefault);
-  for (const option of discovered) values.add(option);
-
+  for (const option of declared) {
+    if (typeof option === "string" && option.length <= 120) values.add(option);
+  }
   return [...values];
 }
 
 function playgroundSection(component) {
   const controls = component.props.map((prop) => playgroundControl(prop, component)).join("");
   const publicTag = /^[A-Z][A-Za-z0-9_]*$/.test(component.mount);
-  return `<section id="playground" class="detail-section playground-section" data-playground data-playground-component="${escapeAttribute(component.mount)}" data-playground-public-tag="${publicTag}" data-playground-has-slot="${component.slots.length > 0}">
+  const eventNames = component.events.join(",");
+  return `<section id="playground" class="detail-section playground-section" data-playground data-playground-component="${escapeAttribute(component.mount)}" data-playground-public-tag="${publicTag}" data-playground-has-slot="${component.slots.length > 0}" data-playground-events="${escapeAttribute(eventNames)}">
       <div class="detail-section-heading"><span>Interactive playground</span><h2>Configure ${escapeText(displayName(component.name))}</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
       <div class="playground-workbench">
         <div class="playground-preview">
@@ -715,6 +733,7 @@ function playgroundSection(component) {
             <pre><code data-playground-code>${sourceSnippet(component, 0)}</code></pre>
           </section>
           <div class="playground-status" data-playground-status aria-live="polite"></div>
+          ${component.events.length ? `<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>${component.props.length} controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
@@ -744,595 +763,6 @@ const defaultUses = [
   },
 ];
 
-const accordionUses = [
-  {
-    eyebrow: "Basic usage",
-    title: "Default accordion",
-    description: "Open one section at a time with a clear plus and minus indicator.",
-  },
-  {
-    eyebrow: "Behavior",
-    title: "Always open",
-    description: "Allow several content sections to remain expanded at the same time.",
-  },
-  {
-    eyebrow: "Composition",
-    title: "Nested accordion",
-    description: "Place a coordinated secondary accordion inside an expanded parent section.",
-  },
-  {
-    eyebrow: "Indicators",
-    title: "Without an indicator",
-    description: "Use a minimal text-only accordion when visual indicators are unnecessary.",
-  },
-  {
-    eyebrow: "Indicators",
-    title: "Chevron indicator",
-    description: "Communicate expanded state with a rotating chevron.",
-  },
-  {
-    eyebrow: "Layout",
-    title: "Separated title and indicator",
-    description: "Place the title and state indicator at opposite ends of each trigger.",
-  },
-  {
-    eyebrow: "Surface",
-    title: "Bordered accordion",
-    description: "Group sections inside one bordered surface with dividing lines.",
-  },
-  {
-    eyebrow: "Surface",
-    title: "Bordered open content",
-    description: "Render each section as an independent rounded card.",
-  },
-  {
-    eyebrow: "States",
-    title: "Disabled section",
-    description:
-      "Disable an individual section while keeping the rest of the accordion interactive.",
-  },
-];
-
-const alertTitles = [
-  "Dark solid alert",
-  "Secondary solid alert",
-  "Info solid alert",
-  "Success solid alert",
-  "Danger solid alert",
-  "Warning solid alert",
-  "Light solid alert",
-  "Soft color alert",
-  "With supporting text",
-  "With a list",
-  "With actions",
-  "Right-aligned link",
-  "Discovery notice",
-  "Bordered alert",
-  "Dismissible alert",
-];
-
-const alertUses = alertTitles.map((title, index) => ({
-  eyebrow: index < 7 ? "Solid colors" : index < 11 ? "Content" : "Actions & states",
-  title,
-  description: `Live ${title.toLowerCase()} with accessible semantics and copyable component code.`,
-}));
-
-const avatarTitles = [
-  "Extra-small circular avatar",
-  "Small circular avatar",
-  "Medium circular avatar",
-  "Large circular avatar",
-  "Extra-large circular avatar",
-  "Rounded avatars",
-  "Circular avatars with top status",
-  "Circular avatars with bottom status",
-  "Avatars with brand icons",
-  "Placeholder icon",
-  "Placeholder initials",
-  "Solid color variants",
-  "Soft color variants",
-  "Outline color variants",
-  "White color variants",
-  "Avatar with tooltip",
-  "Media object",
-];
-
-const avatarUses = avatarTitles.map((title, index) => ({
-  eyebrow:
-    index < 6
-      ? "Size & shape"
-      : index < 8
-        ? "Status"
-        : index < 11
-          ? "Fallbacks"
-          : index < 15
-            ? "Color variants"
-            : "Composition",
-  title,
-  description:
-    index < 5
-      ? "Render one circular profile image at the documented size."
-      : index === 5
-        ? "Apply softly rounded corners when a circle is not the right fit."
-        : index < 8
-          ? "Place a clear presence indicator at the requested avatar edge."
-          : index === 8
-            ? "Overlay a service or platform icon to identify a linked account."
-            : index === 9
-              ? "Show a generic person icon when no profile image is available."
-              : index === 10
-                ? "Use initials as an accessible text fallback for a missing image."
-                : index < 15
-                  ? `Use the ${title.split(" ")[0].toLowerCase()} treatment across semantic avatar colors.`
-                  : index === 15
-                    ? "Reveal a name or extra context on hover and keyboard focus."
-                    : "Combine an avatar with supporting text for profile and activity rows.",
-}));
-
-function avatarConfiguration(variation) {
-  const image = "/avatar-example.svg";
-  const configurations = [
-    { src: image, alt: "Example profile portrait", size: "xs" },
-    { src: image, alt: "Example profile portrait", size: "sm" },
-    { src: image, alt: "Example profile portrait", size: "md" },
-    { src: image, alt: "Example profile portrait", size: "lg" },
-    { src: image, alt: "Example profile portrait", size: "xl" },
-    { src: image, alt: "Example rounded profile portrait", shape: "rounded", size: "lg" },
-    {
-      src: image,
-      alt: "Avery Chen",
-      size: "lg",
-      status: "online",
-      statusLabel: "Online",
-      statusPosition: "top",
-    },
-    {
-      src: image,
-      alt: "Avery Chen",
-      size: "lg",
-      status: "away",
-      statusLabel: "Away",
-      statusPosition: "bottom",
-    },
-    {
-      src: image,
-      alt: "Linked profile",
-      size: "lg",
-      badgeIcon: "icon-[lucide--message-square]",
-      badgeLabel: "Messaging account",
-    },
-    { size: "lg", variant: "soft", alt: "Anonymous profile" },
-    { size: "lg", initials: "AC", alt: "Avery Chen" },
-    { size: "lg", initials: "AC", color: "success", variant: "solid", alt: "Avery Chen" },
-    { size: "lg", initials: "AC", color: "info", variant: "soft", alt: "Avery Chen" },
-    { size: "lg", initials: "AC", color: "danger", variant: "outline", alt: "Avery Chen" },
-    { size: "lg", initials: "AC", variant: "white", alt: "Avery Chen" },
-    {
-      src: image,
-      alt: "Avery Chen",
-      size: "lg",
-      status: "online",
-      tooltip: "Avery Chen · Online",
-      name: "Avery Chen",
-    },
-    {
-      src: image,
-      name: "Mark Wanner",
-      alt: "Mark Wanner",
-      size: "lg",
-      description: "mark@example.com",
-    },
-  ];
-  return {
-    size: "md",
-    color: "primary",
-    variant: "solid",
-    shape: "circle",
-    ...configurations[variation],
-  };
-}
-
-const avatarGroupUses = [
-  {
-    eyebrow: "Facepile",
-    title: "Overlapping stack",
-    description: "Overlap avatars with negative spacing to create a compact team facepile.",
-  },
-  {
-    eyebrow: "Layout",
-    title: "Grid layout",
-    description: "Arrange members in a grid with equal spacing and a clear overflow count.",
-  },
-  {
-    eyebrow: "Border",
-    title: "Custom border color",
-    description: "Change the ring color so stacked groups remain distinct on different surfaces.",
-  },
-  {
-    eyebrow: "Tooltip",
-    title: "Member tooltips",
-    description: "Reveal each member's name on pointer hover or keyboard focus.",
-  },
-  {
-    eyebrow: "Overflow",
-    title: "Dropdown overflow",
-    description: "Open the overflow counter to inspect members hidden by the visible limit.",
-  },
-];
-
-function avatarGroupConfiguration(variation) {
-  const members = [
-    { src: "/avatar-example.svg", name: "Mark Wanner", alt: "Mark Wanner" },
-    { src: "/avatar-example-2.svg", name: "Maria Guan", alt: "Maria Guan" },
-    { src: "/avatar-example-3.svg", name: "Amil Evara", alt: "Amil Evara" },
-    { initials: "EE", name: "Ebele Egbuna", color: "info" },
-    { initials: "CL", name: "Chris Lynch", color: "success" },
-    { initials: "NS", name: "Nora Singh", color: "warning" },
-    { initials: "JR", name: "Jon Rivera", color: "danger" },
-    { initials: "AK", name: "Amina Khan", color: "secondary" },
-  ];
-  const configurations = [
-    { layout: "stack", size: "lg", maxVisible: 4, items: members.slice(0, 4) },
-    { layout: "grid", size: "md", columns: 3, maxVisible: 7, items: members },
-    {
-      layout: "stack",
-      size: "md",
-      maxVisible: 4,
-      borderColor: "#2583ff",
-      items: members.slice(0, 4),
-    },
-    { layout: "stack", size: "md", maxVisible: 4, showTooltips: true, items: members.slice(0, 4) },
-    { layout: "stack", size: "md", maxVisible: 4, showTooltips: true, items: members },
-  ];
-  return {
-    color: "primary",
-    size: "md",
-    variant: "solid",
-    shape: "circle",
-    ...configurations[variation],
-  };
-}
-
-const badgeUses = [
-  {
-    eyebrow: "Color variants",
-    title: "Solid badge",
-    description: "Use a solid fill for a high-emphasis status or category.",
-  },
-  {
-    eyebrow: "Color variants",
-    title: "Soft badge",
-    description: "Use a softer fill for a lower-contrast label.",
-  },
-  {
-    eyebrow: "Color variants",
-    title: "Outline badge",
-    description: "Use an outlined treatment for lighter visual emphasis.",
-  },
-  {
-    eyebrow: "Color variants",
-    title: "White badge",
-    description: "Use a neutral surface with a subtle border and shadow.",
-  },
-  {
-    eyebrow: "Shape",
-    title: "Rounded badge",
-    description: "Use softly rounded corners instead of fully pilled edges.",
-  },
-  {
-    eyebrow: "Shape",
-    title: "Pill badge",
-    description: "Use a pill shape for compact labels and filter chips.",
-  },
-  {
-    eyebrow: "Content",
-    title: "Truncated badge",
-    description: "Constrain long badge text while preserving the full value in the API.",
-  },
-  {
-    eyebrow: "Status",
-    title: "Badge with status dot",
-    description: "Add a small dot to reinforce status at a glance.",
-  },
-  {
-    eyebrow: "Content",
-    title: "Badge with icon",
-    description: "Pair an icon with text for states, metrics, or trend changes.",
-  },
-  {
-    eyebrow: "Interaction",
-    title: "Dismissible badge",
-    description: "Provide a clear remove action for a selected chip.",
-  },
-  {
-    eyebrow: "Content",
-    title: "Badge with avatar",
-    description: "Combine a profile image, label, and optional remove action.",
-  },
-  {
-    eyebrow: "Composition",
-    title: "Badge inside button",
-    description: "Place a badge beside a button label to show a count.",
-  },
-  {
-    eyebrow: "Composition",
-    title: "Positioned badge",
-    description: "Anchor a numeric badge to the corner of an icon button.",
-  },
-  {
-    eyebrow: "Composition",
-    title: "Dot badge",
-    description: "Use a small dot when a notification does not need a count.",
-  },
-  {
-    eyebrow: "Animation",
-    title: "Ping badge",
-    description: "Pulse a notification badge while respecting reduced-motion preferences.",
-  },
-];
-
-function badgeConfiguration(variation) {
-  const configurations = [
-    { label: "Active", color: "success", variant: "solid" },
-    { label: "In review", color: "info", variant: "soft" },
-    { label: "Attention", color: "danger", variant: "outline" },
-    { label: "Neutral", color: "dark", variant: "white" },
-    { label: "Category", color: "info", shape: "rounded" },
-    { label: "Pill badge", color: "primary", shape: "pill" },
-    {
-      label: "This content is a little too long for the available space",
-      color: "info",
-      truncate: true,
-      maxWidth: "10rem",
-      shape: "rounded",
-    },
-    { label: "Connected", color: "success", variant: "soft", dot: true },
-    {
-      label: "14.5%",
-      color: "success",
-      variant: "soft",
-      icon: "icon-[lucide--trending-up]",
-    },
-    { label: "Design", color: "info", variant: "soft", dismissible: true },
-    {
-      label: "Christina",
-      color: "dark",
-      variant: "white",
-      avatarSrc: "/avatar-example-2.svg",
-      avatarAlt: "Christina",
-      dismissible: true,
-    },
-    {
-      label: "5",
-      color: "danger",
-      size: "xs",
-      anchorLabel: "Notifications",
-      anchorLabelText: "Open notifications",
-      placement: "inline",
-    },
-    {
-      label: "99+",
-      color: "danger",
-      size: "xs",
-      anchorIcon: "icon-[lucide--bell]",
-      anchorLabelText: "Open notifications",
-      placement: "top-right",
-    },
-    {
-      label: "",
-      color: "success",
-      dotOnly: true,
-      dotLabel: "New notification",
-      anchorIcon: "icon-[lucide--bell]",
-      anchorLabelText: "Open notifications",
-      placement: "top-right",
-    },
-    {
-      label: "9+",
-      color: "danger",
-      animated: true,
-      anchorIcon: "icon-[lucide--shopping-basket]",
-      anchorLabelText: "Open cart",
-      placement: "top-right",
-    },
-  ];
-  return {
-    size: "md",
-    color: "primary",
-    variant: "solid",
-    shape: "pill",
-    ...configurations[variation],
-  };
-}
-
-function alertConfiguration(variation) {
-  const title = alertTitles[variation] ?? alertTitles[0];
-  const lower = title.toLowerCase();
-  const solidColors = ["dark", "secondary", "info", "success", "danger", "warning", "light"];
-  const solidIndex = Math.min(variation, solidColors.length - 1);
-  const color =
-    variation < solidColors.length
-      ? solidColors[solidIndex]
-      : lower.includes("danger")
-        ? "danger"
-        : lower.includes("warning")
-          ? "warning"
-          : lower.includes("success")
-            ? "success"
-            : "info";
-  const supporting = lower.includes("supporting");
-  const discovery = lower.includes("discovery");
-  return {
-    title:
-      variation < solidColors.length
-        ? `${titleCase(color)} alert!`
-        : supporting
-          ? "Successfully updated."
-          : lower.includes("list")
-            ? "A problem occurred while submitting your data."
-            : lower.includes("actions")
-              ? "YouTube would like to send notifications"
-              : discovery
-                ? "New version published"
-                : lower.includes("dismissible")
-                  ? "Requires JavaScript"
-                  : "A new software update is available.",
-    description:
-      variation < solidColors.length
-        ? "You should check in on some of those fields below."
-        : supporting
-          ? "You have successfully updated your email preferences."
-          : lower.includes("actions")
-            ? "Notifications may include alerts, sounds, and icon badges. These can be configured in Settings."
-            : discovery
-              ? "A new version of this page was published. Refresh to see the changes."
-              : lower.includes("dismissible")
-                ? "This page requires an optional plugin. You can skip this step if it is already installed."
-                : lower.includes("list")
-                  ? ""
-                  : "See what is new in version 3.0.7.",
-    color,
-    variant:
-      variation < solidColors.length
-        ? "solid"
-        : lower.includes("bordered")
-          ? "bordered"
-          : supporting
-            ? "accent"
-            : "soft",
-    showIcon: variation >= solidColors.length,
-    items: lower.includes("list")
-      ? [
-          { label: "This username is already in use" },
-          { label: "Email field cannot be empty" },
-          { label: "Please enter a valid phone number" },
-        ]
-      : [],
-    actions: lower.includes("actions")
-      ? [
-          { label: "Don't allow", href: "#deny" },
-          { label: "Allow", href: "#allow" },
-        ]
-      : [],
-    actionLabel: lower.includes("dismissible") ? "Learn more" : "",
-    actionHref: lower.includes("dismissible") ? "#learn-more" : "",
-    linkLabel: lower.includes("right-aligned") ? "Details" : discovery ? "Refresh" : "",
-    linkHref: lower.includes("right-aligned") ? "#details" : discovery ? "#refresh" : "",
-    dismissible: lower.includes("dismissible"),
-    compact: variation < solidColors.length,
-    radius: variation < solidColors.length ? "lg" : lower.includes("discovery") ? "xl" : "md",
-    shadow: lower.includes("bordered") ? "none" : lower.includes("discovery") ? "md" : "sm",
-  };
-}
-
-function blockquoteConfiguration(variation) {
-  const configurations = [
-    {
-      quote:
-        "I just wanted to say that I'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,
-    },
-    {
-      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,
-    },
-    {
-      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,
-    },
-  ];
-  return configurations[variation] ?? configurations[0];
-}
-
-function accordionConfiguration(variation) {
-  const body =
-    "This is the item's accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.";
-  const items = [
-    { value: "first", label: "Accordion #1", content: body },
-    { value: "second", label: "Accordion #2", content: body },
-    { value: "third", label: "Accordion #3", content: body },
-  ];
-  const configurations = [
-    { defaultOpen: ["first"], contentItalic: true },
-    { defaultOpen: ["first", "second"], alwaysOpen: true, contentItalic: true },
-    {
-      defaultOpen: ["first", "first.sub-first"],
-      alwaysOpen: true,
-      contentItalic: true,
-      items: [
-        {
-          ...items[0],
-          children: [
-            { value: "sub-first", label: "Sub accordion #1", content: body },
-            { value: "sub-second", label: "Sub accordion #2", content: body },
-            { value: "sub-third", label: "Sub accordion #3", content: body },
-          ],
-        },
-        items[1],
-        items[2],
-      ],
-    },
-    { defaultOpen: ["first"], showIndicator: false, contentItalic: true },
-    {
-      defaultOpen: ["first"],
-      indicator: "chevron",
-      indicatorPosition: "start",
-      variant: "chevron",
-      contentItalic: true,
-    },
-    {
-      defaultOpen: ["first"],
-      indicator: "chevron",
-      indicatorPosition: "end",
-      variant: "chevron",
-      contentItalic: true,
-    },
-    { defaultOpen: ["first"], bordered: true, contentItalic: true },
-    {
-      defaultOpen: ["second"],
-      separated: true,
-      indicatorPosition: "end",
-      contentItalic: true,
-    },
-    {
-      defaultOpen: ["first"],
-      items: [items[0], { ...items[1], disabled: true }, items[2]],
-      contentItalic: true,
-    },
-  ];
-
-  return {
-    id: `accordion-example-${variation + 1}`,
-    items,
-    color: "primary",
-    size: "default",
-    ...configurations[variation],
-  };
-}
-
 const buttonUses = [
   {
     eyebrow: "Default",
@@ -1376,579 +806,6 @@ const buttonUses = [
   },
 ];
 
-const buttonGroupUses = [
-  {
-    eyebrow: "Basic usage",
-    title: "Example",
-    description: "Group related actions into one compact, visually connected control.",
-  },
-  {
-    eyebrow: "Sizes",
-    title: "Small",
-    description: "Use small grouped buttons in dense toolbars, tables, and utility surfaces.",
-  },
-  {
-    eyebrow: "Sizes",
-    title: "Medium",
-    description: "Use the balanced medium size for most product interfaces.",
-  },
-  {
-    eyebrow: "Sizes",
-    title: "Large",
-    description: "Use large grouped buttons for prominent actions and touch-focused layouts.",
-  },
-  {
-    eyebrow: "Responsive stack",
-    title: "Responsive stack",
-    description: "Keep actions inline on larger screens and stack them on narrow viewports.",
-  },
-  {
-    eyebrow: "Orientation",
-    title: "Vertical stack",
-    description: "Stack connected actions vertically while preserving joined borders.",
-  },
-  {
-    eyebrow: "Toolbar",
-    title: "Button toolbar",
-    description: "Expose a labeled toolbar with selectable formatting actions.",
-  },
-];
-
-function buttonGroupConfiguration(variation) {
-  const actions = [
-    { label: "Profile", value: "profile" },
-    { label: "Settings", value: "settings" },
-    { label: "Messages", value: "messages" },
-  ];
-  const configurations = [
-    { items: actions, value: "profile", selectable: true },
-    { items: actions, size: "sm" },
-    { items: actions, size: "md" },
-    { items: actions, size: "lg" },
-    {
-      items: [
-        { label: "Save draft", value: "draft" },
-        { label: "Preview", value: "preview" },
-        { label: "Publish", value: "publish" },
-      ],
-      responsive: true,
-    },
-    {
-      items: [
-        { label: "Account", value: "account" },
-        { label: "Security", value: "security" },
-        { label: "Notifications", value: "notifications" },
-      ],
-      orientation: "vertical",
-    },
-    {
-      items: [
-        { label: "Bold", value: "bold", icon: "icon-[lucide--bold]" },
-        { label: "Italic", value: "italic", icon: "icon-[lucide--italic]" },
-        { label: "Underline", value: "underline", icon: "icon-[lucide--underline]" },
-      ],
-      value: "bold",
-      selectable: true,
-      toolbar: true,
-      ariaLabel: "Text formatting",
-    },
-  ];
-
-  return {
-    color: "primary",
-    variant: "outline",
-    size: "md",
-    orientation: "horizontal",
-    attached: true,
-    ...configurations[variation],
-  };
-}
-
-const cardUses = [
-  {
-    eyebrow: "Basic usage",
-    title: "Default card",
-    description: "Use a basic card with media, text content, and a supporting action.",
-  },
-  {
-    eyebrow: "Content",
-    title: "Body",
-    description: "Use the card body for the main content area.",
-  },
-  {
-    eyebrow: "Content",
-    title: "Simple card",
-    description: "Use a body-only card when no separate header or footer is needed.",
-  },
-  {
-    eyebrow: "Structure",
-    title: "Header and footer",
-    description: "Add a header, footer, or both when the card needs clearer structure.",
-  },
-  {
-    eyebrow: "Structure",
-    title: "Footer only",
-    description: "Separate secondary actions or summary details from the card body.",
-  },
-  {
-    eyebrow: "Sizes",
-    title: "Small",
-    description: "Use a compact card size for denser lists and side panels.",
-  },
-  {
-    eyebrow: "Sizes",
-    title: "Default",
-    description: "Use the default card size for most content blocks.",
-  },
-  {
-    eyebrow: "Sizes",
-    title: "Large",
-    description: "Increase card spacing when content needs more breathing room.",
-  },
-  {
-    eyebrow: "Navigation",
-    title: "Navigation",
-    description: "Add navigation in the card header for quick section switching.",
-  },
-  {
-    eyebrow: "Navigation",
-    title: "Navigation with select on mobile",
-    description: "Replace tabs with a select control when horizontal space is limited.",
-  },
-  {
-    eyebrow: "Images",
-    title: "Top image",
-    description: "Place an image at the top for a classic media-card layout.",
-  },
-  {
-    eyebrow: "Images",
-    title: "Bottom image",
-    description: "Let content lead before media displayed at the bottom.",
-  },
-  {
-    eyebrow: "Images",
-    title: "Image overlays",
-    description: "Use the image as a background and layer card content on top.",
-  },
-  {
-    eyebrow: "Animations",
-    title: "Image scaling animation on hover",
-    description: "Scale card media on hover without changing the card layout.",
-  },
-  {
-    eyebrow: "Animations",
-    title: "Transition on hover",
-    description: "Animate elevation and position to strengthen the interactive surface.",
-  },
-  {
-    eyebrow: "Card layout",
-    title: "Horizontal",
-    description: "Place image and content side by side on larger screens.",
-  },
-  {
-    eyebrow: "Card layout",
-    title: "Card group",
-    description: "Render attached equal-height cards that stack responsively.",
-  },
-  {
-    eyebrow: "Panels",
-    title: "Top bordered card",
-    description: "Add a colored top border for stronger category or status emphasis.",
-  },
-  {
-    eyebrow: "Panels",
-    title: "Card actions",
-    description: "Place compact utility actions in a structured card header.",
-  },
-  {
-    eyebrow: "Panels",
-    title: "Card with alert",
-    description: "Embed an alert inside a card to surface important feedback.",
-  },
-  {
-    eyebrow: "Panels",
-    title: "Centered body content",
-    description: "Center content for confirmation states and compact summaries.",
-  },
-  {
-    eyebrow: "Panels",
-    title: "Empty state",
-    description: "Communicate that no data is available with an accessible empty state.",
-  },
-  {
-    eyebrow: "Panels",
-    title: "Scrollable body",
-    description: "Contain long content inside a fixed-height scrolling card body.",
-  },
-];
-
-function cardConfiguration(variation) {
-  const image = "/card-landscape.svg";
-  const description =
-    "Some quick example text to build on the card title and make up the bulk of the card's content.";
-  const navigation = [
-    { label: "My Account", value: "account" },
-    { label: "Company", value: "company" },
-    { label: "Team Members", value: "team" },
-    { label: "Billing", value: "billing" },
-  ];
-  const base = {
-    title: "Card title",
-    description,
-    actionLabel: "Card link",
-    actionHref: "#card-demo",
-    size: "md",
-    color: "primary",
-  };
-  const configurations = [
-    { imageSrc: image, imageAlt: "Abstract blue glass shapes", actionLabel: "Go somewhere" },
-    { title: "", description, actionLabel: "" },
-    { subtitle: "Card subtitle" },
-    { header: "Featured", footer: "Last updated 5 mins ago" },
-    { footer: "Last updated 5 mins ago" },
-    { size: "sm" },
-    { size: "md" },
-    { size: "lg" },
-    { navigation: navigation.slice(0, 3), activeNav: "account", align: "center" },
-    { navigation, activeNav: "account", mobileNavigation: true, align: "center" },
-    { imageSrc: image, imageAlt: "Abstract blue glass shapes", footer: "Last updated 5 mins ago" },
-    {
-      imageSrc: image,
-      imageAlt: "Abstract blue glass shapes",
-      imagePosition: "bottom",
-      footer: "Last updated 5 mins ago",
-    },
-    {
-      imageSrc: image,
-      imageAlt: "Abstract blue glass shapes",
-      imagePosition: "overlay",
-      footer: "Last updated 5 mins ago",
-      actionLabel: "",
-    },
-    { imageSrc: image, imageAlt: "Abstract blue glass shapes", hover: "image", actionLabel: "" },
-    { imageSrc: image, imageAlt: "Abstract blue glass shapes", hover: "raise", actionLabel: "" },
-    {
-      imageSrc: image,
-      imageAlt: "Abstract blue glass shapes",
-      layout: "horizontal",
-      footer: "Last updated 5 mins ago",
-      actionLabel: "",
-    },
-    {
-      items: [
-        { imageSrc: image, title: "Card title", description, footer: "Updated 5 mins ago" },
-        {
-          imageSrc: image,
-          title: "Card title",
-          description: "This card has supporting text below as a natural lead-in.",
-          footer: "Updated 5 mins ago",
-        },
-        {
-          imageSrc: image,
-          title: "Card title",
-          description: `${description} This has even longer content to demonstrate equal height.`,
-          footer: "Updated 5 mins ago",
-        },
-      ],
-      actionLabel: "",
-    },
-    { variant: "top-border" },
-    {
-      header: "Card actions",
-      headerActions: [
-        { label: "Refresh", ariaLabel: "Refresh card", icon: "icon-[lucide--refresh-cw]" },
-        { label: "Expand", ariaLabel: "Expand card", icon: "icon-[lucide--maximize-2]" },
-      ],
-      dismissible: true,
-    },
-    {
-      header: "Featured",
-      alertTitle: "Attention needed!",
-      alertDescription: "This is an alert box.",
-    },
-    { align: "center" },
-    { empty: true, title: "", description: "", actionLabel: "" },
-    {
-      description: `${description} ${description} ${description} ${description} ${description}`,
-      scrollable: true,
-      maxHeight: "16rem",
-      actionLabel: "",
-    },
-  ];
-
-  return { ...base, ...configurations[variation] };
-}
-
-const carouselUses = [
-  {
-    eyebrow: "Basic usage",
-    title: "Basic usage",
-    description:
-      "Cycle through images or content slides with accessible previous and next controls.",
-  },
-  {
-    eyebrow: "Navigation",
-    title: "Pagination",
-    description: "Show the current slide and let users jump directly to any slide.",
-  },
-  {
-    eyebrow: "Playback",
-    title: "Autoplay",
-    description: "Advance automatically, pausing while users hover or interact with the carousel.",
-  },
-  {
-    eyebrow: "Playback",
-    title: "Infinite loop",
-    description: "Continue from the last slide back to the first without disabling controls.",
-  },
-  {
-    eyebrow: "Direction",
-    title: "RTL",
-    description: "Reverse movement and controls for right-to-left interfaces.",
-  },
-  {
-    eyebrow: "Layout",
-    title: "Multiple slides",
-    description:
-      "Keep several slides visible at once for products, articles, or media collections.",
-  },
-  {
-    eyebrow: "Layout",
-    title: "Centered",
-    description: "Keep a compact active slide centered while adjacent content remains visible.",
-  },
-  {
-    eyebrow: "Pointer interaction",
-    title: "Draggable",
-    description: "Drag or swipe slides with a pointer while preserving keyboard controls.",
-  },
-  {
-    eyebrow: "Layout",
-    title: "Auto height",
-    description: "Let each slide determine the carousel height for variable-length content.",
-  },
-  {
-    eyebrow: "Scrolling",
-    title: "Snap scrolling",
-    description: "Use native horizontal scrolling with mandatory centered snap points.",
-  },
-  {
-    eyebrow: "Status",
-    title: "Slide counter",
-    description: "Announce and display the current position and total slide count.",
-  },
-  {
-    eyebrow: "Thumbnails",
-    title: "Thumbnails (horizontal)",
-    description: "Use a horizontal thumbnail rail as an alternate set of slide controls.",
-  },
-  {
-    eyebrow: "Thumbnails",
-    title: "Thumbnails (vertical)",
-    description: "Place thumbnail navigation beside the carousel on layouts with more room.",
-  },
-];
-
-function carouselConfiguration(variation) {
-  const items = [
-    {
-      label: "First slide",
-      title: "First slide",
-      description: "Introduce the collection with a concise, focused message.",
-    },
-    {
-      label: "Second slide",
-      title: "Second slide",
-      description: "Move through content using buttons, pagination, keyboard, or touch.",
-    },
-    {
-      label: "Third slide",
-      title: "Third slide",
-      description: "Every interaction exposes useful public lifecycle and navigation events.",
-    },
-    {
-      label: "Fourth slide",
-      title: "Fourth slide",
-      description: "Flexible for larger collections.",
-    },
-    { label: "Fifth slide", title: "Fifth slide", description: "Responsive at every viewport." },
-    { label: "Sixth slide", title: "Sixth slide", description: "Built with accessible semantics." },
-  ];
-  const configurations = [
-    {},
-    { showPagination: true },
-    { showPagination: true, isAutoPlay: true, autoplayInterval: 2500 },
-    { showPagination: true, isInfiniteLoop: true },
-    { showPagination: true, isRTL: true, activeIndex: 1 },
-    { showPagination: true, slidesPerView: 3, activeIndex: 3 },
-    { showPagination: true, slidesPerView: 2, isCentered: true },
-    { showPagination: true, slidesPerView: 3, isDraggable: true, activeIndex: 1 },
-    { showPagination: true, isAutoHeight: true },
-    { showPagination: true, slidesPerView: 2, isSnap: true },
-    { showCounter: true },
-    { thumbnails: "horizontal" },
-    { thumbnails: "vertical" },
-  ];
-
-  return {
-    items,
-    title: "",
-    description: "",
-    ariaLabel: carouselUses[variation].title,
-    color: "primary",
-    size: "default",
-    ...configurations[variation],
-  };
-}
-
-const chatBubbleUses = [
-  {
-    eyebrow: "Basic usage",
-    title: "Conversation",
-    description: "Show a basic two-sided conversation with incoming and outgoing messages.",
-  },
-  {
-    eyebrow: "Layout",
-    title: "One-sided",
-    description: "Use one-sided bubbles for support transcripts or single-direction message feeds.",
-  },
-  {
-    eyebrow: "Identity",
-    title: "Messages with avatars",
-    description: "Add avatars when people need to identify message ownership at a glance.",
-  },
-  {
-    eyebrow: "Message details",
-    title: "Message metadata",
-    description: "Add delivery state, timestamps, or recovery actions beneath each message.",
-  },
-];
-
-function chatBubbleConfiguration(variation) {
-  const items = [
-    {
-      id: "question",
-      direction: "incoming",
-      author: "Support agent",
-      title: "How can we help?",
-      text: "You can ask questions like:",
-      bullets: [
-        "What's WireJS UI?",
-        "How many component examples are there?",
-        "Is there a PRO version?",
-      ],
-    },
-    {
-      id: "request",
-      direction: "outgoing",
-      author: "AZ",
-      text: "what's wirejs ui?",
-    },
-    {
-      id: "answer",
-      direction: "incoming",
-      author: "Support agent",
-      text: "WireJS UI is an open-source set of reusable UI components built for responsive applications.",
-      links: [
-        { label: "Installation guide", href: "/installation" },
-        { label: "Framework guides", href: "/framework-guides" },
-      ],
-    },
-  ];
-
-  if (variation >= 2) {
-    items[0].avatarSrc = "/avatar-example.svg";
-    items[0].avatarAlt = "Support agent";
-    items[0].avatarLabel = "View support agent";
-    items[1].avatarFallback = "AZ";
-    items[1].avatarLabel = "View AZ";
-    items[2].avatarSrc = "/avatar-example.svg";
-    items[2].avatarAlt = "Support agent";
-    items[2].avatarLabel = "View support agent";
-  }
-
-  if (variation === 3) {
-    items[0].status = "Sent";
-    items[0].statusIcon = "icon-[lucide--check-check]";
-    items[0].timestamp = "10:32";
-    items[0].datetime = "2026-07-28T10:32:00";
-    items[1].status = "Read";
-    items[1].statusIcon = "icon-[lucide--check-check]";
-    items[1].timestamp = "10:33";
-    items[1].datetime = "2026-07-28T10:33:00";
-    items[2].status = "Not sent";
-    items[2].statusIcon = "icon-[lucide--circle-alert]";
-    items[2].statusTone = "danger";
-    items[2].action = "retry";
-    items[2].actionLabel = "Retry";
-  }
-
-  return {
-    items,
-    oneSided: variation === 1,
-    showAvatars: variation >= 2,
-    showMetadata: variation === 3,
-    ariaLabel: chatBubbleUses[variation].title,
-    title: "",
-    description: "",
-    color: "primary",
-    size: "default",
-  };
-}
-
-const collapseUses = [
-  {
-    eyebrow: "Basic usage",
-    title: "Default collapse",
-    description: "Use a button trigger to expand and collapse supporting content.",
-  },
-  {
-    eyebrow: "Inline content",
-    title: "Read more toggle",
-    description: "Reveal additional copy inline with a read more and read less trigger.",
-  },
-];
-
-function collapseConfiguration(variation) {
-  const configurations = [
-    {
-      mode: "panel",
-      items: [
-        {
-          id: "collapse-default-panel",
-          label: "Collapse",
-          closeLabel: "Collapse",
-          content:
-            "This is a collapse body. It is hidden by default until the user expands it, keeping the surrounding interface focused.",
-        },
-      ],
-    },
-    {
-      mode: "inline",
-      items: [
-        {
-          id: "collapse-read-more-panel",
-          label: "Read more",
-          closeLabel: "Read less",
-          preview:
-            "WireJS UI is an open-source set of reusable components based on a utility-first styling system.",
-          content:
-            "This additional collapse body is hidden by default. Expanding it reveals supporting information while preserving a compact reading experience.",
-        },
-      ],
-    },
-  ];
-
-  return {
-    ...configurations[variation],
-    multiple: false,
-    initialOpenIndexes: [],
-    ariaLabel: collapseUses[variation].title,
-    color: "primary",
-    size: "default",
-  };
-}
-
 const advancedSelectTitles = [
   "Default advanced select",
   "Grouped options",
@@ -2421,534 +1278,6 @@ const inputNumberUses = [
   },
 ];
 
-const toggleCountUses = [
-  {
-    eyebrow: "Pricing",
-    title: "Monthly and annual pricing",
-    description: "Compare plan prices with an aligned segmented control and clear selected state.",
-  },
-  {
-    eyebrow: "Pricing",
-    title: "Switch control",
-    description: "Use a compact switch between labels while updating every displayed plan value.",
-  },
-  {
-    eyebrow: "Configuration",
-    title: "Custom billing periods",
-    description: "Configure custom values, labels, currency, suffixes, and plan descriptions.",
-  },
-  {
-    eyebrow: "States",
-    title: "Disabled pricing toggle",
-    description: "Keep the current comparison visible while preventing billing-period changes.",
-  },
-];
-
-function toggleCountConfiguration(variation) {
-  const sharedItems = [
-    { label: "Startup", monthly: 19, annual: 190 },
-    { label: "Team", monthly: 89, annual: 890 },
-    { label: "Enterprise", monthly: 129, annual: 1290 },
-  ];
-  const configurations = [
-    {
-      name: "pricing-cycle",
-      value: "annual",
-      variant: "segmented",
-      align: "end",
-      items: sharedItems,
-    },
-    {
-      name: "pricing-switch",
-      value: "monthly",
-      variant: "switch",
-      align: "center",
-      items: sharedItems,
-    },
-    {
-      name: "contract-length",
-      value: "quarterly",
-      firstValue: "quarterly",
-      firstLabel: "Quarterly",
-      secondValue: "yearly",
-      secondLabel: "Yearly",
-      firstValueKey: "quarterly",
-      secondValueKey: "yearly",
-      currency: "€",
-      suffix: "/seat",
-      items: [
-        {
-          label: "Core",
-          description: "For small product teams",
-          quarterly: 29,
-          yearly: 22,
-        },
-        {
-          label: "Scale",
-          description: "For growing organizations",
-          quarterly: 79,
-          yearly: 62,
-        },
-      ],
-    },
-    {
-      name: "disabled-pricing-cycle",
-      value: "annual",
-      variant: "segmented",
-      align: "end",
-      items: sharedItems,
-      disabled: true,
-    },
-  ];
-
-  return {
-    color: "primary",
-    size: "default",
-    ...configurations[variation],
-  };
-}
-
-const basicFormComponentNames = new Set([
-  "Checkbox",
-  "ColorPicker",
-  "FileInput",
-  "Input",
-  "InputGroup",
-  "Radio",
-  "RangeSlider",
-  "Select",
-  "Switch",
-  "Textarea",
-  "TimePicker",
-]);
-
-const basicFormUses = [
-  {
-    eyebrow: "Basic usage",
-    title: "Default field",
-    description: "Use a labelled field with a value, placeholder, and supporting helper text.",
-  },
-  {
-    eyebrow: "Appearance",
-    title: "Outlined with start icon",
-    description: "Combine an outlined treatment with a leading icon.",
-  },
-  {
-    eyebrow: "Appearance",
-    title: "Floating label",
-    description: "Move the label into the control while preserving an accessible field name.",
-  },
-  {
-    eyebrow: "Appearance",
-    title: "Pill and compact size",
-    description: "Use pill styling and compact sizing in dense interfaces.",
-  },
-  {
-    eyebrow: "States",
-    title: "Read only",
-    description: "Display a submitted value without allowing it to be changed.",
-  },
-  {
-    eyebrow: "States",
-    title: "Disabled",
-    description: "Prevent interaction and communicate that the field is unavailable.",
-  },
-  {
-    eyebrow: "Layout",
-    title: "Inline helper text",
-    description: "Place the label, control, and supporting text on one responsive line.",
-  },
-  {
-    eyebrow: "Layout",
-    title: "Field with corner hint",
-    description: "Place optional context opposite the label and keep the control on the next line.",
-  },
-  {
-    eyebrow: "Validation",
-    title: "Validated field",
-    description:
-      "Surface validation through @wrnexus/validation-compatible error targets and accessible state.",
-  },
-];
-
-const radioUses = [
-  {
-    eyebrow: "Basic usage",
-    title: "Default radio",
-    description: "Use a single radio control for one selectable option.",
-  },
-  {
-    eyebrow: "States",
-    title: "Disabled",
-    description: "Disable an option when it is unavailable.",
-  },
-  {
-    eyebrow: "Groups",
-    title: "Inline radio group",
-    description: "Arrange compact radio options on one horizontal line.",
-  },
-  {
-    eyebrow: "Groups",
-    title: "Vertical radio group",
-    description: "Stack radio options for easy scanning.",
-  },
-  {
-    eyebrow: "Content",
-    title: "Radios with descriptions",
-    description: "Add supporting copy to clarify each choice.",
-  },
-  {
-    eyebrow: "Cards",
-    title: "Radio cards",
-    description: "Present options as selectable horizontal cards.",
-  },
-  {
-    eyebrow: "Cards",
-    title: "Vertical radio cards",
-    description: "Stack selectable cards in a vertical layout.",
-  },
-  {
-    eyebrow: "Alignment",
-    title: "Right-aligned radio",
-    description: "Place controls at the far edge of their labels.",
-  },
-  {
-    eyebrow: "Lists",
-    title: "Radio list group",
-    description: "Separate options with list dividers.",
-  },
-  {
-    eyebrow: "Lists",
-    title: "Horizontal radio list group",
-    description: "Combine list styling with a horizontal layout.",
-  },
-  {
-    eyebrow: "Validation",
-    title: "Validation states",
-    description: "Validate the selected group with @wrnexus/validation.",
-  },
-];
-
-const checkboxUses = [
-  {
-    eyebrow: "Basic usage",
-    title: "Default checkbox",
-    description: "Use a checkbox for an independent yes-or-no choice.",
-  },
-  {
-    eyebrow: "States",
-    title: "Indeterminate",
-    description: "Represent a partially selected group with the mixed state.",
-  },
-  {
-    eyebrow: "States",
-    title: "Disabled",
-    description: "Disable a checkbox when its choice is unavailable.",
-  },
-  {
-    eyebrow: "Groups",
-    title: "Checkbox group options",
-    description: "Render passed options as a named checkbox group.",
-  },
-  {
-    eyebrow: "Content",
-    title: "Checkboxes with descriptions",
-    description: "Add supporting copy to clarify each choice.",
-  },
-  {
-    eyebrow: "Cards",
-    title: "Checkbox cards",
-    description: "Present multiple choices as selectable horizontal cards.",
-  },
-  {
-    eyebrow: "Cards",
-    title: "Vertical checkbox cards",
-    description: "Stack selectable checkbox cards vertically.",
-  },
-  {
-    eyebrow: "Alignment",
-    title: "Right-aligned checkbox",
-    description: "Place checkbox controls at the far edge of their labels.",
-  },
-  {
-    eyebrow: "Lists",
-    title: "Checkbox list group",
-    description: "Separate checkbox options with list dividers.",
-  },
-  {
-    eyebrow: "Lists",
-    title: "Horizontal checkbox list group",
-    description: "Combine list styling with a horizontal layout.",
-  },
-  {
-    eyebrow: "Validation",
-    title: "Validation states",
-    description: "Validate required checkbox choices with @wrnexus/validation.",
-  },
-];
-
-const fileUploadProgressUses = [
-  {
-    eyebrow: "Basic usage",
-    title: "Uploading file",
-    description: "Show an active upload with file metadata and a cancel action.",
-  },
-  {
-    eyebrow: "Progress",
-    title: "Starting upload",
-    description: "Communicate that a newly queued file has begun uploading.",
-  },
-  {
-    eyebrow: "Progress",
-    title: "Nearly complete",
-    description: "Keep progress and transferred size readable near completion.",
-  },
-  {
-    eyebrow: "States",
-    title: "Upload complete",
-    description: "Confirm a successful upload with a clear completion state.",
-  },
-  {
-    eyebrow: "States",
-    title: "Upload failed",
-    description: "Explain failure and provide a retry action.",
-  },
-  {
-    eyebrow: "States",
-    title: "Upload cancelled",
-    description: "Preserve file context and allow a cancelled upload to restart.",
-  },
-];
-
-function fileUploadProgressConfiguration(variation) {
-  const configurations = [
-    {
-      fileName: "design-system.zip",
-      label: "Uploading archive",
-      uploadedSize: "8.4 MB",
-      fileSize: "20 MB",
-      value: 42,
-      max: 100,
-      status: "uploading",
-    },
-    {
-      fileName: "product-images.tar",
-      label: "Preparing upload",
-      uploadedSize: "640 KB",
-      fileSize: "48 MB",
-      value: 2,
-      max: 100,
-      status: "uploading",
-    },
-    {
-      fileName: "launch-video.mp4",
-      label: "Uploading video",
-      uploadedSize: "184 MB",
-      fileSize: "200 MB",
-      value: 92,
-      max: 100,
-      status: "uploading",
-    },
-    {
-      fileName: "quarterly-report.pdf",
-      label: "Uploaded successfully",
-      uploadedSize: "4.8 MB",
-      fileSize: "4.8 MB",
-      value: 100,
-      max: 100,
-      status: "complete",
-    },
-    {
-      fileName: "customer-export.csv",
-      label: "Network connection lost",
-      uploadedSize: "12 MB",
-      fileSize: "36 MB",
-      value: 33,
-      max: 100,
-      status: "error",
-    },
-    {
-      fileName: "brand-assets.fig",
-      label: "Upload cancelled",
-      uploadedSize: "16 MB",
-      fileSize: "72 MB",
-      value: 22,
-      max: 100,
-      status: "cancelled",
-    },
-  ];
-  return configurations[variation] || configurations[0];
-}
-
-function basicFormConfiguration(componentName, variation) {
-  const validationVariation = componentName === "Radio" || componentName === "Checkbox" ? 10 : 8;
-  const common = {
-    id: `${baseSlugOf(componentName)}-${variation + 1}`,
-    name:
-      variation === validationVariation ? "validatedField" : `${baseSlugOf(componentName)}Field`,
-    label: displayName(componentName),
-    placeholder: `Enter ${displayName(componentName).toLowerCase()}`,
-    helperText:
-      variation === 0 || variation === 6
-        ? variation === 6
-          ? "We'll never share your details."
-          : "Helpful context for this field."
-        : "",
-    cornerHint: variation === 7 ? "Optional" : "",
-    variant:
-      variation === 1
-        ? "outlined"
-        : variation === 2
-          ? "floating"
-          : variation === 3
-            ? "pill"
-            : "normal",
-    icon:
-      variation === 1
-        ? "icon-[lucide--sparkles]"
-        : variation === 2
-          ? "icon-[lucide--circle-user-round]"
-          : "",
-    iconPosition: variation === 2 ? "end" : "start",
-    size: variation === 3 ? "sm" : "default",
-    readonly: variation === 4,
-    disabled:
-      componentName === "Radio"
-        ? variation === 1
-        : componentName === "Checkbox"
-          ? variation === 2
-          : variation === 5,
-    inline: variation === 6,
-    required: variation === validationVariation,
-    error: "",
-    color: "primary",
-  };
-  const byComponent = {
-    Checkbox: {
-      value: "terms",
-      values: variation >= 3 ? ["product"] : [],
-      checked: variation === 0,
-      indeterminate: variation === 1,
-      label: variation < 3 ? "Accept notifications" : "Notification preferences",
-      options:
-        variation >= 3
-          ? [
-              {
-                label: "Product updates",
-                value: "product",
-                description: variation >= 4 ? "News about features and improvements." : "",
-              },
-              {
-                label: "Account activity",
-                value: "account",
-                description: variation >= 4 ? "Important security and billing alerts." : "",
-              },
-              {
-                label: "Partner offers",
-                value: "partners",
-                description: variation >= 4 ? "Relevant offers from trusted partners." : "",
-              },
-            ]
-          : [],
-      orientation: [3, 5, 9].includes(variation) ? "horizontal" : "vertical",
-      card: variation === 5 || variation === 6,
-      rightAligned: variation === 7,
-      list: variation === 8 || variation === 9,
-      helperText: variation === 10 ? "Select at least one notification type." : "",
-    },
-    ColorPicker: { value: "#2563eb", label: "Brand color" },
-    FileInput: {
-      accept: "image/png,image/jpeg",
-      label: "Profile image",
-      placeholder: "Choose an image",
-    },
-    Input: {
-      value: variation === 4 ? "readonly@example.com" : "",
-      label: "Email address",
-      type: "email",
-      autocomplete: "email",
-    },
-    InputGroup: {
-      value: variation === 4 ? "wirejs" : "",
-      label: "Workspace",
-      startText: "https://",
-      endText: ".app",
-      actionLabel: variation === 0 ? "Check" : "",
-    },
-    Radio: {
-      value: variation === 0 ? "standard" : "",
-      checked: variation === 0,
-      label: variation === 0 ? "Standard plan" : "Choose a plan",
-      options:
-        variation >= 2
-          ? [
-              {
-                label: "Starter",
-                value: "starter",
-                description: variation >= 4 ? "For individuals and small projects." : "",
-              },
-              {
-                label: "Professional",
-                value: "professional",
-                description: variation >= 4 ? "For growing teams and products." : "",
-              },
-              {
-                label: "Enterprise",
-                value: "enterprise",
-                description: variation >= 4 ? "For organizations needing advanced controls." : "",
-              },
-            ]
-          : [],
-      orientation: [2, 5, 9].includes(variation) ? "horizontal" : "vertical",
-      card: variation === 5 || variation === 6,
-      rightAligned: variation === 7,
-      list: variation === 8 || variation === 9,
-      helperText: variation === 10 ? "Select one plan to continue." : "",
-    },
-    RangeSlider: {
-      value: 60,
-      min: 0,
-      max: 100,
-      step: 5,
-      showBounds: true,
-      showSteps: variation === 1,
-      marks:
-        variation === 1
-          ? [
-              { value: 0, label: "0" },
-              { value: 25, label: "25" },
-              { value: 50, label: "50" },
-              { value: 75, label: "75" },
-              { value: 100, label: "100" },
-            ]
-          : [],
-      label: "Volume",
-    },
-    Select: {
-      value: variation === 4 ? "design" : "",
-      label: "Team",
-      options: [
-        { label: "Engineering", value: "engineering" },
-        { label: "Design", value: "design" },
-        { label: "Marketing", value: "marketing" },
-      ],
-    },
-    Switch: { value: "enabled", checked: variation === 4, label: "Email notifications" },
-    Textarea: {
-      value: variation === 4 ? "This content is read only." : "",
-      label: "Description",
-      rows: 4,
-    },
-    TimePicker: {
-      value: variation === 4 ? "09:30" : "",
-      label: "Start time",
-      min: "08:00",
-      max: "18:00",
-    },
-  };
-  return { ...common, ...byComponent[componentName] };
-}
-
 function inputNumberConfiguration(variation) {
   const configurations = [
     {
@@ -3047,44 +1376,19 @@ function inputNumberConfiguration(variation) {
 }
 
 function demoUses(component) {
-  if (component.name === "FileUploadProgress") return fileUploadProgressUses;
-  if (component.name === "Checkbox") return checkboxUses;
-  if (component.name === "Radio") return radioUses;
-  if (basicFormComponentNames.has(component.name)) return basicFormUses;
+  const profile = profileFor(component.name);
+  if (profile?.demos?.length) {
+    return profile.demos.map(({ eyebrow, title, description }) => ({
+      eyebrow,
+      title,
+      description,
+    }));
+  }
+
   switch (component.name) {
-    case "Accordion":
-      return accordionUses;
-
-    case "Alert":
-      return alertUses;
-
-    case "Avatar":
-      return avatarUses;
-
-    case "AvatarGroup":
-      return avatarGroupUses;
-
-    case "Badge":
-      return badgeUses;
-
     case "Button":
       return buttonUses;
 
-    case "ButtonGroup":
-      return buttonGroupUses;
-
-    case "Card":
-      return cardUses;
-
-    case "Carousel":
-      return carouselUses;
-
-    case "ChatBubble":
-      return chatBubbleUses;
-
-    case "Collapse":
-      return collapseUses;
-
     case "AdvancedSelect":
       return advancedSelectUses;
 
@@ -3094,9 +1398,6 @@ function demoUses(component) {
     case "InputNumber":
       return inputNumberUses;
 
-    case "ToggleCount":
-      return toggleCountUses;
-
     case "PinInput":
       return pinInputUses;
 
@@ -3111,72 +1412,37 @@ function demoUses(component) {
   }
 }
 
-function eventDocumentation(component) {
-  const descriptions = {
-    action: "Fires when the component's action is selected.",
-    avatarClick: "Fires when a message avatar is selected.",
-    add: "Fires when an item is added.",
-    blur: "Fires when focus leaves the component.",
-    cancel: "Fires when the current operation is cancelled.",
-    change: "Fires when the component value or selection changes.",
-    clear: "Fires after the current value or collection is cleared.",
-    click: "Fires when the component is activated by pointer or keyboard.",
-    close: "Fires when the component closes.",
-    complete: "Fires when the component's operation completes.",
-    error: "Fires when the component encounters an error.",
-    focus: "Fires when the component receives focus.",
-    input: "Fires immediately as the component value changes.",
-    load: "Fires when component data or media finishes loading.",
-    linkClick: "Fires when a link inside a message is selected.",
-    messageClick: "Fires when a message bubble is selected.",
-    open: "Fires when the component opens.",
-    progress: "Fires as an operation reports progress.",
-    search: "Fires when the search query changes or is submitted.",
-    select: "Fires when an item or option is selected.",
-    success: "Fires when the component operation succeeds.",
-    submit: "Fires when the component submits its value.",
-    toggle: "Fires when the component toggles between states.",
+function demoConfiguration(component, variation) {
+  const demo = profileFor(component.name)?.demos?.[variation];
+  if (!demo) return {};
+  return {
+    ...(demo.props ?? {}),
+    __slots: demo.slots ?? {},
   };
-  const events = component.events.map((name) => [
-    name,
-    descriptions[name] ?? `Fires when the component emits the ${displayName(name)} event.`,
-  ]);
-  const emptyState =
-    '<div class="docs-empty"><span class="icon-[lucide--radio-tower] size-5" aria-hidden="true"></span>No public component events.</div>';
-  const eventsList = events.length
-    ? `<div class="detail-events-list">${events.map(([name, description]) => `<div><code>@${name}</code><span>${description}</span></div>`).join("")}</div>`
-    : emptyState;
-  const listenerExample = events.length
-    ? `<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>${escapeCode(`const component = document.querySelector('[data-wrn-events]')
-
-component.addEventListener('${events[0][0]}', (event) => {
-  console.log(event.detail)
-})`)}</code></pre></section>`
-    : "";
-  return `<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="${events.length ? "detail-events-grid" : ""}">${eventsList}${listenerExample}</div></section>`;
 }
 
-function detailUseCaseLinks(component, uses) {
-  const link = (index) =>
-    `<a href="#${slugOf(component.name)}-demo-${index + 1}">${escapeText(uses[index].title)}</a>`;
+function eventDocumentation(component) {
+  if (!component.events.length) return "";
 
-  if (component.name === "ButtonGroup") {
-    return `<span class="detail-toc-group">Basic usage</span>${link(0)}<span class="detail-toc-group">Sizes</span>${link(1)}${link(2)}${link(3)}${link(4)}${link(5)}${link(6)}`;
-  }
-
-  if (component.name === "Card") {
-    return `<span class="detail-toc-group">Basic usage</span>${link(0)}<span class="detail-toc-group">Content</span>${link(1)}${link(2)}<span class="detail-toc-group">Structure</span>${link(3)}${link(4)}<span class="detail-toc-group">Sizes</span>${link(5)}${link(6)}${link(7)}<span class="detail-toc-group">Navigation</span>${link(8)}${link(9)}<span class="detail-toc-group">Images</span>${link(10)}${link(11)}${link(12)}<span class="detail-toc-group">Animations</span>${link(13)}${link(14)}<span class="detail-toc-group">Card layout</span>${link(15)}${link(16)}<span class="detail-toc-group">Panels</span>${link(17)}${link(18)}${link(19)}${link(20)}${link(21)}${link(22)}`;
-  }
-  if (component.name === "Carousel") {
-    return `<span class="detail-toc-group">Basic usage</span>${link(0)}${link(1)}<span class="detail-toc-group">Playback</span>${link(2)}${link(3)}<span class="detail-toc-group">Direction</span>${link(4)}<span class="detail-toc-group">Layouts</span>${link(5)}${link(6)}${link(7)}${link(8)}${link(9)}<span class="detail-toc-group">Status</span>${link(10)}<span class="detail-toc-group">Thumbnails</span>${link(11)}${link(12)}`;
-  }
-
-  return uses
+  const eventRows = component.events
     .map(
-      (useCase, variation) =>
-        `<a href="#${slugOf(component.name)}-demo-${variation + 1}">${escapeText(useCase.title)}</a>`,
+      (eventName) =>
+        `<div><code>@${escapeCode(eventName)}</code><span>${escapeText(eventDescriptionFor(component.name, eventName))}</span></div>`,
     )
     .join("");
+  const declarativeAttributes = component.events
+    .map((eventName) => `  @${eventName}='console.log(event.detail)'`)
+    .join("\n");
+  const declarativeCode = `<${component.mount}\n${declarativeAttributes}\n/>`;
+  const selector = `[data-ui-component="${component.name}"], [data-component="${component.mount}"]`;
+  const listenerCode = `const component = document.querySelector(${JSON.stringify(selector)})\n\n${component.events
+    .map(
+      (eventName) =>
+        `component?.addEventListener(${JSON.stringify(eventName)}, (event) => {\n  console.log(${JSON.stringify(eventName)}, event.detail)\n})`,
+    )
+    .join("\n\n")}`;
+
+  return `<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">${eventRows}</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>${escapeCode(declarativeCode)}</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>${escapeCode(listenerCode)}</code></pre></section></div></div></section>`;
 }
 
 function detailPage(component, categoryComponents) {
@@ -3186,45 +1452,45 @@ function detailPage(component, categoryComponents) {
   const uses = demoUses(component);
   const demos = uses
     .map((useCase, variation) => {
+      const configuredDemo = demoConfiguration(component, variation);
       const isPinLengthDemo = component.name === "PinInput" && variation === 1;
       const pinLengths = [3, 5, 7];
       const mount = isPinLengthDemo
         ? `<div class="pin-length-demo">${pinLengths
             .map((length) =>
               componentMount(component, variation, {
+                ...configuredDemo,
                 label: `${length}-digit code`,
                 name: `pin-length-${length}`,
                 length,
               }),
             )
             .join("")}</div>`
-        : componentMount(component, variation);
+        : componentMount(component, variation, configuredDemo);
       const snippet = isPinLengthDemo
         ? pinLengths
             .map((length) =>
               sourceSnippet(component, variation, {
+                ...configuredDemo,
                 label: `${length}-digit code`,
                 name: `pinLength${length}`,
                 length,
               }),
             )
             .join("\n\n")
-        : sourceSnippet(component, variation);
+        : sourceSnippet(component, variation, configuredDemo);
       const validationSchema =
-        basicFormComponentNames.has(component.name) &&
-        variation === (component.name === "Radio" || component.name === "Checkbox" ? 10 : 8)
-          ? "basic-form-validation"
-          : component.name === "AdvancedSelect" && variation === 25
-            ? "advanced-select-validation"
-            : component.name === "AdvancedSelect" && variation === 26
-              ? "advanced-select-dynamic-validation"
-              : component.name === "ComboBox" && variation === 14
-                ? "combobox-validation"
-                : component.name === "PinInput" && variation === 9
-                  ? "pin-input-validation"
-                  : component.name === "TogglePassword" && variation === 5
-                    ? "toggle-password-validation"
-                    : "";
+        component.name === "AdvancedSelect" && variation === 25
+          ? "advanced-select-validation"
+          : component.name === "AdvancedSelect" && variation === 26
+            ? "advanced-select-dynamic-validation"
+            : component.name === "ComboBox" && variation === 14
+              ? "combobox-validation"
+              : component.name === "PinInput" && variation === 9
+                ? "pin-input-validation"
+                : component.name === "TogglePassword" && variation === 5
+                  ? "toggle-password-validation"
+                  : "";
       const preview = validationSchema
         ? `<form data-schema="${validationSchema}" class="demo-validation-form">${mount}<button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form>`
         : mount;
@@ -3237,6 +1503,7 @@ function detailPage(component, categoryComponents) {
         <div class="demo-workbench">
           <div id="${slugOf(component.name)}-demo-${variation + 1}" class="demo-canvas demo-canvas--${variation + 1}">
             <div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
+            ${isInteractiveOverlay(component) ? `<p class="demo-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>${escapeText(overlayInteractionLabel(component))}</p>` : ""}
             <div class="demo-render">${preview}</div>
           </div>
           <section class="demo-code" aria-label="${escapeAttribute(useCase.title)} usage">
@@ -3277,7 +1544,7 @@ ${playgroundStates(component)}
         <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>${propsTable(component)}</section>
       </main>
       <aside class="detail-aside">
-        <div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a>${detailUseCaseLinks(component, uses)}<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>${uses.map((useCase, variation) => `<a href="#${slugOf(component.name)}-demo-${variation + 1}">${escapeText(useCase.title)}</a>`).join("")}${component.events.length ? '<a href="#events">Events</a>' : ""}<a href="#api">Props API</a></div>
       </aside>
     </div>
     <nav class="detail-pagination">
@@ -3297,10 +1564,10 @@ function categoryPage(category, components) {
   const cards = components
     .map(
       (component) => `
-      <article class="catalog-card">
+      <article class="catalog-card" data-interactive-preview="${isInteractiveOverlay(component) ? "true" : "false"}">
         <div class="catalog-card-preview">
           <div class="catalog-card-glow" aria-hidden="true"></div>
-          <div class="catalog-card-stage">${componentMount(component, 0)}</div>
+          <div class="catalog-card-stage">${componentMount(component, 0, demoConfiguration(component, 0))}${isInteractiveOverlay(component) ? `<p class="catalog-interaction-hint"><span class="icon-[lucide--mouse-pointer-click] size-4" aria-hidden="true"></span>${escapeText(overlayInteractionLabel(component))}</p>` : ""}</div>
         </div>
         <div class="catalog-card-body">
           <div><span class="catalog-card-category">${titleCase(category)}</span><h2>${escapeText(displayName(component.name))}</h2><p>${escapeText(component.purpose)}</p></div>
@@ -3338,49 +1605,6 @@ const totalDemoCount = reference.components.reduce(
   0,
 );
 
-const completedComponents = new Set([
-  "Accordion",
-  "Alert",
-  "Avatar",
-  "AvatarGroup",
-  "Badge",
-  "Blockquote",
-  "Button",
-  "ButtonGroup",
-  "Card",
-  "Carousel",
-  "ChatBubble",
-  "Collapse",
-  "Checkbox",
-  "DatePicker",
-  "DeviceFrame",
-  "FileUploadProgress",
-  "ColorPicker",
-  "FileInput",
-  "Input",
-  "InputGroup",
-  "Radio",
-  "RangeSlider",
-  "Select",
-  "Switch",
-  "Textarea",
-  "TimePicker",
-  "AdvancedSelect",
-  "ComboBox",
-  "InputNumber",
-  "PinInput",
-  "StrongPassword",
-  "ToggleCount",
-  "TogglePassword",
-]);
-const workingComponents = new Set([]);
-
-function componentStatus(componentName) {
-  if (completedComponents.has(componentName)) return "complete";
-  if (workingComponents.has(componentName)) return "working";
-  return "pending";
-}
-
 function showcaseLayout() {
   const directory = categoryEntries
     .map(
@@ -3388,10 +1612,10 @@ function showcaseLayout() {
         <section class="docs-directory-group">
           <a class="docs-directory-heading" href="/${category}">${titleCase(category)}</a>
           <div>${components
-            .map((component) => {
-              const status = componentStatus(component.name);
-              return `<a data-docs-component-link href="/components/${slugOf(component.name)}"><span data-docs-component-name>${escapeText(displayName(component.name))}</span><small data-component-status="${status}">${titleCase(status)}</small></a>`;
-            })
+            .map(
+              (component) =>
+                `<a data-docs-component-link href="/components/${slugOf(component.name)}">${escapeText(displayName(component.name))}</a>`,
+            )
             .join("")}</div>
         </section>`,
     )
@@ -3408,7 +1632,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>
@@ -3467,21 +1691,50 @@ layout Document {
 mkdirSync(pagesDir, { recursive: true });
 mkdirSync(detailPagesDir, { recursive: true });
 mkdirSync(layoutsDir, { recursive: true });
-writeIfChanged(join(layoutsDir, "showcase.wrn"), showcaseLayout());
-writeIfChanged(join(layoutsDir, "document.wrn"), documentLayout());
-const generatedPages = new Set(["index.wrn", "docs.wrn", "blocks.wrn", "templates.wrn"]);
-const generatedDetailPages = new Set();
+writeFileSync(join(layoutsDir, "showcase.wrn"), showcaseLayout(), "utf8");
+writeFileSync(join(layoutsDir, "document.wrn"), documentLayout(), "utf8");
+for (const file of readdirSync(pagesDir).filter((entry) => entry.endsWith(".wrn"))) {
+  unlinkSync(join(pagesDir, file));
+}
+for (const file of readdirSync(detailPagesDir).filter((entry) => entry.endsWith(".wrn"))) {
+  unlinkSync(join(detailPagesDir, file));
+}
 
 for (const [category, components] of categoryEntries) {
-  generatedPages.add(`${category}.wrn`);
-  writeIfChanged(join(pagesDir, `${category}.wrn`), categoryPage(category, components));
+  writeFileSync(join(pagesDir, `${category}.wrn`), categoryPage(category, components), "utf8");
   for (const component of components) {
-    const detailFile = `${slugOf(component.name)}.wrn`;
-    generatedDetailPages.add(detailFile);
-    writeIfChanged(join(detailPagesDir, detailFile), detailPage(component, components));
+    writeFileSync(
+      join(detailPagesDir, `${slugOf(component.name)}.wrn`),
+      detailPage(component, components),
+      "utf8",
+    );
   }
 }
 
+const showcaseManifest = {
+  generatedFrom: "packages/ui/component-reference.json",
+  componentCount: reference.count,
+  categoryCount: categoryEntries.length,
+  totalDemoCount,
+  components: reference.components.map((component) => ({
+    name: component.name,
+    mount: component.mount,
+    slug: slugOf(component.name),
+    category: component.category,
+    purpose: component.purpose,
+    demoCount: demoUses(component).length,
+    propCount: component.props.length,
+    slots: component.slots,
+    events: component.events,
+    profiled: Boolean(profileFor(component.name)),
+  })),
+};
+writeFileSync(
+  join(exampleRoot, "showcase-manifest.json"),
+  `${JSON.stringify(showcaseManifest, null, 2)}\n`,
+  "utf8",
+);
+
 const categoryCards = categoryEntries
   .map(
     ([category, components], index) =>
@@ -3489,7 +1742,7 @@ const categoryCards = categoryEntries
   )
   .join("");
 
-writeIfChanged(
+writeFileSync(
   join(pagesDir, "index.wrn"),
   `// Generated by scripts/generate-showcase.mjs. Do not edit directly.
 page ComponentShowcase {
@@ -3504,10 +1757,10 @@ page ComponentShowcase {
         <span class="showcase-eyebrow">The UI foundation for WRNexus</span>
         <h1 class="showcase-title">Build modern products<br /><em>at framework speed.</em></h1>
         <p class="showcase-description">A complete, accessible component system with ${reference.count} primitives, ready-made blocks, page templates, responsive behavior, and deeply configurable design tokens.</p>
-        <div class="home-actions"><a class="home-primary-action" href="/docs">Get started <span aria-hidden="true">→</span></a><a class="home-secondary-action" href="/blocks">Explore blocks</a></div>
+        <div class="home-actions"><a class="home-primary-action" href="/docs">Get started <span aria-hidden="true">→</span></a><a class="home-secondary-action" href="/block-library">Explore blocks</a></div>
         <div class="home-install"><span>$</span><code>bun add @wrnexus/ui</code><button type="button" data-copy-text="bun add @wrnexus/ui" aria-label="Copy install command"><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span></button></div>
       </header>
-      <section class="home-product-grid"><article><span class="icon-[lucide--component] size-7"></span><strong>${reference.count} components</strong><p>Accessible primitives for every product surface.</p><a href="/base">Browse components →</a></article><article><span class="icon-[lucide--layout-template] size-7"></span><strong>Ready-made blocks</strong><p>Composable sections assembled from WRNexus UI.</p><a href="/blocks">Explore blocks →</a></article><article><span class="icon-[lucide--panels-top-left] size-7"></span><strong>Page templates</strong><p>Complete responsive pages ready to customize.</p><a href="/templates">View templates →</a></article></section>
+      <section class="home-product-grid"><article><span class="icon-[lucide--component] size-7"></span><strong>${reference.count} components</strong><p>Accessible primitives for every product surface.</p><a href="/base">Browse components →</a></article><article><span class="icon-[lucide--layout-template] size-7"></span><strong>Ready-made blocks</strong><p>Composable sections assembled from WRNexus UI.</p><a href="/block-library">Explore blocks →</a></article><article><span class="icon-[lucide--panels-top-left] size-7"></span><strong>Page templates</strong><p>Complete responsive pages ready to customize.</p><a href="/templates">View templates →</a></article></section>
       <section class="showcase-stats">
         <div class="showcase-stat"><strong>${reference.count}</strong><span>Unique components</span></div>
         <div class="showcase-stat"><strong>${totalDemoCount}</strong><span>Live configurations</span></div>
@@ -3570,7 +1823,7 @@ const docsSections = [
     "Use the component API pages, blocks, and templates as production starting points.",
   ],
 ];
-writeIfChanged(
+writeFileSync(
   join(pagesDir, "docs.wrn"),
   `page Documentation {
   layout = "showcase"
@@ -3588,7 +1841,6 @@ writeIfChanged(
 
 const customizationGuides = new Set(["dark-mode", "themes", "colors", "fonts", "sizing"]);
 for (const [slug, title, description, code] of docsSections) {
-  generatedPages.add(`${slug}.wrn`);
   const section = customizationGuides.has(slug) ? "Customization" : "Getting Started";
   const examples =
     slug === "colors"
@@ -3626,7 +1878,7 @@ for (const [slug, title, description, code] of docsSections) {
                 "The setting is inherited by components, blocks, templates, and playground previews.",
               ],
             ];
-  writeIfChanged(
+  writeFileSync(
     join(pagesDir, `${slug}.wrn`),
     `page ${identifier(slug)}Guide {
   layout = "showcase"
@@ -3640,7 +1892,7 @@ for (const [slug, title, description, code] of docsSections) {
       <header class="docs-intro"><span class="showcase-eyebrow">${section}</span><h1>${escapeText(title)}</h1><p>${escapeText(description)}</p></header>
       ${examples.map(([heading, copy]) => `<section class="guide-section"><h2>${escapeText(heading)}</h2><p>${escapeText(copy)}</p></section>`).join("")}
       ${code ? `<section class="guide-section"><h2>Quick start</h2><pre><code>${escapeCode(code)}</code></pre></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>
   }
 }
@@ -3689,9 +1941,10 @@ const blockCards = [
     "Sign in, registration, recovery, and verification.",
   ],
 ];
-writeIfChanged(
-  join(pagesDir, "blocks.wrn"),
-  `page Blocks {
+// Keep /blocks for the generated Blocks component category.
+writeFileSync(
+  join(pagesDir, "block-library.wrn"),
+  `page BlockLibrary {
   layout = "showcase"
   seo { title = "UI blocks" description = "Complete sections composed from WRNexus UI components." }
   view {
@@ -3738,7 +1991,7 @@ const templates = [
     "Accounts, transactions, reporting, transfers, and controls.",
   ],
 ];
-writeIfChanged(
+writeFileSync(
   join(pagesDir, "templates.wrn"),
   `page Templates {
   layout = "showcase"
@@ -3747,7 +2000,7 @@ writeIfChanged(
     <div class="page-marketplace page-templates">
       <nav class="market-tabs"><a href="#all">All templates</a><a href="#admin">Dashboards & Admin</a><a href="#commerce">Ecommerce</a><a href="#websites">Websites</a><a href="#support">Support</a><a href="#finance">Finance</a></nav>
       <header><span class="showcase-eyebrow">Complete products</span><h1>Production-ready templates</h1><p>Responsive page systems assembled from WRNexus blocks and components.</p></header>
-      <div class="template-list">${templates.map(([title, category, count], index) => `<article class="template-card"><div><small>${count}</small><h2>${title}</h2><p>${category} template with consistent navigation, content, forms, and responsive behavior.</p><a href="/blocks">Preview <span>→</span></a></div><div class="template-scenes template-scenes--${index + 1}"><i></i><i></i><i></i></div></article>`).join("")}</div>
+      <div class="template-list">${templates.map(([title, category, count], index) => `<article class="template-card"><div><small>${count}</small><h2>${title}</h2><p>${category} template with consistent navigation, content, forms, and responsive behavior.</p><a href="/block-library">Preview <span>→</span></a></div><div class="template-scenes template-scenes--${index + 1}"><i></i><i></i><i></i></div></article>`).join("")}</div>
     </div>
   }
 }
@@ -3755,13 +2008,6 @@ writeIfChanged(
   "utf8",
 );
 
-for (const file of readdirSync(pagesDir).filter((entry) => entry.endsWith(".wrn"))) {
-  if (!generatedPages.has(file)) unlinkSync(join(pagesDir, file));
-}
-for (const file of readdirSync(detailPagesDir).filter((entry) => entry.endsWith(".wrn"))) {
-  if (!generatedDetailPages.has(file)) unlinkSync(join(detailPagesDir, file));
-}
-
 process.stdout.write(
   `Generated ${reference.count} component detail pages, ${totalDemoCount} live demos, and ${categoryEntries.length} category pages.\n`,
 );
diff --git a/examples/component-showcase/scripts/showcase-profiles.mjs b/examples/component-showcase/scripts/showcase-profiles.mjs
new file mode 100644
index 00000000..3520cc27
--- /dev/null
+++ b/examples/component-showcase/scripts/showcase-profiles.mjs
@@ -0,0 +1,918 @@
+const featureItems = [
+  {
+    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",
+  },
+];
+
+const metricItems = [
+  {
+    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",
+  },
+];
+
+const statsItems = [
+  {
+    label: "Composite components",
+    value: "18",
+    description: "Reusable public-page building blocks",
+    icon: "icon-[lucide--blocks]",
+    color: "primary",
+  },
+  {
+    label: "Rendering",
+    value: "SSR",
+    description: "Server-first WRNexusJS rendering",
+    icon: "icon-[lucide--server]",
+    color: "info",
+  },
+  {
+    label: "Responsive",
+    value: "Yes",
+    description: "Mobile, tablet, and desktop layouts",
+    icon: "icon-[lucide--monitor-smartphone]",
+    color: "success",
+  },
+  {
+    label: "Theme aware",
+    value: "Yes",
+    description: "Active theme and accent palettes",
+    icon: "icon-[lucide--palette]",
+    color: "warning",
+  },
+];
+
+const breadcrumbs = [
+  { label: "Home", href: "/", icon: "icon-[lucide--house]" },
+  { label: "Components", href: "/base" },
+  { label: "Page header", current: true },
+];
+
+const heroActions = [
+  {
+    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",
+  },
+];
+
+const menuItems = [
+  {
+    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,
+  },
+];
+
+const footerItems = [
+  {
+    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 },
+    ],
+  },
+];
+
+const visualPanel = `
+<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>`;
+
+const shellPreview = `
+<div class="showcase-shell-preview">
+  <header>Header slot</header>
+  <main>Public page content</main>
+  <footer>Footer slot</footer>
+</div>`;
+
+const actionSlot = `
+<div class="showcase-inline-actions">
+  <a href="#primary" class="showcase-action showcase-action--primary">Primary action</a>
+  <a href="#secondary" class="showcase-action">Secondary action</a>
+</div>`;
+
+const standard = (title, description, props = {}, slots = {}) => ({
+  eyebrow: "Recommended",
+  title,
+  description,
+  props,
+  slots,
+});
+
+const compact = (title, description, props = {}, slots = {}) => ({
+  eyebrow: "Compact",
+  title,
+  description,
+  props,
+  slots,
+});
+
+const advanced = (title, description, props = {}, slots = {}) => ({
+  eyebrow: "Advanced",
+  title,
+  description,
+  props,
+  slots,
+});
+
+export const componentProfiles = {
+  PublicPageShell: {
+    demos: [
+      standard("Complete public page shell", "Use the shell around a complete marketing or public-service page.", { maxWidth: "xl", background: "default" }, { default: shellPreview }),
+      compact("Constrained documentation shell", "Keep long-form documentation readable with a compact content width.", { maxWidth: "compact", headerOffset: "sm", background: "soft" }, { default: shellPreview }),
+      advanced("Full-bleed landing page", "Allow full-width sections while keeping overflow and minimum-height behavior consistent.", { maxWidth: "full", fullWidth: true, minHeight: "screen", overflow: "clip" }, { default: shellPreview }),
+    ],
+    options: {
+      maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
+      headerOffset: ["none", "sm", "md", "lg"],
+      background: ["default", "soft", "raised", "transparent"],
+      overflow: ["visible", "hidden", "clip", "auto"],
+      minHeight: ["none", "screen", "full"],
+    },
+  },
+
+  AnnouncementBar: {
+    demos: [
+      standard("Soft product notice", "Use a calm, dismissible notice inside a constrained content area.", {
+        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,
+        width: "default",
+        variant: "soft",
+      }),
+      compact("Wide solid announcement", "Use stronger contrast for important platform or service announcements.", {
+        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,
+        width: "wide",
+        compact: true,
+        variant: "solid",
+      }),
+      advanced("Full-width critical alert", "Use edge-to-edge width for time-sensitive information that applies to the complete page.", {
+        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,
+        width: "full",
+        color: "warning",
+        variant: "solid",
+      }),
+    ],
+    playground: { width: "wide", dismissible: true, variant: "solid" },
+    options: {
+      width: ["default", "wide", "full"],
+      variant: ["default", "soft", "outline", "solid", "minimal"],
+      size: ["compact", "default", "spacious"],
+      color: ["primary", "secondary", "info", "success", "warning", "danger"],
+      role: ["status", "alert"],
+      live: ["off", "polite", "assertive"],
+    },
+  },
+
+  Breadcrumb: {
+    demos: [
+      standard("Minimal page trail", "Use a restrained breadcrumb above standard page content.", { items: breadcrumbs, size: "small", variant: "minimal" }),
+      compact("Soft navigation trail", "Add a soft surface when the breadcrumb needs more separation from surrounding content.", { items: breadcrumbs, size: "medium", variant: "soft", showHome: true }),
+      advanced("Large directory breadcrumb", "Use a larger breadcrumb in directories, dashboards, and touch-first interfaces.", { items: breadcrumbs, size: "large", variant: "outline", showHome: true, separator: "slash" }),
+    ],
+    options: {
+      size: ["small", "medium", "large"],
+      separator: ["chevron", "slash", "dot", "arrow"],
+      variant: ["minimal", "soft", "outline", "contrast"],
+    },
+  },
+
+  PageHeader: {
+    demos: [
+      standard("Page header with actions", "Introduce a service or documentation page with breadcrumbs and clear actions.", {
+        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]",
+        showBreadcrumbs: true,
+        breadcrumbs,
+        primaryLabel: "Primary action",
+        primaryHref: "#primary",
+        primaryIcon: "icon-[lucide--arrow-down]",
+        secondaryLabel: "Secondary action",
+        secondaryHref: "#secondary",
+        secondaryIcon: "icon-[lucide--house]",
+        maxWidth: "full",
+      }),
+      compact("Compact service header", "Use reduced spacing when a page already sits inside an application shell.", {
+        eyebrow: "Citizen service",
+        title: "Track a complaint",
+        description: "Check the latest status using your complaint reference.",
+        icon: "icon-[lucide--scan-search]",
+        compact: true,
+        primaryLabel: "Track status",
+        primaryHref: "#track",
+        variant: "soft",
+      }),
+      advanced("Centered campaign header", "Use a centered header for campaigns, guides, and high-level public information.", {
+        eyebrow: "Safety guide",
+        title: "Prepare your family for emergencies",
+        description: "Practical guidance for creating a plan, preparing supplies, and staying informed.",
+        centered: true,
+        align: "center",
+        variant: "minimal",
+        maxWidth: "wide",
+      }),
+    ],
+    playground: { showBreadcrumbs: true, breadcrumbs, maxWidth: "full" },
+    options: {
+      align: ["left", "center", "right"],
+      size: ["small", "default", "large"],
+      maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
+      variant: ["default", "minimal", "soft", "raised", "tinted", "solid"],
+      color: ["primary", "secondary", "info", "success", "warning", "danger"],
+    },
+  },
+
+  Hero: {
+    demos: [
+      standard("Split hero with visual", "Lead a landing page with clear content and a flexible visual slot.", {
+        eyebrow: "Reusable public UI",
+        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.",
+        layout: "split",
+        visualPosition: "right",
+        visualStyle: "card",
+        primaryLabel: "Explore components",
+        primaryHref: "#components",
+        primaryIcon: "icon-[lucide--arrow-right]",
+        secondaryLabel: "Read documentation",
+        secondaryHref: "#docs",
+        secondaryIcon: "icon-[lucide--book-open]",
+        maxWidth: "wide",
+        variant: "gradient",
+      }, { visual: visualPanel }),
+      compact("Centered campaign hero", "Use a stacked, centered layout for announcements, campaigns, and simple conversion pages.", {
+        eyebrow: "Public campaign",
+        title: "Safer communities start with trusted information",
+        description: "Find verified guidance, public notices, and citizen services in one place.",
+        align: "center",
+        layout: "stacked",
+        size: "default",
+        variant: "soft",
+        primaryLabel: "Browse services",
+        primaryHref: "#services",
+      }),
+      advanced("Hero with badges and trust", "Add product proof, audience badges, and supporting trust information.", {
+        eyebrow: "Developer platform",
+        title: "Ship reliable interfaces faster",
+        highlight: "without duplicating design work",
+        description: "Reusable components, server rendering, themes, accessibility, and responsive behavior.",
+        badges: ["SSR first", "Theme aware", "Accessible"],
+        trustItems: ["108 UI components", "Light and dark themes", "Mobile ready"],
+        layout: "split",
+        visualPosition: "left",
+        visualStyle: "soft",
+        variant: "raised",
+      }, { visual: visualPanel }),
+    ],
+    playground: { layout: "split", visualPosition: "right", maxWidth: "wide" },
+    options: {
+      align: ["left", "center", "right"],
+      size: ["compact", "default", "lg", "xl"],
+      layout: ["split", "stacked", "content"],
+      visualPosition: ["left", "right"],
+      visualStyle: ["plain", "card", "soft"],
+      variant: ["default", "soft", "raised", "outline", "gradient", "solid", "minimal"],
+      maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
+    },
+  },
+
+  HeroActions: {
+    demos: [
+      standard("Primary and secondary actions", "Group the most important hero actions with consistent spacing and hierarchy.", { actions: heroActions, align: "left", orientation: "horizontal" }),
+      compact("Centered campaign actions", "Center actions beneath a stacked hero or CTA message.", { actions: heroActions, align: "center", orientation: "horizontal", size: "sm" }),
+      advanced("Vertical mobile-first actions", "Use a vertical group for narrow panels, onboarding, or three-action flows.", { actions: [...heroActions, { label: "Contact support", href: "#support", icon: "icon-[lucide--life-buoy]", variant: "ghost" }], orientation: "vertical", fullWidthMobile: true, size: "lg" }),
+    ],
+    playground: { actions: heroActions },
+    options: {
+      align: ["left", "center", "right"],
+      orientation: ["horizontal", "vertical"],
+      size: ["sm", "default", "lg"],
+    },
+  },
+
+  SplitHero: {
+    demos: [
+      standard("Balanced content and visual", "Explain a product, department, or service with a balanced two-column introduction.", {
+        eyebrow: "Balanced layout",
+        title: "Combine detailed content",
+        highlight: "with a strong visual panel",
+        description: "Use SplitHero for product explanations, department introductions, campaigns, and feature storytelling.",
+        primaryLabel: "View public services",
+        primaryHref: "#services",
+        primaryIcon: "icon-[lucide--arrow-right]",
+        secondaryLabel: "Contact department",
+        secondaryHref: "#contact",
+        secondaryIcon: "icon-[lucide--phone]",
+        visualPosition: "right",
+        ratio: "balanced",
+        maxWidth: "wide",
+      }, { visual: visualPanel }),
+      compact("Visual-first introduction", "Reverse the layout when the screenshot, map, or media needs first visual priority.", {
+        eyebrow: "Visual first",
+        title: "Show the interface before the explanation",
+        description: "Place the visual on the left and use a compact content column.",
+        visualPosition: "left",
+        reverse: true,
+        ratio: "visual",
+        variant: "soft",
+      }, { visual: visualPanel }),
+      advanced("Structured service overview", "Use structured visual items for capabilities, facts, or proof points.", {
+        eyebrow: "Department overview",
+        title: "One service, clearly explained",
+        description: "Pair narrative content with structured supporting information.",
+        visualTitle: "Service highlights",
+        visualDescription: "A consistent, responsive supporting panel.",
+        visualItems: [
+          { label: "Online access", value: "24/7", icon: "icon-[lucide--globe-2]" },
+          { label: "Response tracking", value: "Live", icon: "icon-[lucide--activity]" },
+          { label: "Languages", value: "3", icon: "icon-[lucide--languages]" },
+        ],
+        ratio: "content",
+        variant: "gradient",
+      }),
+    ],
+    options: {
+      visualPosition: ["left", "right"],
+      ratio: ["balanced", "content", "visual"],
+      align: ["left", "center", "right"],
+      variant: ["default", "soft", "raised", "gradient", "solid", "minimal"],
+      maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
+    },
+  },
+
+  Section: {
+    demos: [
+      standard("Standard content section", "Create predictable vertical rhythm around a page section.", { id: "standard-section", spacing: "lg", maxWidth: "xl" }, { default: "<div class=\"showcase-content-block\">Standard section content</div>" }),
+      compact("Compact dashboard section", "Reduce spacing for dense application screens and grouped dashboard content.", { id: "compact-section", spacing: "sm", maxWidth: "wide", variant: "soft" }, { default: "<div class=\"showcase-content-block\">Compact dashboard content</div>" }),
+      advanced("Full-width surface section", "Use a full-width background while retaining a structured content area.", { id: "full-section", fullWidth: true, maxWidth: "full", borderTop: true, borderBottom: true, variant: "raised" }, { default: "<div class=\"showcase-content-block\">Full-width public page section</div>" }),
+    ],
+    options: {
+      spacing: ["none", "sm", "md", "lg", "xl"],
+      maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
+      variant: ["default", "soft", "raised", "transparent"],
+    },
+  },
+
+  SectionHeader: {
+    demos: [
+      standard("Left-aligned section header", "Introduce features, services, content groups, or dashboard areas.", { eyebrow: "Public services", title: "Everything citizens need", description: "Discover online services, directories, guidance, and verified public information.", align: "left", maxWidth: "3xl" }),
+      compact("Centered section header", "Use centered hierarchy above feature grids, testimonials, and campaign content.", { eyebrow: "Capabilities", title: "A consistent component system", description: "Compose complete pages without rebuilding spacing and typography.", align: "center", size: "compact" }),
+      advanced("Large editorial header", "Use a larger heading for major landing-page sections and product storytelling.", { eyebrow: "Platform", title: "Designed for complex public and enterprise interfaces", description: "Theme-aware, responsive, accessible, and server-rendered.", align: "left", size: "large", maxWidth: "full" }),
+    ],
+    options: {
+      align: ["left", "center", "right"],
+      size: ["compact", "default", "large"],
+      maxWidth: ["compact", "lg", "xl", "3xl", "full"],
+    },
+  },
+
+  MarketingSectionHeader: {
+    demos: [
+      standard("Split header with action", "Pair marketing copy with a clear secondary navigation action.", { eyebrow: "Platform capabilities", title: "Build complete public experiences", description: "Use reusable sections, cards, metrics, heroes, and CTAs.", align: "split", actionLabel: "Explore components", actionHref: "#components", actionIcon: "icon-[lucide--arrow-right]" }),
+      compact("Centered marketing header", "Use a centered configuration above campaigns, proof, and feature collections.", { eyebrow: "Why WRNexusJS", title: "One coherent design system", description: "Consistent presentation across public pages and product applications.", align: "center", size: "compact" }),
+      advanced("External resource header", "Link to supporting documentation or an external resource.", { eyebrow: "Developer resources", title: "Learn the framework through working examples", description: "Every component page includes live demos, playground controls, events, and API details.", actionLabel: "Open documentation", actionHref: "https://wrnexusjs.dev", actionExternal: true, align: "split", size: "large" }),
+    ],
+    options: {
+      align: ["left", "center", "right", "split"],
+      size: ["compact", "default", "large"],
+    },
+  },
+
+  TextLink: {
+    demos: [
+      standard("Inline directional link", "Use a lightweight link at the end of a card, section, or short content block.", { label: "Learn more", href: "#learn", showArrow: true, variant: "default" }),
+      compact("Underlined content link", "Use an underline when the link appears inside long-form text.", { label: "Read the complete guide", href: "#guide", underline: true, showArrow: false, size: "sm" }),
+      advanced("External developer link", "Clearly communicate that a resource opens outside the current application.", { label: "Open WRNexusJS documentation", href: "https://wrnexusjs.dev", external: true, target: "_blank", icon: "icon-[lucide--book-open]", iconPosition: "start", showArrow: false, variant: "soft" }),
+    ],
+    options: {
+      iconPosition: ["start", "end"],
+      size: ["sm", "default", "lg"],
+      variant: ["default", "soft", "ghost", "minimal"],
+    },
+  },
+
+  FeatureGrid: {
+    demos: [
+      standard("Three-column service grid", "Arrange services or capabilities as equal-height responsive cards.", { items: featureItems, columns: 3, tabletColumns: 2, mobileColumns: 1, gap: "lg", equalHeight: true, maxWidth: "full" }),
+      compact("Compact four-column grid", "Use smaller gaps and four columns for short benefit or capability cards.", { items: featureItems.concat([{ 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", variant: "soft" }),
+      advanced("Auto-fit feature collection", "Let cards wrap automatically according to a minimum useful width.", { items: featureItems, minItemWidth: "18rem", columns: 3, gap: "xl", variant: "panel", maxWidth: "wide" }),
+    ],
+    playground: { items: featureItems, columns: 3, tabletColumns: 2, mobileColumns: 1, maxWidth: "full" },
+    options: {
+      columns: ["1", "2", "3", "4", "5", "6"],
+      tabletColumns: ["1", "2", "3", "4"],
+      mobileColumns: ["1", "2"],
+      gap: ["none", "sm", "md", "lg", "xl"],
+      align: ["start", "center", "end", "stretch"],
+      maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
+      variant: ["default", "panel", "soft"],
+    },
+  },
+
+  FeatureCard: {
+    demos: [
+      standard("Linked service card", "Present one service with an icon, hierarchy, badge, and clear action.", { ...featureItems[0], iconStyle: "soft", stretchedLink: true }),
+      compact("Image-led feature card", "Use a visual preview for products, campaigns, dashboards, or service explanations.", { title: "Unified citizen portal", description: "Access trusted services from one responsive interface.", 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", imageAlt: "Abstract dashboard preview", imagePosition: "top", imageAspect: "wide", href: "#portal", actionLabel: "Open portal", badge: "Featured", color: "info", variant: "raised" }),
+      advanced("Solid callout card", "Use stronger contrast for a featured capability or high-priority service.", { icon: "icon-[lucide--siren]", eyebrow: "Emergency", title: "Get urgent help", description: "Find verified emergency contacts and immediate safety guidance.", href: "#emergency", actionLabel: "View emergency help", badge: "Important", color: "danger", variant: "solid", hover: "glow" }),
+    ],
+    options: {
+      iconStyle: ["plain", "soft", "solid", "outline"],
+      iconSize: ["sm", "default", "lg"],
+      imagePosition: ["top", "left", "right"],
+      imageAspect: ["square", "wide", "video", "portrait"],
+      variant: ["default", "raised", "soft", "outline", "ghost", "minimal", "solid", "gradient"],
+      hover: ["none", "lift", "shadow", "border", "glow"],
+      align: ["left", "center", "right"],
+    },
+  },
+
+  FeatureIconCard: {
+    demos: [
+      standard("Icon-led capability card", "Use a compact card for one feature, benefit, or linked capability.", { 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" }),
+      compact("Centered benefit card", "Center the content for short benefit grids and campaign proof points.", { icon: "icon-[lucide--gauge]", title: "Fast rendering", description: "Server-first output with focused client behavior.", align: "center", size: "compact", iconVariant: "solid", color: "info" }),
+      advanced("Highlighted linked card", "Use a stronger raised treatment for a featured capability.", { icon: "icon-[lucide--workflow]", title: "Composable workflows", description: "Connect forms, services, data, and actions without duplicating UI.", href: "#workflows", actionLabel: "Explore workflows", variant: "raised", hover: "lift", color: "success" }),
+    ],
+    options: {
+      iconSize: ["sm", "md", "lg"],
+      iconVariant: ["plain", "soft", "solid", "outline"],
+      size: ["compact", "default", "large"],
+      variant: ["default", "soft", "raised", "outline", "minimal"],
+      align: ["left", "center", "right"],
+      hover: ["none", "lift", "border", "glow"],
+    },
+  },
+
+  MetricGrid: {
+    demos: [
+      standard("Three-column KPI grid", "Display operational values in a full-width, responsive grid.", { items: metricItems, columns: 3, tabletColumns: 2, mobileColumns: 1, gap: "lg", maxWidth: "full", equalHeight: true }),
+      compact("Unified metrics bar", "Use dividers to present compact metrics as one cohesive surface.", { items: metricItems, columns: 3, tabletColumns: 2, mobileColumns: 1, gap: "none", dividers: true, size: "sm", maxWidth: "wide" }),
+      advanced("Auto-fit monitoring grid", "Allow cards to wrap automatically when the number of metrics changes.", { items: metricItems.concat([{ label: "Response time", value: "1.8", suffix: "s", description: "Median API response", icon: "icon-[lucide--timer]", color: "warning", progress: 72, progressLabel: "Target" }]), minItemWidth: "17rem", columns: 4, variant: "soft", maxWidth: "full" }),
+    ],
+    playground: { items: metricItems, columns: 3, tabletColumns: 2, mobileColumns: 1, maxWidth: "full" },
+    options: {
+      columns: ["1", "2", "3", "4", "5", "6"],
+      tabletColumns: ["1", "2", "3", "4"],
+      mobileColumns: ["1", "2"],
+      gap: ["none", "sm", "md", "lg", "xl"],
+      variant: ["default", "panel", "soft"],
+      maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
+    },
+  },
+
+  MetricCard: {
+    demos: [
+      standard("Operational KPI", "Display one metric with a clear label, value, supporting description, and trend.", { ...metricItems[2], actionLabel: "Open status", href: "#status" }),
+      compact("Progress metric", "Add progress when a value is measured against a clear target.", { label: "Profile completion", value: "72", suffix: "%", description: "Complete the remaining account and security steps.", icon: "icon-[lucide--circle-user-round]", progress: 72, progressLabel: "Account setup", color: "info", variant: "soft" }),
+      advanced("Selectable dashboard metric", "Emit select and action events from interactive cards used in dashboards.", { label: "Open complaints", value: "38", description: "Cases waiting for review or assignment.", icon: "icon-[lucide--inbox]", badge: "Needs review", selectable: true, actionLabel: "Review queue", href: "#queue", color: "warning", variant: "raised", hover: "glow" }),
+    ],
+    options: {
+      iconStyle: ["plain", "soft", "solid", "outline"],
+      trendDirection: ["neutral", "up", "down", "positive", "negative"],
+      variant: ["default", "raised", "soft", "outline", "minimal", "solid", "gradient"],
+      hover: ["none", "lift", "border", "glow"],
+      align: ["left", "center", "right"],
+    },
+  },
+
+  StatsBar: {
+    demos: [
+      standard("Public proof strip", "Present key facts and trust signals in one compact responsive row.", { items: statsItems, columns: 4, compact: true, dividers: true, icons: true, variant: "raised", maxWidth: "xl" }),
+      compact("Three-stat compact bar", "Use fewer facts with tighter spacing below a hero or page header.", { items: statsItems.slice(0, 3), columns: 3, compact: true, dividers: true, icons: false, variant: "soft", maxWidth: "wide" }),
+      advanced("Full-width solid statistics", "Use a high-contrast statistics bar as a major landing-page transition.", { items: statsItems, columns: 4, compact: false, dividers: false, icons: true, variant: "solid", maxWidth: "full", color: "primary" }),
+    ],
+    playground: { items: statsItems, columns: 4, maxWidth: "xl" },
+    options: {
+      columns: ["1", "2", "3", "4", "5", "6"],
+      variant: ["default", "raised", "soft", "outline", "minimal", "solid"],
+      maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
+    },
+  },
+
+  CTASection: {
+    demos: [
+      standard("Split conversion CTA", "Close a major page section with a clear action and supporting visual content.", { 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", primaryLabel: "Use these components", primaryHref: "#components", primaryIcon: "icon-[lucide--blocks]", secondaryLabel: "Back to home", secondaryHref: "/", secondaryIcon: "icon-[lucide--house]", variant: "gradient", maxWidth: "full" }, { visual: visualPanel }),
+      compact("Centered signup CTA", "Use a focused centered CTA after pricing, guides, or product explanations.", { eyebrow: "Get started", title: "Create your first WRNexusJS page", description: "Install the framework and compose your application with the component system.", align: "center", primaryLabel: "Read installation", primaryHref: "/installation", secondaryLabel: "Browse examples", secondaryHref: "/blocks", variant: "solid", maxWidth: "xl" }),
+      advanced("Full-bleed service CTA", "Use an edge-to-edge surface for high-priority registration, service, or contact actions.", { eyebrow: "Citizen account", title: "Access services and track requests securely", description: "Create an account to submit, track, and manage citizen-service requests.", align: "left", 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.", fullBleed: true, variant: "solid", maxWidth: "full" }),
+    ],
+    options: {
+      align: ["left", "center", "right", "split"],
+      size: ["compact", "default", "large"],
+      visualPosition: ["left", "right"],
+      variant: ["default", "soft", "outline", "solid", "gradient", "minimal"],
+      maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"],
+    },
+  },
+
+  BackToTop: {
+    demos: [
+      standard("Floating round control", "Return visitors to the top of a long page after the scroll threshold is reached.", { alwaysVisible: true, position: "right", shape: "round", variant: "solid" }),
+      compact("Pill control with label", "Show a visible text label when the action needs extra clarity.", { alwaysVisible: true, showLabel: true, label: "Back to top", position: "right", shape: "pill", variant: "soft" }),
+      advanced("Progress-aware control", "Display page scroll progress around the floating control on long articles or directories.", { alwaysVisible: true, showProgress: true, position: "left", offset: "lg", shape: "round", variant: "outline" }),
+    ],
+    playground: { alwaysVisible: true },
+    options: {
+      position: ["left", "center", "right"],
+      offset: ["sm", "md", "lg"],
+      behavior: ["auto", "smooth"],
+      variant: ["solid", "soft", "outline", "ghost", "minimal"],
+      shape: ["round", "rounded", "pill"],
+      size: ["sm", "default", "lg"],
+    },
+  },
+
+  Footer: {
+    demos: [
+      standard("Four-column public footer", "Organize product, developer, resource, and company links into responsive columns.", { items: footerItems, columns: 4, maxWidth: "wide", copyright: "© 2026 WRNexusJS. All rights reserved." }),
+      compact("Compact application footer", "Use fewer columns and reduced spacing inside product applications.", { items: footerItems.slice(0, 3), columns: 3, size: "compact", maxWidth: "compact", copyright: "WRNexusJS component showcase" }),
+      advanced("Full-width footer with slots", "Compose pre-footer, post-footer, and legal content around structured navigation.", { items: footerItems, columns: 4, size: "spacious", maxWidth: "full", copyright: "Built with WRNexusJS" }, {
+        "pre-footer": "<div class=\"showcase-footer-banner\"><strong>Stay informed</strong><a href=\"#notifications\">Manage notifications</a></div>",
+        "copyright-right": "<div class=\"showcase-footer-legal\"><a href=\"#privacy\">Privacy</a><a href=\"#terms\">Terms</a></div>",
+      }),
+    ],
+    playground: { items: footerItems, columns: 4, maxWidth: "wide" },
+    options: {
+      columns: ["1", "2", "3", "4", "5"],
+      size: ["compact", "default", "spacious"],
+      maxWidth: ["compact", "wide", "xl", "full"],
+    },
+  },
+
+  ContextMenu: {
+    demos: [
+      standard("Right-click record actions", "Expose actions that apply to the selected record or canvas location.", { items: menuItems, title: "Record actions", description: "Right-click the target surface", trigger: "contextmenu", placement: "pointer" }, { trigger: "<div class=\"showcase-context-target\">Right-click for contextual actions</div>" }),
+      compact("Click-triggered compact menu", "Use a button-triggered context menu when discoverability matters.", { items: menuItems, title: "Quick actions", trigger: "click", size: "sm", minWidth: "12rem" }, { trigger: "<button type=\"button\" class=\"showcase-action\">Open quick actions</button>" }),
+      advanced("Pointer and keyboard menu", "Support right-click, click, and keyboard activation without forcing the menu open.", { items: menuItems, title: "Accessible actions", open: false, defaultOpen: false, trigger: "both", variant: "soft", placement: "bottom-start" }, { trigger: "<button type=\"button\" class=\"showcase-action\">Click, press Enter, or right-click</button>" }),
+    ],
+    playground: { items: menuItems, open: false, defaultOpen: false, trigger: "click" },
+    options: {
+      trigger: ["contextmenu", "click", "both", "manual"],
+      placement: ["pointer", "top-start", "top-end", "bottom-start", "bottom-end"],
+      align: ["start", "center", "end"],
+      size: ["sm", "default", "lg"],
+      variant: ["default", "raised", "soft", "outline"],
+    },
+  },
+
+  Dropdown: {
+    demos: [
+      standard("Action dropdown", "Group related actions behind one compact trigger.", { label: "Open actions", icon: "icon-[lucide--menu]", items: menuItems, placement: "bottom-start", width: "lg" }),
+      compact("Compact overflow menu", "Use an icon-led compact menu in tables, cards, and toolbars.", { label: "More actions", icon: "icon-[lucide--ellipsis]", items: menuItems, size: "sm", width: "sm", showChevron: false, variant: "soft" }),
+      advanced("Detailed action menu", "Open the menu from its trigger to preview placement, descriptions, shortcuts, danger states, and event output.", { label: "Review detailed menu", items: menuItems, open: false, defaultOpen: false, placement: "bottom-end", width: "xl", variant: "raised" }),
+    ],
+    playground: { items: menuItems, open: false, defaultOpen: false, label: "Open playground menu" },
+    options: {
+      placement: ["top-start", "top-end", "bottom-start", "bottom-end"],
+      width: ["sm", "md", "lg", "xl", "full"],
+      size: ["sm", "default", "lg"],
+      variant: ["default", "raised", "soft", "outline"],
+    },
+  },
+
+  Drawer: {
+    demos: [
+      standard("Right-side detail drawer", "Keep supporting record details or forms available without leaving the page.", { triggerLabel: "Open drawer", triggerIcon: "icon-[lucide--panel-right-open]", title: "Citizen service details", description: "Review supporting information without leaving the current page.", icon: "icon-[lucide--panel-right]", placement: "right", size: "md" }, { default: "<div class=\"showcase-overlay-content\"><p>Place forms, filters, navigation, or record details here.</p></div>", footer: "<button type=\"button\" class=\"showcase-action showcase-action--primary\">Save changes</button>" }),
+      compact("Bottom mobile drawer", "Use a bottom sheet for compact mobile workflows and contextual actions.", { triggerLabel: "Open mobile sheet", title: "Choose an action", placement: "bottom", size: "sm", variant: "soft" }, { default: "<div class=\"showcase-overlay-content\"><p>Mobile-friendly supporting actions.</p></div>" }),
+      advanced("Wide navigation drawer", "Open a wide, scrollable drawer with custom header and footer content from an explicit trigger.", { open: false, defaultOpen: false, triggerLabel: "Open navigation drawer", triggerIcon: "icon-[lucide--panel-left-open]", title: "Navigation and filters", description: "A wide drawer for complex supporting workflows.", placement: "left", size: "lg", scrollable: true }, { default: "<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>" }),
+    ],
+    playground: { open: false, defaultOpen: false, triggerLabel: "Open playground drawer", title: "Drawer playground" },
+    options: {
+      placement: ["left", "right", "top", "bottom"],
+      size: ["sm", "md", "lg", "xl", "full"],
+      variant: ["default", "soft", "outline", "solid"],
+    },
+  },
+
+  Modal: {
+    demos: [
+      standard("Confirmation modal", "Focus the user on one clear decision with confirm and cancel actions.", { triggerLabel: "Open modal", triggerIcon: "icon-[lucide--square-stack]", title: "Confirm service request", description: "Review the information before continuing.", icon: "icon-[lucide--shield-check]", confirmLabel: "Confirm request", confirmIcon: "icon-[lucide--check]", cancelLabel: "Go back", size: "md" }, { default: "<div class=\"showcase-overlay-content\"><p>This request will be submitted for review.</p></div>" }),
+      compact("Destructive confirmation", "Use a danger treatment for irreversible operations.", { triggerLabel: "Delete record", title: "Delete this record?", description: "This action cannot be undone.", confirmLabel: "Delete record", cancelLabel: "Keep record", destructive: true, size: "sm", variant: "outline" }),
+      advanced("Scrollable form modal", "Open a larger modal for focused forms while keeping actions visible.", { open: false, defaultOpen: false, triggerLabel: "Open request form", triggerIcon: "icon-[lucide--file-plus-2]", title: "Create service request", description: "Complete the required information.", confirmLabel: "Submit request", size: "lg", scrollable: true, variant: "soft" }, { default: "<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>" }),
+    ],
+    playground: { open: false, defaultOpen: false, triggerLabel: "Open playground modal", title: "Modal playground" },
+    options: {
+      size: ["sm", "md", "lg", "xl", "full"],
+      placement: ["center", "top"],
+      variant: ["default", "soft", "outline", "solid"],
+    },
+  },
+
+  Popover: {
+    demos: [
+      standard("Supporting information", "Attach contextual information and actions to a nearby trigger.", { 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]", actionLabel: "Open guide", actionHref: "#guide", width: "lg" }, { default: "<p>Popover content remains attached to its trigger and becomes mobile-friendly on small screens.</p>" }),
+      compact("Compact action popover", "Use a small popover for quick actions and concise explanations.", { triggerLabel: "Quick actions", triggerIcon: "icon-[lucide--zap]", title: "Quick actions", placement: "top", width: "sm", size: "sm", variant: "soft" }, { default: "<div class=\"showcase-inline-actions\"><button class=\"showcase-action\">Copy</button><button class=\"showcase-action\">Share</button></div>" }),
+      advanced("Rich status popover", "Open a wide panel with close control, arrow, custom content, and footer action.", { open: false, defaultOpen: false, triggerLabel: "Open rich panel", title: "Service status", description: "Current operational information.", placement: "bottom-end", width: "xl", showClose: true, actionLabel: "Open status page", actionHref: "#status", variant: "raised" }, { default: "<div class=\"showcase-status-panel\"><strong>All systems operational</strong><span>Last checked moments ago</span></div>" }),
+    ],
+    playground: { open: false, defaultOpen: false, triggerLabel: "Open playground popover", title: "Popover playground" },
+    options: {
+      placement: ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "right"],
+      width: ["sm", "md", "lg", "xl"],
+      size: ["sm", "default", "lg"],
+      variant: ["default", "raised", "soft", "outline"],
+    },
+  },
+
+  Tooltip: {
+    demos: [
+      standard("Hover and focus tooltip", "Explain an unfamiliar control without interrupting the workflow.", { id: "help-tooltip", title: "Helpful information", content: "Tooltips explain controls without interrupting the user.", placement: "top" }, { trigger: "<button type=\"button\" class=\"showcase-action\">Hover or focus</button>" }),
+      compact("Click tooltip", "Use click activation for touch-first or interactive help.", { id: "click-tooltip", content: "Click again or press Escape to close.", trigger: "click", placement: "bottom", size: "sm", variant: "soft" }, { trigger: "<button type=\"button\" class=\"showcase-action\">Click for help</button>" }),
+      advanced("Interactive rich tooltip", "Allow pointer interaction when the tooltip contains supporting links or controls.", { id: "interactive-tooltip", title: "Keyboard shortcut", description: "Open global search from anywhere.", content: "Press Ctrl or Command plus K.", trigger: "both", placement: "right", interactive: true, maxWidth: "22rem", variant: "dark" }, { trigger: "<button type=\"button\" class=\"showcase-action\">Show shortcut</button>" }),
+    ],
+    playground: { open: false, defaultOpen: false, trigger: "hover", content: "Hover or focus the trigger to inspect the tooltip." },
+    options: {
+      trigger: ["hover", "focus", "click", "both"],
+      placement: ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "right"],
+      size: ["sm", "default", "lg"],
+      variant: ["dark", "light", "soft", "solid"],
+    },
+  },
+
+  Container: {
+    demos: [
+      standard("Standard content container", "Keep page content aligned to a predictable readable width.", { maxWidth: "xl", size: "default" }, { default: "<div class=\"showcase-content-block\">Centered container content</div>" }),
+      compact("Compact reading container", "Use a smaller maximum width for forms, legal copy, and focused content.", { maxWidth: "compact", size: "compact" }, { default: "<div class=\"showcase-content-block\">Compact readable content</div>" }),
+      advanced("Full-width layout container", "Allow dashboards and data-heavy pages to use the available width.", { maxWidth: "full", size: "spacious" }, { default: "<div class=\"showcase-content-block\">Full-width dashboard content</div>" }),
+    ],
+    options: { maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"], size: ["compact", "default", "spacious"] },
+  },
+
+  Grid: {
+    demos: [
+      standard("Responsive three-column grid", "Arrange equal-width children with consistent gaps.", { columns: 3, gap: "md", maxWidth: "xl" }, { default: "<div class=\"showcase-grid-items\"><span>One</span><span>Two</span><span>Three</span></div>" }),
+      compact("Dense four-column grid", "Use smaller gaps for dashboards and compact overview pages.", { columns: 4, gap: "sm", maxWidth: "wide", size: "compact" }, { default: "<div class=\"showcase-grid-items\"><span>One</span><span>Two</span><span>Three</span><span>Four</span></div>" }),
+      advanced("Full-width two-column grid", "Use larger gaps for editorial or marketing split layouts.", { columns: 2, gap: "xl", maxWidth: "full", size: "spacious" }, { default: "<div class=\"showcase-grid-items\"><span>Primary</span><span>Secondary</span></div>" }),
+    ],
+    options: { columns: ["1", "2", "3", "4", "5", "6"], gap: ["none", "sm", "md", "lg", "xl"], maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"] },
+  },
+
+  Columns: {
+    demos: [
+      standard("Two-column content layout", "Split supporting content into balanced responsive columns.", { columns: 2, gap: "lg", maxWidth: "xl" }, { default: "<div class=\"showcase-grid-items\"><span>Content column</span><span>Supporting column</span></div>" }),
+      compact("Three compact columns", "Use three columns for short summaries and dashboard groups.", { columns: 3, gap: "sm", size: "compact", maxWidth: "wide" }, { default: "<div class=\"showcase-grid-items\"><span>One</span><span>Two</span><span>Three</span></div>" }),
+      advanced("Full-width four columns", "Use the full available width for structured application content.", { columns: 4, gap: "md", maxWidth: "full" }, { default: "<div class=\"showcase-grid-items\"><span>A</span><span>B</span><span>C</span><span>D</span></div>" }),
+    ],
+    options: { columns: ["1", "2", "3", "4", "5", "6"], gap: ["none", "sm", "md", "lg", "xl"], maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"] },
+  },
+
+  Card: {
+    demos: [
+      standard("Structured content card", "Group a title, description, content, and supporting actions.", { title: "Citizen service", description: "Access a trusted online service.", variant: "default" }, { default: "<p class=\"showcase-card-copy\">Supporting content belongs inside the default slot.</p>" }),
+      compact("Compact dashboard card", "Use reduced spacing for metrics, filters, and operational information.", { title: "Open requests", description: "Requests waiting for assignment.", size: "compact", variant: "soft" }, { default: "<strong class=\"showcase-card-value\">38</strong>" }),
+      advanced("Raised interactive card", "Use a stronger visual treatment for featured content.", { title: "Featured guide", description: "A complete guide to public safety and emergency readiness.", size: "spacious", variant: "raised" }, { default: "<a href=\"#guide\" class=\"showcase-action\">Read guide</a>" }),
+    ],
+    options: { size: ["compact", "default", "spacious"], variant: ["default", "soft", "raised", "outline", "minimal"] },
+  },
+
+  Link: {
+    demos: [
+      standard("Standard navigation link", "Use for routes within the current application.", { label: "Open components", href: "/base" }),
+      compact("External resource link", "Communicate external navigation and use safe target attributes.", { label: "WRNexusJS documentation", href: "https://wrnexusjs.dev", external: true, target: "_blank" }),
+      advanced("Large emphasized link", "Use a larger link in empty states, promotional cards, and resource lists.", { label: "Explore framework guides", href: "/framework-guides", size: "lg", color: "info" }),
+    ],
+    options: { size: ["sm", "default", "lg"], target: ["_self", "_blank", "_parent", "_top"] },
+  },
+
+  Image: {
+    demos: [
+      standard("Responsive content image", "Render a responsive image with meaningful alternative text.", { 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" }),
+      compact("Rounded thumbnail", "Use a rounded image in cards, directories, and compact summaries.", { 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, size: "sm" }),
+      advanced("Eager hero image", "Use explicit dimensions and eager loading for an above-the-fold visual.", { 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, size: "lg" }),
+    ],
+    options: { loading: ["lazy", "eager"], size: ["sm", "default", "lg"] },
+  },
+
+  SearchBox: {
+    demos: [
+      standard("Site search", "Give visitors a clear way to search pages, services, or resources.", { label: "Search documentation", name: "site-search", placeholder: "Search components and guides", type: "search" }),
+      compact("Compact directory search", "Use a compact field above tables, lists, and directories.", { label: "Search stations", name: "station-search", placeholder: "Name, district, or jurisdiction", size: "sm" }),
+      advanced("Required service lookup", "Use validation and required semantics in focused lookup flows.", { label: "Complaint reference", name: "complaint-reference", placeholder: "Enter reference number", required: true, size: "lg", color: "info" }),
+    ],
+    options: { size: ["sm", "default", "lg"], type: ["search", "text"] },
+  },
+
+  Map: {
+    demos: [
+      standard("Station directory map", "Present locations with supporting names, addresses, and actions.", { 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 }] }),
+      compact("Compact location preview", "Use a smaller map preview inside cards, drawers, and record details.", { title: "Service location", description: "Public service office", items: [{ title: "Public office", description: "City centre" }], size: "sm", variant: "soft" }),
+      advanced("Operations map", "Use a larger map surface for multiple markers and operational context.", { title: "Jurisdiction overview", description: "Stations, service areas, and public facilities.", items: [{ title: "Station A" }, { title: "Station B" }, { title: "Control room" }], size: "lg", variant: "raised", color: "info" }),
+    ],
+    options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline"] },
+  },
+
+  List: {
+    demos: [
+      standard("Linked resource list", "Present related links with supporting descriptions and icons.", { 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]" }] }),
+      compact("Compact status list", "Use a dense list in sidebars, dashboards, and record panels.", { title: "Current status", items: [{ label: "Application received", status: "Complete" }, { label: "Verification", status: "In progress" }, { label: "Decision", status: "Pending" }], size: "sm", variant: "soft" }),
+      advanced("Rich action list", "Combine descriptions, icons, statuses, and actions in a structured collection.", { 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" }], size: "lg", variant: "raised" }),
+    ],
+    options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline"] },
+  },
+
+  Marquee: {
+    demos: [
+      standard("Partner and capability strip", "Continuously present short labels, partners, channels, or capabilities.", { title: "Supported capabilities", items: [{ label: "SSR" }, { label: "CSR" }, { label: "Themes" }, { label: "Accessibility" }, { label: "Responsive UI" }], variant: "default" }),
+      compact("Compact announcement ticker", "Use a dense ticker for short operational updates.", { items: [{ label: "All services operational" }, { label: "New components published" }, { label: "Documentation updated" }], size: "sm", variant: "soft" }),
+      advanced("Large visual marquee", "Use stronger spacing and richer items on marketing pages.", { title: "Built for complete digital platforms", items: [{ label: "Public portals", icon: "icon-[lucide--landmark]" }, { label: "Enterprise systems", icon: "icon-[lucide--building-2]" }, { label: "Developer tools", icon: "icon-[lucide--code-2]" }], size: "lg", variant: "raised", color: "info" }),
+    ],
+    options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline"] },
+  },
+
+  Tabs: {
+    demos: [
+      standard("Horizontal content tabs", "Switch between related content panels without navigating away.", { label: "Service information", items: [{ label: "Overview", value: "overview", content: "Overview content" }, { label: "Requirements", value: "requirements", content: "Requirements content" }, { label: "Process", value: "process", content: "Process content" }], active: "overview", orientation: "horizontal" }),
+      compact("Compact application tabs", "Use smaller tabs in dashboards, panels, and dense product interfaces.", { label: "Record views", items: [{ label: "Details", value: "details" }, { label: "History", value: "history" }, { label: "Files", value: "files" }], active: "details", size: "sm" }),
+      advanced("Vertical settings tabs", "Use vertical tabs for settings, configuration, and long-form navigation.", { label: "Settings", items: [{ label: "Profile", value: "profile", icon: "icon-[lucide--user]" }, { label: "Security", value: "security", icon: "icon-[lucide--shield]" }, { label: "Notifications", value: "notifications", icon: "icon-[lucide--bell]" }], active: "security", orientation: "vertical", size: "lg" }),
+    ],
+    options: { orientation: ["horizontal", "vertical"], size: ["sm", "default", "lg"] },
+  },
+
+  Timeline: {
+    demos: [
+      standard("Application timeline", "Explain the sequence and current status of a request or process.", { 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: "—" }] }),
+      compact("Compact activity history", "Use a dense history inside drawers, side panels, and record views.", { title: "Recent activity", items: [{ title: "Status changed", time: "Today" }, { title: "Comment added", time: "Yesterday" }, { title: "Document uploaded", time: "3 days ago" }], size: "sm", variant: "soft" }),
+      advanced("Rich milestone timeline", "Use icons, descriptions, times, and states for longer workflows.", { title: "Implementation milestones", description: "Planned delivery sequence.", items: [{ title: "Foundation", description: "Tokens, themes, and primitives", icon: "icon-[lucide--layers-3]", status: "complete" }, { title: "Components", description: "Reusable UI and documentation", icon: "icon-[lucide--blocks]", current: true }, { title: "Applications", description: "Compose production interfaces", icon: "icon-[lucide--rocket]" }], size: "lg", variant: "raised" }),
+    ],
+    options: { size: ["sm", "default", "lg"], variant: ["default", "soft", "raised", "outline"] },
+  },
+
+  Typography: {
+    demos: [
+      standard("Readable content typography", "Apply consistent typography to headings, paragraphs, lists, and inline content.", { maxWidth: "xl", size: "default" }, { default: "<div class=\"showcase-typography\"><h2>Readable page content</h2><p>Typography creates consistent hierarchy and comfortable reading rhythm.</p><ul><li>Clear headings</li><li>Readable paragraphs</li><li>Consistent lists</li></ul></div>" }),
+      compact("Compact documentation typography", "Use reduced spacing in reference pages and dense product help.", { maxWidth: "compact", size: "compact" }, { default: "<div class=\"showcase-typography\"><h3>Compact reference</h3><p>Focused content with reduced spacing.</p></div>" }),
+      advanced("Wide editorial typography", "Use wider content and multiple columns for editorial or policy content.", { maxWidth: "wide", columns: 2, gap: "xl", size: "spacious" }, { default: "<div class=\"showcase-typography\"><h2>Long-form public information</h2><p>Structured editorial content can use a wider two-column layout on large screens.</p><p>Responsive behavior returns content to one column on smaller screens.</p></div>" }),
+    ],
+    options: { columns: ["1", "2", "3"], gap: ["sm", "md", "lg", "xl"], maxWidth: ["compact", "lg", "xl", "wide", "2xl", "full"], size: ["compact", "default", "spacious"] },
+  },
+
+  Divider: {
+    demos: [
+      standard("Horizontal section divider", "Separate related content without introducing another container.", { orientation: "horizontal", label: "Related information" }),
+      compact("Minimal unlabeled divider", "Use a quiet rule between compact content groups.", { orientation: "horizontal", label: "", size: "sm" }),
+      advanced("Vertical toolbar divider", "Separate groups of inline actions in toolbars and navigation.", { orientation: "vertical", label: "Actions", size: "lg", color: "info" }),
+    ],
+    options: { orientation: ["horizontal", "vertical"], size: ["sm", "default", "lg"] },
+  },
+};
+
+const genericEventDescriptions = {
+  action: "Fires when the component's primary or item action is activated.",
+  blur: "Fires when focus leaves the interactive control.",
+  cancel: "Fires when the user cancels or dismisses the current workflow.",
+  change: "Fires when the component's committed value or selection changes.",
+  clear: "Fires after the current value or selection is cleared.",
+  click: "Fires when the interactive surface is activated.",
+  close: "Fires after the component closes.",
+  confirm: "Fires when the user confirms the current action.",
+  dismiss: "Fires after the announcement or feedback surface is dismissed.",
+  error: "Fires when the component cannot complete an operation.",
+  focus: "Fires when the interactive control receives focus.",
+  input: "Fires as the editable value changes.",
+  load: "Fires after remote or deferred content loads successfully.",
+  open: "Fires after the component opens.",
+  paste: "Fires after clipboard content is processed.",
+  search: "Fires when the current search query changes.",
+  select: "Fires when an item, option, card, or result is selected.",
+  strength: "Fires when the calculated password-strength state changes.",
+  toggle: "Fires when the component changes between open and closed or on and off states.",
+};
+
+export function profileFor(name) {
+  return componentProfiles[name] ?? null;
+}
+
+export function eventDescriptionFor(_componentName, eventName) {
+  return genericEventDescriptions[eventName] ?? `Fires when the component emits the ${eventName} event.`;
+}
diff --git a/examples/component-showcase/showcase-manifest.json b/examples/component-showcase/showcase-manifest.json
new file mode 100644
index 00000000..592fc16e
--- /dev/null
+++ b/examples/component-showcase/showcase-manifest.json
@@ -0,0 +1,1846 @@
+{
+  "generatedFrom": "packages/ui/component-reference.json",
+  "componentCount": 108,
+  "categoryCount": 11,
+  "totalDemoCount": 417,
+  "components": [
+    {
+      "name": "Accordion",
+      "mount": "Accordion",
+      "slug": "accordion",
+      "category": "base",
+      "purpose": "Theme-aware, responsive accordion component.",
+      "demoCount": 3,
+      "propCount": 17,
+      "slots": [],
+      "events": [
+        "change",
+        "open",
+        "close"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "AdvancedDatePicker",
+      "mount": "AdvancedDatePicker",
+      "slug": "advanced-date-picker",
+      "category": "integrations",
+      "purpose": "Theme-aware, responsive advanced date picker component.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "input",
+        "change",
+        "open",
+        "close",
+        "clear"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "AdvancedRangeSlider",
+      "mount": "AdvancedRangeSlider",
+      "slug": "advanced-range-slider",
+      "category": "integrations",
+      "purpose": "Theme-aware, responsive advanced range slider component.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "input",
+        "change",
+        "start",
+        "end"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "AdvancedSelect",
+      "mount": "AdvancedSelect",
+      "slug": "advanced-select",
+      "category": "advanced-forms",
+      "purpose": "Theme-aware, responsive advanced select component.",
+      "demoCount": 41,
+      "propCount": 51,
+      "slots": [],
+      "events": [
+        "search",
+        "select",
+        "change",
+        "clear",
+        "open",
+        "close",
+        "load",
+        "error"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Alert",
+      "mount": "Alert",
+      "slug": "alert",
+      "category": "base",
+      "purpose": "Theme-aware, responsive alert component.",
+      "demoCount": 3,
+      "propCount": 21,
+      "slots": [],
+      "events": [
+        "dismiss",
+        "action"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "AnnouncementBar",
+      "mount": "AnnouncementBar",
+      "slug": "announcement-bar",
+      "category": "marketing",
+      "purpose": "Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.",
+      "demoCount": 3,
+      "propCount": 19,
+      "slots": [],
+      "events": [
+        "dismiss"
+      ],
+      "profiled": true
+    },
+    {
+      "name": "AuthForm",
+      "mount": "AuthForm",
+      "slug": "auth-form",
+      "category": "core",
+      "purpose": "Reusable auth form component.",
+      "demoCount": 3,
+      "propCount": 13,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "submit",
+        "change",
+        "input",
+        "focus",
+        "blur"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "AuthSplitLayout",
+      "mount": "AuthSplitLayout",
+      "slug": "auth-split-layout",
+      "category": "core",
+      "purpose": "Reusable auth split layout component.",
+      "demoCount": 3,
+      "propCount": 8,
+      "slots": [
+        "aside-extra",
+        "form"
+      ],
+      "events": [],
+      "profiled": false
+    },
+    {
+      "name": "Avatar",
+      "mount": "Avatar",
+      "slug": "avatar",
+      "category": "base",
+      "purpose": "Theme-aware, responsive avatar component.",
+      "demoCount": 3,
+      "propCount": 18,
+      "slots": [],
+      "events": [
+        "load",
+        "error",
+        "click"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "AvatarGroup",
+      "mount": "AvatarGroup",
+      "slug": "avatar-group",
+      "category": "base",
+      "purpose": "Theme-aware, responsive avatar group component.",
+      "demoCount": 3,
+      "propCount": 12,
+      "slots": [],
+      "events": [
+        "overflow"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "BackToTop",
+      "mount": "BackToTop",
+      "slug": "back-to-top",
+      "category": "navigation",
+      "purpose": "Provide a responsive floating control that returns long pages to the top and can show scroll progress.",
+      "demoCount": 3,
+      "propCount": 15,
+      "slots": [],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "Badge",
+      "mount": "Badge",
+      "slug": "badge",
+      "category": "base",
+      "purpose": "Theme-aware, responsive badge component.",
+      "demoCount": 3,
+      "propCount": 22,
+      "slots": [],
+      "events": [
+        "dismiss"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Blockquote",
+      "mount": "Blockquote",
+      "slug": "blockquote",
+      "category": "base",
+      "purpose": "Theme-aware, responsive blockquote component.",
+      "demoCount": 3,
+      "propCount": 13,
+      "slots": [
+        "default"
+      ],
+      "events": [],
+      "profiled": false
+    },
+    {
+      "name": "Breadcrumb",
+      "mount": "Breadcrumb",
+      "slug": "breadcrumb",
+      "category": "navigation",
+      "purpose": "Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events.",
+      "demoCount": 3,
+      "propCount": 12,
+      "slots": [],
+      "events": [
+        "select"
+      ],
+      "profiled": true
+    },
+    {
+      "name": "Button",
+      "mount": "Button",
+      "slug": "button",
+      "category": "base",
+      "purpose": "Theme-aware, responsive button component.",
+      "demoCount": 8,
+      "propCount": 25,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "click",
+        "focus",
+        "blur"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "ButtonGroup",
+      "mount": "ButtonGroup",
+      "slug": "button-group",
+      "category": "base",
+      "purpose": "Theme-aware, responsive button group component.",
+      "demoCount": 3,
+      "propCount": 13,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "click",
+        "select",
+        "change"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Card",
+      "mount": "Card",
+      "slug": "card",
+      "category": "base",
+      "purpose": "Group related content in a responsive themed surface with title, description, content, and supporting slots.",
+      "demoCount": 3,
+      "propCount": 31,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "click",
+        "action",
+        "navigate",
+        "dismiss",
+        "load",
+        "error"
+      ],
+      "profiled": true
+    },
+    {
+      "name": "Carousel",
+      "mount": "Carousel",
+      "slug": "carousel",
+      "category": "base",
+      "purpose": "Theme-aware, responsive carousel component.",
+      "demoCount": 3,
+      "propCount": 22,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "initialize",
+        "change",
+        "previous",
+        "next",
+        "play",
+        "pause",
+        "reachStart",
+        "reachEnd",
+        "dragStart",
+        "dragEnd"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Chart",
+      "mount": "Chart",
+      "slug": "chart",
+      "category": "integrations",
+      "purpose": "Theme-aware, responsive chart component.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "select",
+        "dataPointClick",
+        "legendToggle"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "ChatBubble",
+      "mount": "ChatBubble",
+      "slug": "chat-bubble",
+      "category": "base",
+      "purpose": "Theme-aware, responsive chat bubble component.",
+      "demoCount": 3,
+      "propCount": 11,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "action",
+        "messageClick",
+        "avatarClick",
+        "linkClick"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Checkbox",
+      "mount": "Checkbox",
+      "slug": "checkbox",
+      "category": "forms",
+      "purpose": "Theme-aware, responsive checkbox component.",
+      "demoCount": 3,
+      "propCount": 27,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "input",
+        "change",
+        "focus",
+        "blur",
+        "invalid"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Clipboard",
+      "mount": "Clipboard",
+      "slug": "clipboard",
+      "category": "integrations",
+      "purpose": "Theme-aware, responsive clipboard component.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "copy",
+        "success",
+        "error"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Collapse",
+      "mount": "Collapse",
+      "slug": "collapse",
+      "category": "base",
+      "purpose": "Theme-aware, responsive collapse component.",
+      "demoCount": 3,
+      "propCount": 8,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "toggle",
+        "open",
+        "close"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "ColorPicker",
+      "mount": "ColorPicker",
+      "slug": "color-picker",
+      "category": "forms",
+      "purpose": "Theme-aware, responsive color picker component.",
+      "demoCount": 3,
+      "propCount": 19,
+      "slots": [],
+      "events": [
+        "input",
+        "change",
+        "focus",
+        "blur"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Columns",
+      "mount": "Columns",
+      "slug": "columns",
+      "category": "layout",
+      "purpose": "Create responsive balanced content columns with configurable count, gap, density, and maximum width.",
+      "demoCount": 3,
+      "propCount": 6,
+      "slots": [
+        "default"
+      ],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "ComboBox",
+      "mount": "ComboBox",
+      "slug": "combo-box",
+      "category": "advanced-forms",
+      "purpose": "Editable autocomplete combobox with local and remote suggestions.",
+      "demoCount": 21,
+      "propCount": 41,
+      "slots": [],
+      "events": [
+        "search",
+        "select",
+        "change",
+        "clear",
+        "open",
+        "close",
+        "load",
+        "error"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Confetti",
+      "mount": "Confetti",
+      "slug": "confetti",
+      "category": "integrations",
+      "purpose": "Theme-aware, responsive confetti component.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "start",
+        "complete"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Container",
+      "mount": "Container",
+      "slug": "container",
+      "category": "layout",
+      "purpose": "Constrain and align page content with responsive gutters and compact, wide, or full width options.",
+      "demoCount": 3,
+      "propCount": 6,
+      "slots": [
+        "default"
+      ],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "ContextMenu",
+      "mount": "ContextMenu",
+      "slug": "context-menu",
+      "category": "overlays",
+      "purpose": "Open an accessible keyboard-aware action menu from pointer or keyboard context interactions.",
+      "demoCount": 3,
+      "propCount": 18,
+      "slots": [
+        "trigger",
+        "header",
+        "default",
+        "footer"
+      ],
+      "events": [
+        "open",
+        "close",
+        "select",
+        "action"
+      ],
+      "profiled": true
+    },
+    {
+      "name": "CopyMarkup",
+      "mount": "CopyMarkup",
+      "slug": "copy-markup",
+      "category": "advanced-forms",
+      "purpose": "Theme-aware, responsive copy markup component.",
+      "demoCount": 3,
+      "propCount": 13,
+      "slots": [],
+      "events": [
+        "copy",
+        "success",
+        "error"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "CTASection",
+      "mount": "CTASection",
+      "slug": "ctasection",
+      "category": "marketing",
+      "purpose": "Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.",
+      "demoCount": 3,
+      "propCount": 25,
+      "slots": [
+        "default",
+        "actions",
+        "visual",
+        "footer"
+      ],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "CustomScrollbar",
+      "mount": "CustomScrollbar",
+      "slug": "custom-scrollbar",
+      "category": "layout",
+      "purpose": "Theme-aware, responsive custom scrollbar component.",
+      "demoCount": 3,
+      "propCount": 6,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "scroll"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "DataMap",
+      "mount": "DataMap",
+      "slug": "data-map",
+      "category": "integrations",
+      "purpose": "Theme-aware, responsive data map component.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "select",
+        "change"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "DataTable",
+      "mount": "DataTable",
+      "slug": "data-table",
+      "category": "integrations",
+      "purpose": "Theme-aware, responsive data table component.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "sort",
+        "select",
+        "change",
+        "rowClick",
+        "pageChange"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "DatePicker",
+      "mount": "DatePicker",
+      "slug": "date-picker",
+      "category": "base",
+      "purpose": "Theme-aware, responsive date picker component.",
+      "demoCount": 3,
+      "propCount": 25,
+      "slots": [],
+      "events": [
+        "input",
+        "change",
+        "open",
+        "close",
+        "focus",
+        "blur",
+        "invalid"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "DeviceFrame",
+      "mount": "DeviceFrame",
+      "slug": "device-frame",
+      "category": "base",
+      "purpose": "Theme-aware, responsive device frame component.",
+      "demoCount": 3,
+      "propCount": 14,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "change",
+        "rotate"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Divider",
+      "mount": "Divider",
+      "slug": "divider",
+      "category": "layout",
+      "purpose": "Separate related horizontal or vertical content with optional labels, sizes, and semantic colors.",
+      "demoCount": 3,
+      "propCount": 5,
+      "slots": [],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "DragAndDrop",
+      "mount": "DragAndDrop",
+      "slug": "drag-and-drop",
+      "category": "integrations",
+      "purpose": "Theme-aware, responsive drag and drop component.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "dragStart",
+        "dragEnd",
+        "dragEnter",
+        "dragLeave",
+        "drop",
+        "change"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Drawer",
+      "mount": "Drawer",
+      "slug": "drawer",
+      "category": "overlays",
+      "purpose": "Present responsive modal side or bottom content with focus management, backdrop behavior, slots, and close events.",
+      "demoCount": 3,
+      "propCount": 19,
+      "slots": [
+        "trigger",
+        "header",
+        "default",
+        "footer"
+      ],
+      "events": [
+        "open",
+        "close",
+        "cancel"
+      ],
+      "profiled": true
+    },
+    {
+      "name": "Dropdown",
+      "mount": "Dropdown",
+      "slug": "dropdown",
+      "category": "overlays",
+      "purpose": "Open an accessible anchored menu with keyboard navigation, item selection, actions, and responsive placement.",
+      "demoCount": 3,
+      "propCount": 17,
+      "slots": [
+        "trigger",
+        "header",
+        "default",
+        "footer"
+      ],
+      "events": [
+        "toggle",
+        "open",
+        "close",
+        "select",
+        "action"
+      ],
+      "profiled": true
+    },
+    {
+      "name": "FeatureCard",
+      "mount": "FeatureCard",
+      "slug": "feature-card",
+      "category": "marketing",
+      "purpose": "Present one linked feature or service with media, icon, badge, description, and action.",
+      "demoCount": 3,
+      "propCount": 28,
+      "slots": [
+        "media",
+        "icon",
+        "default",
+        "footer"
+      ],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "FeatureGrid",
+      "mount": "FeatureGrid",
+      "slug": "feature-grid",
+      "category": "layout",
+      "purpose": "Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.",
+      "demoCount": 3,
+      "propCount": 12,
+      "slots": [
+        "default"
+      ],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "FeatureIconCard",
+      "mount": "FeatureIconCard",
+      "slug": "feature-icon-card",
+      "category": "marketing",
+      "purpose": "Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.",
+      "demoCount": 3,
+      "propCount": 14,
+      "slots": [
+        "default",
+        "footer"
+      ],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "FileInput",
+      "mount": "FileInput",
+      "slug": "file-input",
+      "category": "forms",
+      "purpose": "Theme-aware, responsive file input component.",
+      "demoCount": 3,
+      "propCount": 21,
+      "slots": [],
+      "events": [
+        "input",
+        "change",
+        "focus",
+        "blur",
+        "select",
+        "clear",
+        "invalid"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "FileUpload",
+      "mount": "FileUpload",
+      "slug": "file-upload",
+      "category": "integrations",
+      "purpose": "Theme-aware, responsive file upload component.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "select",
+        "upload",
+        "progress",
+        "success",
+        "error",
+        "cancel",
+        "remove"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "FileUploadProgress",
+      "mount": "FileUploadProgress",
+      "slug": "file-upload-progress",
+      "category": "base",
+      "purpose": "Theme-aware, responsive file upload progress component.",
+      "demoCount": 3,
+      "propCount": 13,
+      "slots": [],
+      "events": [
+        "cancel",
+        "retry",
+        "complete"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Footer",
+      "mount": "Footer",
+      "slug": "footer",
+      "category": "layout",
+      "purpose": "Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.",
+      "demoCount": 3,
+      "propCount": 8,
+      "slots": [
+        "pre-footer",
+        "post-footer",
+        "copyright-left",
+        "copyright-right"
+      ],
+      "events": [
+        "select",
+        "action"
+      ],
+      "profiled": true
+    },
+    {
+      "name": "Grid",
+      "mount": "Grid",
+      "slug": "grid",
+      "category": "layout",
+      "purpose": "Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width.",
+      "demoCount": 3,
+      "propCount": 6,
+      "slots": [
+        "default"
+      ],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "Hero",
+      "mount": "Hero",
+      "slug": "hero",
+      "category": "marketing",
+      "purpose": "Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel.",
+      "demoCount": 3,
+      "propCount": 38,
+      "slots": [
+        "eyebrow",
+        "actions",
+        "trust",
+        "default",
+        "visual",
+        "footer"
+      ],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "HeroActions",
+      "mount": "HeroActions",
+      "slug": "hero-actions",
+      "category": "marketing",
+      "purpose": "Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.",
+      "demoCount": 3,
+      "propCount": 8,
+      "slots": [
+        "default"
+      ],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "Image",
+      "mount": "Image",
+      "slug": "image",
+      "category": "layout",
+      "purpose": "Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment.",
+      "demoCount": 3,
+      "propCount": 9,
+      "slots": [
+        "default"
+      ],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "Input",
+      "mount": "Input",
+      "slug": "input",
+      "category": "forms",
+      "purpose": "Theme-aware, responsive input component.",
+      "demoCount": 3,
+      "propCount": 28,
+      "slots": [],
+      "events": [
+        "input",
+        "change",
+        "focus",
+        "blur",
+        "invalid",
+        "keydown",
+        "keyup"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "InputGroup",
+      "mount": "InputGroup",
+      "slug": "input-group",
+      "category": "forms",
+      "purpose": "Theme-aware, responsive input group component.",
+      "demoCount": 3,
+      "propCount": 23,
+      "slots": [],
+      "events": [
+        "input",
+        "change",
+        "focus",
+        "blur",
+        "submit",
+        "action"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "InputNumber",
+      "mount": "InputNumber",
+      "slug": "input-number",
+      "category": "advanced-forms",
+      "purpose": "Theme-aware, responsive input number component.",
+      "demoCount": 12,
+      "propCount": 40,
+      "slots": [],
+      "events": [
+        "input",
+        "change",
+        "increment",
+        "decrement"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Kbd",
+      "mount": "Kbd",
+      "slug": "kbd",
+      "category": "layout",
+      "purpose": "Theme-aware, responsive kbd component.",
+      "demoCount": 3,
+      "propCount": 4,
+      "slots": [
+        "default"
+      ],
+      "events": [],
+      "profiled": false
+    },
+    {
+      "name": "LayoutSplitter",
+      "mount": "LayoutSplitter",
+      "slug": "layout-splitter",
+      "category": "layout",
+      "purpose": "Theme-aware, responsive layout splitter component.",
+      "demoCount": 3,
+      "propCount": 6,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "resizeStart",
+        "resize",
+        "resizeEnd"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "LegendIndicator",
+      "mount": "LegendIndicator",
+      "slug": "legend-indicator",
+      "category": "base",
+      "purpose": "Theme-aware, responsive legend indicator component.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "toggle",
+        "select"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Link",
+      "mount": "Link",
+      "slug": "link",
+      "category": "layout",
+      "purpose": "Render an accessible internal or external link with target, relation, size, color, and public focus or click events.",
+      "demoCount": 3,
+      "propCount": 8,
+      "slots": [
+        "default"
+      ],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "List",
+      "mount": "List",
+      "slug": "list",
+      "category": "base",
+      "purpose": "Present structured responsive linked or status items with icons, descriptions, actions, and selection events.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "ListGroup",
+      "mount": "ListGroup",
+      "slug": "list-group",
+      "category": "base",
+      "purpose": "Theme-aware, responsive list group component.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "select",
+        "change"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Map",
+      "mount": "Map",
+      "slug": "map",
+      "category": "integrations",
+      "purpose": "Present responsive location information and markers with map-ready metadata and movement or marker events.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "MarketingSectionHeader",
+      "mount": "MarketingSectionHeader",
+      "slug": "marketing-section-header",
+      "category": "marketing",
+      "purpose": "Introduce marketing content with an eyebrow, title, description, and optional linked action.",
+      "demoCount": 3,
+      "propCount": 12,
+      "slots": [
+        "icon",
+        "actions",
+        "default"
+      ],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "Marquee",
+      "mount": "Marquee",
+      "slug": "marquee",
+      "category": "base",
+      "purpose": "Continuously present responsive labels, partners, notices, or capabilities with pause and resume behavior.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "MegaMenu",
+      "mount": "MegaMenu",
+      "slug": "mega-menu",
+      "category": "navigation",
+      "purpose": "Theme-aware, responsive mega menu component.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "open",
+        "close",
+        "select"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "MetricCard",
+      "mount": "MetricCard",
+      "slug": "metric-card",
+      "category": "data",
+      "purpose": "Display one operational metric with value, suffix, description, icon, trend, progress, and optional action.",
+      "demoCount": 3,
+      "propCount": 28,
+      "slots": [
+        "default",
+        "footer"
+      ],
+      "events": [
+        "select",
+        "action"
+      ],
+      "profiled": true
+    },
+    {
+      "name": "MetricGrid",
+      "mount": "MetricGrid",
+      "slug": "metric-grid",
+      "category": "data",
+      "purpose": "Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.",
+      "demoCount": 3,
+      "propCount": 13,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "select",
+        "action"
+      ],
+      "profiled": true
+    },
+    {
+      "name": "Modal",
+      "mount": "Modal",
+      "slug": "modal",
+      "category": "overlays",
+      "purpose": "Present an accessible modal dialog with focus management, confirmation, cancellation, slots, and responsive sizing.",
+      "demoCount": 3,
+      "propCount": 28,
+      "slots": [
+        "trigger",
+        "header",
+        "default",
+        "footer"
+      ],
+      "events": [
+        "open",
+        "close",
+        "cancel",
+        "confirm"
+      ],
+      "profiled": true
+    },
+    {
+      "name": "Nav",
+      "mount": "Nav",
+      "slug": "nav",
+      "category": "navigation",
+      "purpose": "Theme-aware, responsive nav component.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "select",
+        "change"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Navbar",
+      "mount": "Navbar",
+      "slug": "navbar",
+      "category": "navigation",
+      "purpose": "Theme-aware, responsive navbar component.",
+      "demoCount": 3,
+      "propCount": 13,
+      "slots": [
+        "topbar",
+        "actions"
+      ],
+      "events": [
+        "toggle",
+        "open",
+        "close",
+        "select",
+        "action"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "PageHeader",
+      "mount": "PageHeader",
+      "slug": "page-header",
+      "category": "marketing",
+      "purpose": "Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.",
+      "demoCount": 3,
+      "propCount": 25,
+      "slots": [
+        "meta",
+        "actions",
+        "default"
+      ],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "Pagination",
+      "mount": "Pagination",
+      "slug": "pagination",
+      "category": "navigation",
+      "purpose": "Theme-aware, responsive pagination component.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "change",
+        "previous",
+        "next"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "PinInput",
+      "mount": "PinInput",
+      "slug": "pin-input",
+      "category": "advanced-forms",
+      "purpose": "Secure multi-cell PIN and verification-code input with regex and paste support.",
+      "demoCount": 16,
+      "propCount": 26,
+      "slots": [],
+      "events": [
+        "input",
+        "change",
+        "complete",
+        "paste",
+        "clear",
+        "error"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Popover",
+      "mount": "Popover",
+      "slug": "popover",
+      "category": "overlays",
+      "purpose": "Display anchored supporting content with configurable trigger, placement, responsive sizing, and open or close events.",
+      "demoCount": 3,
+      "propCount": 23,
+      "slots": [
+        "trigger",
+        "header",
+        "default",
+        "footer"
+      ],
+      "events": [
+        "toggle",
+        "open",
+        "close",
+        "action"
+      ],
+      "profiled": true
+    },
+    {
+      "name": "PortalDashboard",
+      "mount": "PortalDashboard",
+      "slug": "portal-dashboard",
+      "category": "core",
+      "purpose": "Reusable portal dashboard component.",
+      "demoCount": 3,
+      "propCount": 14,
+      "slots": [
+        "hero-action"
+      ],
+      "events": [
+        "action",
+        "navigate"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "PreferenceSwitcher",
+      "mount": "PreferenceSwitcher",
+      "slug": "preference-switcher",
+      "category": "core",
+      "purpose": "Reusable preference switcher component.",
+      "demoCount": 3,
+      "propCount": 9,
+      "slots": [],
+      "events": [
+        "theme",
+        "color",
+        "language"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Progress",
+      "mount": "Progress",
+      "slug": "progress",
+      "category": "base",
+      "purpose": "Theme-aware, responsive progress component.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [],
+      "events": [],
+      "profiled": false
+    },
+    {
+      "name": "PublicPageShell",
+      "mount": "PublicPageShell",
+      "slug": "public-page-shell",
+      "category": "layout",
+      "purpose": "Provide the outer responsive structure, width, background, slots, overflow, and minimum-height behavior for public pages.",
+      "demoCount": 3,
+      "propCount": 10,
+      "slots": [
+        "before",
+        "default",
+        "after"
+      ],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "Radio",
+      "mount": "Radio",
+      "slug": "radio",
+      "category": "forms",
+      "purpose": "Theme-aware, responsive radio component.",
+      "demoCount": 3,
+      "propCount": 25,
+      "slots": [],
+      "events": [
+        "input",
+        "change",
+        "focus",
+        "blur",
+        "invalid"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "RangeSlider",
+      "mount": "RangeSlider",
+      "slug": "range-slider",
+      "category": "forms",
+      "purpose": "Theme-aware, responsive range slider component.",
+      "demoCount": 3,
+      "propCount": 26,
+      "slots": [],
+      "events": [
+        "input",
+        "change",
+        "focus",
+        "blur"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Rating",
+      "mount": "Rating",
+      "slug": "rating",
+      "category": "base",
+      "purpose": "Theme-aware, responsive rating component.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "input",
+        "change"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Scrollspy",
+      "mount": "Scrollspy",
+      "slug": "scrollspy",
+      "category": "navigation",
+      "purpose": "Theme-aware, responsive scrollspy component.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "change"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "SearchBox",
+      "mount": "SearchBox",
+      "slug": "search-box",
+      "category": "forms",
+      "purpose": "Provide an accessible responsive search field with labels, validation states, sizes, and input or change events.",
+      "demoCount": 3,
+      "propCount": 13,
+      "slots": [],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "Section",
+      "mount": "Section",
+      "slug": "section",
+      "category": "layout",
+      "purpose": "Create a responsive themed page section with controlled spacing, width, borders, and surface treatment.",
+      "demoCount": 3,
+      "propCount": 10,
+      "slots": [
+        "default"
+      ],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "SectionHeader",
+      "mount": "SectionHeader",
+      "slug": "section-header",
+      "category": "layout",
+      "purpose": "Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.",
+      "demoCount": 3,
+      "propCount": 10,
+      "slots": [
+        "icon",
+        "default",
+        "actions"
+      ],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "Select",
+      "mount": "Select",
+      "slug": "select",
+      "category": "forms",
+      "purpose": "Theme-aware, responsive select component.",
+      "demoCount": 3,
+      "propCount": 22,
+      "slots": [],
+      "events": [
+        "input",
+        "change",
+        "focus",
+        "blur",
+        "open",
+        "close",
+        "invalid"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Sidebar",
+      "mount": "Sidebar",
+      "slug": "sidebar",
+      "category": "navigation",
+      "purpose": "Theme-aware, responsive sidebar component.",
+      "demoCount": 3,
+      "propCount": 8,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "toggle",
+        "open",
+        "close",
+        "select"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Skeleton",
+      "mount": "Skeleton",
+      "slug": "skeleton",
+      "category": "base",
+      "purpose": "Theme-aware, responsive skeleton component.",
+      "demoCount": 3,
+      "propCount": 5,
+      "slots": [],
+      "events": [],
+      "profiled": false
+    },
+    {
+      "name": "Spinner",
+      "mount": "Spinner",
+      "slug": "spinner",
+      "category": "base",
+      "purpose": "Theme-aware, responsive spinner component.",
+      "demoCount": 3,
+      "propCount": 5,
+      "slots": [],
+      "events": [],
+      "profiled": false
+    },
+    {
+      "name": "SplitHero",
+      "mount": "SplitHero",
+      "slug": "split-hero",
+      "category": "marketing",
+      "purpose": "Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel.",
+      "demoCount": 3,
+      "propCount": 31,
+      "slots": [
+        "default",
+        "actions",
+        "trust",
+        "visual"
+      ],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "StatsBar",
+      "mount": "StatsBar",
+      "slug": "stats-bar",
+      "category": "data",
+      "purpose": "Present a compact responsive strip of key facts, counts, performance indicators, or trust signals.",
+      "demoCount": 3,
+      "propCount": 10,
+      "slots": [],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "Stepper",
+      "mount": "Stepper",
+      "slug": "stepper",
+      "category": "navigation",
+      "purpose": "Theme-aware, responsive stepper component.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "change",
+        "previous",
+        "next",
+        "complete"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "StrongPassword",
+      "mount": "StrongPassword",
+      "slug": "strong-password",
+      "category": "advanced-forms",
+      "purpose": "Theme-aware, responsive strong password component.",
+      "demoCount": 6,
+      "propCount": 27,
+      "slots": [],
+      "events": [
+        "input",
+        "change",
+        "strength"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "StyledIcon",
+      "mount": "StyledIcon",
+      "slug": "styled-icon",
+      "category": "base",
+      "purpose": "Theme-aware, responsive styled icon component.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [],
+      "profiled": false
+    },
+    {
+      "name": "Switch",
+      "mount": "Switch",
+      "slug": "switch",
+      "category": "forms",
+      "purpose": "Theme-aware, responsive switch component.",
+      "demoCount": 3,
+      "propCount": 20,
+      "slots": [],
+      "events": [
+        "input",
+        "change",
+        "focus",
+        "blur"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Table",
+      "mount": "Table",
+      "slug": "table",
+      "category": "tables",
+      "purpose": "Theme-aware, responsive table component.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "sort",
+        "select",
+        "rowClick"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Tabs",
+      "mount": "Tabs",
+      "slug": "tabs",
+      "category": "navigation",
+      "purpose": "Switch between related responsive content panels with horizontal or vertical orientation and selection events.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "Textarea",
+      "mount": "Textarea",
+      "slug": "textarea",
+      "category": "forms",
+      "purpose": "Theme-aware, responsive textarea component.",
+      "demoCount": 3,
+      "propCount": 23,
+      "slots": [],
+      "events": [
+        "input",
+        "change",
+        "focus",
+        "blur",
+        "invalid"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "TextLink",
+      "mount": "TextLink",
+      "slug": "text-link",
+      "category": "marketing",
+      "purpose": "Render an accessible text action with optional icon, arrow, underline, external state, and semantic styling.",
+      "demoCount": 3,
+      "propCount": 14,
+      "slots": [],
+      "events": [
+        "click",
+        "focus",
+        "blur"
+      ],
+      "profiled": true
+    },
+    {
+      "name": "Timeline",
+      "mount": "Timeline",
+      "slug": "timeline",
+      "category": "base",
+      "purpose": "Present responsive chronological activity, milestones, or workflow status with rich item metadata.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "TimePicker",
+      "mount": "TimePicker",
+      "slug": "time-picker",
+      "category": "forms",
+      "purpose": "Theme-aware, responsive time picker component.",
+      "demoCount": 3,
+      "propCount": 26,
+      "slots": [],
+      "events": [
+        "input",
+        "change",
+        "focus",
+        "blur",
+        "open",
+        "close",
+        "invalid"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Toast",
+      "mount": "Toast",
+      "slug": "toast",
+      "category": "base",
+      "purpose": "Theme-aware, responsive toast component.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "dismiss",
+        "action"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "ToastNotifications",
+      "mount": "ToastNotifications",
+      "slug": "toast-notifications",
+      "category": "integrations",
+      "purpose": "Theme-aware, responsive toast notifications component.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "add",
+        "dismiss",
+        "clear",
+        "action"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "ToggleCount",
+      "mount": "ToggleCount",
+      "slug": "toggle-count",
+      "category": "advanced-forms",
+      "purpose": "Theme-aware, responsive toggle count component.",
+      "demoCount": 3,
+      "propCount": 23,
+      "slots": [],
+      "events": [
+        "change",
+        "toggle"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "TogglePassword",
+      "mount": "TogglePassword",
+      "slug": "toggle-password",
+      "category": "advanced-forms",
+      "purpose": "Accessible password field with optional show and hide controls.",
+      "demoCount": 10,
+      "propCount": 24,
+      "slots": [],
+      "events": [
+        "input",
+        "change",
+        "toggle"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Tooltip",
+      "mount": "Tooltip",
+      "slug": "tooltip",
+      "category": "overlays",
+      "purpose": "Show concise accessible contextual help on hover, focus, click, or controlled open state.",
+      "demoCount": 3,
+      "propCount": 17,
+      "slots": [
+        "trigger",
+        "default"
+      ],
+      "events": [
+        "toggle",
+        "open",
+        "close"
+      ],
+      "profiled": true
+    },
+    {
+      "name": "TreeView",
+      "mount": "TreeView",
+      "slug": "tree-view",
+      "category": "base",
+      "purpose": "Theme-aware, responsive tree view component.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "select",
+        "toggle",
+        "expand",
+        "collapse"
+      ],
+      "profiled": false
+    },
+    {
+      "name": "Typography",
+      "mount": "Typography",
+      "slug": "typography",
+      "category": "layout",
+      "purpose": "Apply consistent readable responsive typography, widths, columns, spacing, and editorial hierarchy.",
+      "demoCount": 3,
+      "propCount": 6,
+      "slots": [
+        "default"
+      ],
+      "events": [],
+      "profiled": true
+    },
+    {
+      "name": "WysiwygEditor",
+      "mount": "WysiwygEditor",
+      "slug": "wysiwyg-editor",
+      "category": "integrations",
+      "purpose": "Theme-aware, responsive wysiwyg editor component.",
+      "demoCount": 3,
+      "propCount": 7,
+      "slots": [
+        "default"
+      ],
+      "events": [
+        "input",
+        "change",
+        "focus",
+        "blur"
+      ],
+      "profiled": false
+    }
+  ]
+}
diff --git a/examples/component-showcase/test/showcase.test.ts b/examples/component-showcase/test/showcase.test.ts
index 8cda7b7b..6f1b2124 100644
--- a/examples/component-showcase/test/showcase.test.ts
+++ b/examples/component-showcase/test/showcase.test.ts
@@ -2,6 +2,7 @@ import { expect, test } from "bun:test";
 import { readFileSync, readdirSync } from "node:fs";
 import { join } from "node:path";
 import { compileWireFile } from "../../../packages/compiler/src/index.ts";
+import { parse as parseWireSyntax } from "../../../packages/syntax/src/parser.ts";
 
 const root = join(import.meta.dir, "..");
 const pagesDir = join(root, "app", "pages");
@@ -10,9 +11,49 @@ const reference = JSON.parse(
   readFileSync(join(root, "..", "..", "packages", "ui", "component-reference.json"), "utf8"),
 ) as {
   count: number;
-  components: Array<{ name: string; mount: string; category: string; events: string[] }>;
+  components: Array<{
+    name: string;
+    mount: string;
+    category: string;
+    props: Array<{ name: string }>;
+    slots: string[];
+    events: string[];
+  }>;
 };
-const slugOf = (name: string) => name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const manifest = JSON.parse(readFileSync(join(root, "showcase-manifest.json"), "utf8")) as {
+  componentCount: number;
+  categoryCount: number;
+  totalDemoCount: number;
+  components: Array<{
+    name: string;
+    mount: string;
+    slug: string;
+    category: string;
+    demoCount: number;
+    propCount: number;
+    slots: string[];
+    events: string[];
+    profiled: boolean;
+  }>;
+};
+
+const detailSource = (slug: string) =>
+  readFileSync(join(detailPagesDir, `${slug}.wrn`), "utf8");
+
+const interactiveOverlayNames = [
+  "ContextMenu",
+  "Drawer",
+  "Dropdown",
+  "Modal",
+  "Popover",
+  "Tooltip",
+];
+
+function mountCount(source: string, mount: string): number {
+  const tag = new RegExp(`<${mount}(?:\\s|>|/)`, "g");
+  const legacy = new RegExp(`<div\\s+data-component="${mount}"`, "g");
+  return (source.match(tag)?.length ?? 0) + (source.match(legacy)?.length ?? 0);
+}
 
 test("showcase configures local Lucide icon generation", () => {
   const packageJson = JSON.parse(readFileSync(join(root, "package.json"), "utf8")) as {
@@ -24,10 +65,26 @@ test("showcase configures local Lucide icon generation", () => {
   expect(packageJson.devDependencies["@iconify-json/lucide"]).toBeTruthy();
   expect(styles).toContain('@plugin "@iconify/tailwind4";');
   expect(styles).toContain(".playground-preview-source > .wire-action:not(.w-full)");
-  expect(styles).toContain("width: fit-content;");
+  expect(styles).toContain('[data-ui-component="MetricGrid"]');
+  expect(styles).toContain("width: 100%;");
 });
 
-test("showcase uses a searchable three-column documentation shell", () => {
+test("showcase manifest matches the generated UI reference", () => {
+  expect(manifest.componentCount).toBe(reference.count);
+  expect(manifest.components).toHaveLength(reference.count);
+  expect(manifest.totalDemoCount).toBeGreaterThanOrEqual(reference.count * 3);
+  expect(new Set(manifest.components.map((component) => component.slug)).size).toBe(reference.count);
+
+  for (const component of reference.components) {
+    const documented = manifest.components.find((entry) => entry.name === component.name);
+    expect(documented).toBeTruthy();
+    expect(documented?.mount).toBe(component.mount);
+    expect(documented?.events).toEqual(component.events);
+    expect(documented?.slots).toEqual(component.slots);
+  }
+});
+
+test("showcase uses a searchable documentation shell", () => {
   const layout = readFileSync(join(root, "app", "layouts", "showcase.wrn"), "utf8");
   const styles = readFileSync(join(root, "app", "styles", "global.css"), "utf8");
   const runtime = readFileSync(join(root, "public", "playground.js"), "utf8");
@@ -40,66 +97,6 @@ test("showcase uses a searchable three-column documentation shell", () => {
   expect(runtime).toContain('event.key.toLowerCase() === "k"');
 });
 
-test("component sidebar shows delivery status and refreshes its active link after navigation", () => {
-  const layout = readFileSync(join(root, "app", "layouts", "showcase.wrn"), "utf8");
-  const styles = readFileSync(join(root, "app", "styles", "global.css"), "utf8");
-  const runtime = readFileSync(join(root, "public", "playground.js"), "utf8");
-  const completeComponents = [
-    "Accordion",
-    "Alert",
-    "Avatar",
-    "Avatar Group",
-    "Badge",
-    "Blockquote",
-    "Button",
-    "Button Group",
-    "Card",
-    "Carousel",
-    "Chat Bubble",
-    "Collapse",
-    "Checkbox",
-    "Date Picker",
-    "Device Frame",
-    "File Upload Progress",
-    "Color Picker",
-    "File Input",
-    "Input",
-    "Input Group",
-    "Radio",
-    "Range Slider",
-    "Select",
-    "Switch",
-    "Textarea",
-    "Time Picker",
-    "Advanced Select",
-    "Combo Box",
-    "Input Number",
-    "Pin Input",
-    "Strong Password",
-    "Toggle Count",
-    "Toggle Password",
-  ];
-
-  expect(layout.match(/data-component-status="complete"/g)).toHaveLength(completeComponents.length);
-  expect(layout.match(/data-component-status="pending"/g)).toHaveLength(
-    reference.count - completeComponents.length,
-  );
-  for (const component of completeComponents) {
-    expect(layout).toContain(
-      `<span data-docs-component-name>${component}</span><small data-component-status="complete">Complete</small>`,
-    );
-  }
-  expect(styles).toContain('[data-component-status="working"]');
-  expect(runtime).toContain('window.addEventListener("wrnexus:navigated", updateActiveNavigation)');
-  expect(runtime).toContain('link.removeAttribute("aria-current")');
-});
-
-test("accordion examples do not include the generic composable slot placeholder", () => {
-  const page = readFileSync(join(detailPagesDir, "accordion.wrn"), "utf8");
-
-  expect(page).not.toContain("Composable content area.");
-});
-
 test("showcase SSR document layout maps persisted design cookies to html attributes", () => {
   const source = readFileSync(join(root, "app", "layouts", "document.wrn"), "utf8");
   expect(source).toContain("<html");
@@ -111,380 +108,235 @@ test("showcase SSR document layout maps persisted design cookies to html attribu
   }
 });
 
-test("advanced select demos use validation schemas and a real remote API", () => {
-  const page = readFileSync(
-    join(root, "app", "pages", "components", "advanced-select.wrn"),
-    "utf8",
+test("category pages preview every UI component exactly once", () => {
+  const categoryPages = readdirSync(pagesDir)
+    .filter((file) => manifest.components.some((component) => `${component.category}.wrn` === file))
+    .map((file) => readFileSync(join(pagesDir, file), "utf8"))
+    .join("\n");
+
+  const invalidPreviews = reference.components.flatMap((component) => {
+    const count = mountCount(categoryPages, component.mount);
+    return count === 1
+      ? []
+      : [{ name: component.name, mount: component.mount, category: component.category, count }];
+  });
+
+  expect(invalidPreviews).toEqual([]);
+});
+
+test("every component has a detail page, playground, and manifest-driven demos", () => {
+  const files = readdirSync(detailPagesDir).filter((entry) => entry.endsWith(".wrn"));
+  expect(files).toHaveLength(reference.count);
+
+  for (const component of manifest.components) {
+    const source = detailSource(component.slug);
+    expect(source).toContain("data-playground-preview");
+    expect(source).toContain("data-playground-form");
+    expect(source).toContain("data-playground-code");
+    expect(source).toContain('href="#playground"');
+    expect(source.match(/class="demo-workbench"/g)).toHaveLength(component.demoCount);
+    expect(mountCount(source, component.mount)).toBeGreaterThanOrEqual(component.demoCount + 1);
+  }
+}, 20_000);
+
+test("playgrounds preserve typed values, safe DOM replacement, themes, and event output", () => {
+  const generator = readFileSync(join(root, "scripts", "generate-showcase.mjs"), "utf8");
+  const runtime = readFileSync(join(root, "public", "playground.js"), "utf8");
+
+  expect(generator).toContain("JSON.parse(");
+  expect(generator).toContain("Number(");
+  expect(generator).toContain("data-playground-json");
+  expect(generator).toContain("prop.name}='{${playgroundStateName(prop)}}'");
+  expect(generator).toContain('data-slot="${escapeAttribute(slot)}"');
+  const generatorWithoutDataSlots = generator.replaceAll(
+    'data-slot="${escapeAttribute(slot)}"',
+    "",
   );
+  expect(generatorWithoutDataSlots).not.toContain('slot="${escapeAttribute(slot)}"');
+
+  expect(runtime).toContain("fetch(url");
+  expect(runtime).toContain("navigator.clipboard.writeText");
+  expect(runtime).toContain("preview.replaceChildren");
+  expect(runtime).not.toContain("preview.innerHTML");
+  expect(runtime).toContain("__wrnexusHydrateScopes");
+  expect(runtime).toContain("wireTheme?.bind?.(document)");
+  expect(runtime).toContain("bindPlaygroundEvents");
+  expect(runtime).toContain('attributes.push(`${name}="${field.checked}"`)');
+});
+
+test("playground enum controls use public profiles instead of inferred implementation comparisons", () => {
+  const generator = readFileSync(join(root, "scripts", "generate-showcase.mjs"), "utf8");
+  expect(generator).toContain("profileFor(component.name)?.options?.[prop.name]");
+  expect(generator).not.toContain("source.matchAll(pattern)");
+
+  const pageHeader = manifest.components.find((component) => component.name === "PageHeader");
+  if (pageHeader) {
+    const source = detailSource(pageHeader.slug);
+    expect(source).toContain('name="pg_icon" type="text"');
+    expect(source).toMatch(/<option value="default"(?: selected)?>default<\/option>/);
+    expect(source).toMatch(/<option value="solid"(?: selected)?>solid<\/option>/);
+  }
+});
+
+test("every declared public event is documented and visible in the playground", () => {
+  for (const component of manifest.components.filter((entry) => entry.events.length > 0)) {
+    const source = detailSource(component.slug);
+    expect(source).toContain('id="events"');
+    expect(source).toContain('href="#events"');
+    expect(source).toContain("data-playground-event-log");
+    for (const event of component.events) {
+      expect(source).toContain(`<code>@${event}</code>`);
+      expect(source).toContain(`@${event}='console.log(event.detail)'`);
+    }
+  }
+});
+
+test("new and recently repaired components have production use-case profiles", () => {
+  const expectedProfiles = [
+    "PublicPageShell",
+    "AnnouncementBar",
+    "Breadcrumb",
+    "PageHeader",
+    "Hero",
+    "HeroActions",
+    "SplitHero",
+    "Section",
+    "SectionHeader",
+    "MarketingSectionHeader",
+    "TextLink",
+    "FeatureGrid",
+    "FeatureCard",
+    "FeatureIconCard",
+    "MetricGrid",
+    "MetricCard",
+    "StatsBar",
+    "CTASection",
+    "BackToTop",
+    "Footer",
+    "ContextMenu",
+    "Drawer",
+    "Dropdown",
+    "Modal",
+    "Popover",
+    "Tooltip",
+  ];
+
+  for (const name of expectedProfiles) {
+    const component = manifest.components.find((entry) => entry.name === name);
+    if (!component) continue;
+    expect(component.profiled).toBe(true);
+    const source = detailSource(component.slug);
+    expect(source.match(/class="demo-workbench"/g)?.length ?? 0).toBeGreaterThanOrEqual(3);
+  }
+});
+
+test("grid, hero, shell, and overlay detail pages use responsive showcase stages", () => {
+  const styles = readFileSync(join(root, "app", "styles", "global.css"), "utf8");
+  for (const name of [
+    "MetricGrid",
+    "FeatureGrid",
+    "StatsBar",
+    "Hero",
+    "SplitHero",
+    "AnnouncementBar",
+    "CTASection",
+    "Footer",
+  ]) {
+    expect(styles).toContain(`[data-ui-component="${name}"]`);
+  }
+
+  const metricGrid = manifest.components.find((component) => component.name === "MetricGrid");
+  if (metricGrid) {
+    const source = detailSource(metricGrid.slug);
+    expect(source).toContain('columns="3"');
+    const metricGridReference = reference.components.find(
+      (component) => component.name === "MetricGrid",
+    );
+    if (metricGridReference?.props.some((prop) => prop.name === "maxWidth")) {
+      expect(source).toContain('maxWidth="full"');
+    }
+    expect(source).toContain("items='[");
+  }
+});
+
+test("overlay previews start closed and expose usable click, hover, or context triggers", () => {
+  const generator = readFileSync(join(root, "scripts", "generate-showcase.mjs"), "utf8");
+  const profiles = readFileSync(join(root, "scripts", "showcase-profiles.mjs"), "utf8");
+  const styles = readFileSync(join(root, "app", "styles", "global.css"), "utf8");
+
+  expect(generator).toContain("interactiveOverlayComponents");
+  expect(generator).toContain("overlayVisibilityProps.has(name)");
+  expect(generator).toContain('data-interactive-preview="${isInteractiveOverlay(component) ? "true" : "false"}"');
+  expect(styles).toContain('.catalog-card[data-interactive-preview="true"]');
+  expect(styles).toContain('[data-ui-component="Drawer"]');
+  expect(styles).toContain('[data-ui-component="Modal"]');
+
+  const overlaysPage = readFileSync(join(pagesDir, "overlays.wrn"), "utf8");
+  for (const name of interactiveOverlayNames) {
+    const component = manifest.components.find((entry) => entry.name === name);
+    if (!component) continue;
+
+    const detail = detailSource(component.slug);
+    expect(detail).toContain("demo-interaction-hint");
+    expect(detail).not.toMatch(new RegExp(`<${component.mount}[^>]*(?:open|defaultOpen)="true"`));
+    expect(overlaysPage).not.toMatch(
+      new RegExp(`<${component.mount}[^>]*(?:open|defaultOpen)="true"`),
+    );
+  }
+
+  expect(profiles).toContain('trigger: "contextmenu"');
+  expect(profiles).toContain('trigger: "click"');
+  expect(profiles).toContain('trigger: "hover"');
+  expect(profiles).toContain('trigger: "both"');
+  expect(profiles).toContain('triggerLabel: "Open drawer"');
+  expect(profiles).toContain('triggerLabel: "Open modal"');
+  expect(profiles).toContain('triggerLabel: "View details"');
+});
+
+test("advanced select demos use validation schemas and a real remote API", () => {
+  const component = manifest.components.find((entry) => entry.name === "AdvancedSelect");
+  if (!component) return;
+  const page = detailSource(component.slug);
   expect(page).toContain('data-schema="advanced-select-validation"');
   expect(page).toContain('data-schema="advanced-select-dynamic-validation"');
   expect(readFileSync(join(root, "app", "api", "teams.ts"), "utf8")).toContain("export const GET");
 });
 
-test("category pages preview every UI component exactly once", () => {
-  const categoryPages = readdirSync(pagesDir)
-    .filter((file) => file !== "index.wrn" && file.endsWith(".wrn"))
-    .map((file) => readFileSync(join(pagesDir, file), "utf8"))
-    .join("\n");
-
-  const mounts = [...categoryPages.matchAll(/<div data-component="([^"]+)"/g)].map(
-    (match) => match[1],
-  );
-
-  expect(mounts).toHaveLength(reference.count);
-  expect(new Set(mounts).size).toBe(reference.count);
-  expect(mounts.sort()).toEqual(reference.components.map((component) => component.mount).sort());
-});
-
-test("every component has a detail page with its expected live use cases", () => {
-  const files = readdirSync(detailPagesDir).filter((entry) => entry.endsWith(".wrn"));
-
-  expect(files).toHaveLength(reference.count);
-
-  const detailMounts = files.flatMap((file) => {
-    const source = readFileSync(join(detailPagesDir, file), "utf8");
-    return [...source.matchAll(/<div data-component="([^"]+)"/g)].map((match) => match[1]);
-  });
-
-  // Every detail page has one playground plus three standard demos. Interactive
-  // components add specialized capability demos beyond that shared baseline.
-  expect(detailMounts).toHaveLength(reference.count * 4 + 249);
-  for (const component of reference.components) {
-    const expectedMounts =
-      component.mount === "Accordion"
-        ? 10
-        : component.mount === "Alert"
-          ? 16
-          : component.mount === "Avatar"
-            ? 18
-            : component.mount === "AvatarGroup"
-              ? 6
-              : component.mount === "Badge"
-                ? 16
-                : component.mount === "Button"
-                  ? 9
-                  : component.mount === "ButtonGroup"
-                    ? 8
-                    : component.mount === "Card"
-                      ? 24
-                      : component.mount === "Carousel"
-                        ? 14
-                        : component.mount === "ChatBubble"
-                          ? 5
-                          : component.mount === "Collapse"
-                            ? 3
-                            : component.mount === "FileUploadProgress"
-                              ? 7
-                              : [
-                                    "Checkbox",
-                                    "ColorPicker",
-                                    "FileInput",
-                                    "Input",
-                                    "InputGroup",
-                                    "Radio",
-                                    "RangeSlider",
-                                    "Select",
-                                    "Switch",
-                                    "Textarea",
-                                    "TimePicker",
-                                  ].includes(component.mount)
-                                ? component.mount === "Radio" || component.mount === "Checkbox"
-                                  ? 12
-                                  : 10
-                                : component.mount === "AdvancedSelect"
-                                  ? 42
-                                  : component.mount === "ComboBox"
-                                    ? 22
-                                    : component.mount === "InputNumber"
-                                      ? 13
-                                      : component.mount === "PinInput"
-                                        ? 19
-                                        : component.mount === "StrongPassword"
-                                          ? 7
-                                          : component.mount === "ToggleCount"
-                                            ? 5
-                                            : component.mount === "TogglePassword"
-                                              ? 11
-                                              : 4;
-    expect(detailMounts.filter((mount) => mount === component.mount)).toHaveLength(expectedMounts);
-  }
-
-  const uploadProgressPage = readFileSync(join(detailPagesDir, "file-upload-progress.wrn"), "utf8");
-  for (const fileName of [
-    "design-system.zip",
-    "product-images.tar",
-    "launch-video.mp4",
-    "quarterly-report.pdf",
-    "customer-export.csv",
-    "brand-assets.fig",
-  ]) {
-    expect(uploadProgressPage).toContain(fileName);
-  }
-  expect(uploadProgressPage).toContain('status="complete"');
-  expect(uploadProgressPage).toContain('status="error"');
-  expect(uploadProgressPage).toContain('status="cancelled"');
-}, 15_000);
-
-test("every detail page has a type-aware realtime playground", () => {
-  const files = readdirSync(detailPagesDir).filter((entry) => entry.endsWith(".wrn"));
-  for (const file of files) {
-    const source = readFileSync(join(detailPagesDir, file), "utf8");
-    expect(source).toContain("data-playground-preview");
-    expect(source).toContain("data-playground-form");
-    expect(source).toContain("data-playground-code");
-    expect(source).toContain("data-playground-copy");
-    expect(source).toContain('href="#playground"');
-  }
-
-  const runtime = readFileSync(join(root, "public", "playground.js"), "utf8");
-  expect(runtime).toContain("fetch(url");
-  expect(runtime).toContain("HTMLSelectElement");
-  expect(runtime).toContain("navigator.clipboard.writeText");
-  expect(runtime).toContain("updateCode(playground)");
-  expect(runtime).toContain("__wrnexusHydrateScopes");
-  expect(runtime).toContain("data-playground-json");
-  expect(runtime).toContain('createPolicy("wrnexus-playground"');
-  expect(runtime).toContain("preview.replaceChildren");
-  expect(runtime).not.toContain("preview.innerHTML");
-});
-
-test("detail pages show component syntax beside each live preview", () => {
-  const buttonPage = readFileSync(join(detailPagesDir, "button.wrn"), "utf8");
-
-  expect(buttonPage).toContain('name="pg_label" type="text"');
-  expect(buttonPage).toContain('name="pg_variant"');
-  expect(buttonPage).toContain('<option value="destructive">destructive</option>');
-  expect(buttonPage).not.toContain('<option value="success">success</option></select></label>');
-  expect(buttonPage).toContain('name="pg_color"');
-  expect(buttonPage).toContain('<option value="success">success</option>');
-  expect(buttonPage).toContain('name="pg_size"');
-  expect(buttonPage).toContain('<option value="icon-lg">icon-lg</option>');
-  expect(buttonPage.match(/class="demo-workbench"/g)).toHaveLength(8);
-  expect(buttonPage.match(/&lt;Button/g)).toHaveLength(9);
-  expect(buttonPage).not.toContain("&lt;div data-component=&quot;Button&quot;");
-  expect(buttonPage).not.toContain('<details class="demo-code">');
-});
-
-test("every detail page lists all public events immediately before props", () => {
-  for (const component of reference.components) {
-    const source = readFileSync(join(detailPagesDir, `${slugOf(component.name)}.wrn`), "utf8");
-    const eventsIndex = source.indexOf('<section id="events"');
-    const propsIndex = source.indexOf('<section id="api"');
-
-    expect(eventsIndex).toBeGreaterThan(-1);
-    expect(propsIndex).toBeGreaterThan(eventsIndex);
-    expect(source.slice(eventsIndex, propsIndex)).toContain("Component events");
-    expect(source).toContain('<a href="#events">Events</a>');
-
-    if (component.events.length === 0) {
-      expect(source.slice(eventsIndex, propsIndex)).toContain("No public component events.");
-    } else {
-      for (const event of component.events) {
-        expect(source.slice(eventsIndex, propsIndex)).toContain(`<code>@${event}</code>`);
-      }
-    }
-  }
-});
-
-test("button documents click, focus, and blur events", () => {
-  const source = readFileSync(join(detailPagesDir, "button.wrn"), "utf8");
-
-  for (const event of ["click", "focus", "blur"]) {
-    expect(source).toContain(`<code>@${event}</code>`);
-  }
-});
-
-test("button group documents every requested layout and size", () => {
-  const source = readFileSync(join(detailPagesDir, "button-group.wrn"), "utf8");
-
-  for (const heading of [
-    "Example",
-    "Small",
-    "Medium",
-    "Large",
-    "Responsive stack",
-    "Vertical stack",
-    "Button toolbar",
-  ]) {
-    expect(source).toContain(`<h2>${heading}</h2>`);
-  }
-  expect(source.match(/class="demo-workbench"/g)).toHaveLength(7);
-  expect(source).toContain('<span class="detail-toc-group">Basic usage</span>');
-  expect(source).toContain('<span class="detail-toc-group">Sizes</span>');
-  expect(source).toContain('responsive="true"');
-  expect(source).toContain('orientation="vertical"');
-  expect(source).toContain('toolbar="true"');
-  expect(source).toContain('ariaLabel="Text formatting"');
-  for (const event of ["click", "select", "change"]) {
-    expect(source).toContain(`<code>@${event}</code>`);
-  }
-});
-
-test("radio documents single, grouped, card, list, aligned, and validation layouts", () => {
-  const source = readFileSync(join(detailPagesDir, "radio.wrn"), "utf8");
-  for (const heading of [
-    "Default radio",
-    "Disabled",
-    "Inline radio group",
-    "Vertical radio group",
-    "Radios with descriptions",
-    "Radio cards",
-    "Vertical radio cards",
-    "Right-aligned radio",
-    "Radio list group",
-    "Horizontal radio list group",
-    "Validation states",
-  ]) {
-    expect(source).toContain(`<h2>${heading}</h2>`);
-  }
-});
-
-test("checkbox documents mixed, grouped, card, list, aligned, and validation layouts", () => {
-  const source = readFileSync(join(detailPagesDir, "checkbox.wrn"), "utf8");
-  for (const heading of [
-    "Default checkbox",
-    "Indeterminate",
-    "Disabled",
-    "Checkbox group options",
-    "Checkboxes with descriptions",
-    "Checkbox cards",
-    "Vertical checkbox cards",
-    "Right-aligned checkbox",
-    "Checkbox list group",
-    "Horizontal checkbox list group",
-    "Validation states",
-  ]) {
-    expect(source).toContain(`<h2>${heading}</h2>`);
-  }
-});
-
-test("card documents content, media, animation, layout, alert, and panel capabilities", () => {
-  const source = readFileSync(join(detailPagesDir, "card.wrn"), "utf8");
-  const headings = [
-    "Default card",
-    "Body",
-    "Simple card",
-    "Header and footer",
-    "Footer only",
-    "Small",
-    "Default",
-    "Large",
-    "Navigation",
-    "Navigation with select on mobile",
-    "Top image",
-    "Bottom image",
-    "Image overlays",
-    "Image scaling animation on hover",
-    "Transition on hover",
-    "Horizontal",
-    "Card group",
-    "Top bordered card",
-    "Card actions",
-    "Card with alert",
-    "Centered body content",
-    "Empty state",
-    "Scrollable body",
+test("specialized form component examples remain complete", () => {
+  const checks: Array<[string, string[]]> = [
+    ["PinInput", ["Different lengths", 'length="3"', 'length="5"', 'length="7"']],
+    ["TogglePassword", ["Checkbox-controlled toggle", "Synchronized password fields", 'data-schema="toggle-password-validation"']],
+    ["StrongPassword", ["Live strength meter", "Requirements in a popover", 'specialCharactersSet="@#_-."']],
   ];
-
-  for (const heading of headings) {
-    expect(source).toContain(`<h2>${heading}</h2>`);
-  }
-  expect(source.match(/class="demo-workbench"/g)).toHaveLength(23);
-  for (const section of [
-    "Basic usage",
-    "Content",
-    "Structure",
-    "Sizes",
-    "Navigation",
-    "Images",
-    "Animations",
-    "Card layout",
-    "Panels",
-  ]) {
-    expect(source).toContain(`<span class="detail-toc-group">${section}</span>`);
-  }
-  expect(source).toContain('imagePosition="overlay"');
-  expect(source).toContain('hover="image"');
-  expect(source).toContain('hover="raise"');
-  expect(source).toContain('layout="horizontal"');
-  expect(source).toContain('mobileNavigation="true"');
-  expect(source).toContain('scrollable="true"');
-  for (const event of ["click", "action", "navigate", "dismiss", "load", "error"]) {
-    expect(source).toContain(`<code>@${event}</code>`);
+  for (const [name, needles] of checks) {
+    const component = manifest.components.find((entry) => entry.name === name);
+    if (!component) continue;
+    const source = detailSource(component.slug);
+    for (const needle of needles) expect(source).toContain(needle);
   }
 });
 
-test("advanced select and combobox document their complete event contract", () => {
-  for (const slug of ["advanced-select", "combo-box"]) {
-    const source = readFileSync(join(detailPagesDir, `${slug}.wrn`), "utf8");
-    for (const event of ["search", "select", "change", "clear", "open", "close", "load", "error"]) {
-      expect(source).toContain(`<code>@${event}</code>`);
-    }
-    expect(source).toContain('id="events"');
-    expect(source).toContain("event.detail");
-  }
-});
-
-test("pin input documents verification events", () => {
-  const source = readFileSync(join(detailPagesDir, "pin-input.wrn"), "utf8");
-  for (const event of ["input", "change", "complete", "paste", "clear", "error"]) {
-    expect(source).toContain(`<code>@${event}</code>`);
-  }
-  expect(source).toContain('id="events"');
-  expect(source).toContain("event.detail");
-  expect(source).toContain("Different lengths");
-  expect(source).toContain('length="3"');
-  expect(source).toContain('length="5"');
-  expect(source).toContain('length="7"');
-});
-
-test("toggle password documents visibility states, validation, and declared events", () => {
-  const source = readFileSync(join(detailPagesDir, "toggle-password.wrn"), "utf8");
-  for (const event of ["input", "change", "toggle"]) {
-    expect(source).toContain(`<code>@${event}</code>`);
-  }
-  expect(source).toContain("Checkbox-controlled toggle");
-  expect(source).toContain("Synchronized password fields");
-  expect(source).toContain("Without visibility toggle");
-  expect(source).toContain("fields='[\n    &#123;");
-  expect(source).toContain('"label": "New password"');
-  expect(source).toContain('"name": "current-password"');
-  expect(source).not.toContain("fields='[..]'");
-  expect(source).toContain('data-schema="toggle-password-validation"');
-});
-
-test("strong password documents live scoring, requirements, popover, and custom characters", () => {
-  const source = readFileSync(join(detailPagesDir, "strong-password.wrn"), "utf8");
-  expect(source).toContain("Live strength meter");
-  expect(source).toContain("Requirements and hint text");
-  expect(source).toContain("Requirements in a popover");
-  expect(source).toContain("Custom special characters");
-  expect(source).toContain('presentation="popover"');
-  expect(source).toContain('specialCharactersSet="@#_-."');
-  for (const event of ["input", "change", "strength"]) {
-    expect(source).toContain(`<code>@${event}</code>`);
-  }
-});
-
-test("complex component props are shown as complete readable multiline values", () => {
-  for (const slug of ["advanced-select", "combo-box", "select", "toggle-password"]) {
-    const source = readFileSync(join(detailPagesDir, `${slug}.wrn`), "utf8");
+test("complex component props are complete readable multiline values", () => {
+  for (const name of ["AdvancedSelect", "ComboBox", "Select", "TogglePassword"]) {
+    const component = manifest.components.find((entry) => entry.name === name);
+    if (!component) continue;
+    const source = detailSource(component.slug);
     expect(source).not.toMatch(/\b(?:options|groups|items|fields)='\[\.\.\.\]'/);
   }
-
-  const advancedSelect = readFileSync(join(detailPagesDir, "advanced-select.wrn"), "utf8");
-  expect(advancedSelect).toContain("options='[\n    &#123;");
-  expect(advancedSelect).toContain('"value": "design"');
 });
 
-test("code examples preserve literal object braces after client hydration", () => {
-  const source = readFileSync(join(detailPagesDir, "toggle-password.wrn"), "utf8");
-  expect(source).toContain("&#123;");
-  expect(source).toContain("&#125;");
-  expect(source).not.toContain('fields=\'[\n    {\n      "label"');
+test("generated playground boolean states avoid multiline-sensitive ternaries", () => {
+  const generator = readFileSync(join(root, "scripts", "generate-showcase.mjs"), "utf8");
+  expect(generator).toContain('?? "${initial}") === "true"');
+  expect(generator).not.toContain('=== null ? ${initial} :');
+
+  for (const component of manifest.components) {
+    const source = detailSource(component.slug);
+    expect(source).not.toMatch(/state\s+playground_[A-Za-z0-9_$]+\s*=.*===\s*null\s*\?/);
+  }
 });
 
-test("every generated showcase page compiles", () => {
+test("every generated showcase page compiles and is accepted by the route syntax parser", () => {
   const paths = [
     ...readdirSync(pagesDir)
       .filter((entry) => entry.endsWith(".wrn"))
@@ -495,6 +347,8 @@ test("every generated showcase page compiles", () => {
   ];
 
   for (const path of paths) {
-    expect(() => compileWireFile(readFileSync(path, "utf8"), path)).not.toThrow();
+    const source = readFileSync(path, "utf8");
+    expect(() => parseWireSyntax(source)).not.toThrow();
+    expect(() => compileWireFile(source, path)).not.toThrow();
   }
 });
diff --git a/packages/cli/src/update.ts b/packages/cli/src/update.ts
index 2ca3a5df..0e74a256 100644
--- a/packages/cli/src/update.ts
+++ b/packages/cli/src/update.ts
@@ -1177,6 +1177,15 @@ const MIGRATIONS: Migration[] = [
       // Runtime-only framework fix. No project files require migration.
     },
   },
+  {
+    version: "0.5.15",
+    id: "wrn-style-block-head-pipeline",
+    description:
+      "Promotes page, layout, and component style blocks into the document head after global CSS with CSP, HMR, and CSR navigation support.",
+    apply() {
+      // Compiler, SSR, dev-server, and CSR runtime changes apply automatically.
+    },
+  },
 ];
 
 /** Release tooling uses this to require an explicit migration entry per version. */
diff --git a/packages/compiler/src/codegen.ts b/packages/compiler/src/codegen.ts
index 466ce8a7..166c7c01 100644
--- a/packages/compiler/src/codegen.ts
+++ b/packages/compiler/src/codegen.ts
@@ -9,7 +9,7 @@
  *   api="<name>"       -> SSR/client data binding declared in a mode block
  *   ssrGet/ssrText     -> legacy server-side API fetch + render
  *   csrGet/csrText     -> legacy browser-side API fetch + render
- *   style              -> an inline page stylesheet
+ *   style              -> tagged local stylesheet metadata promoted by SSR
  *   functions          -> server-only helpers for API/realtime code
  *   api M /p {b}       -> export const M = async (ctx) => { b }
  *   realtime {..}      -> export const websocket = { evt(ws, ...args) { b } }
@@ -735,6 +735,36 @@ function hydrationId(ast: PageAst): string {
   return `${ast.name}:${stableHash(shape)}`;
 }
 
+function localStyleId(ast: PageAst): string {
+  return `wrn-${ast.kind}-${stableHash(`${ast.kind}:${ast.name}`)}`;
+}
+
+function localStyleTag(ast: PageAst, styles: string[]): string {
+  if (!styles.length) return "";
+
+  const id = localStyleId(ast);
+  const css = styles.map(styleEscape).join("\n");
+
+  return `<style data-wrnexus-style="${attrEscape(ast.name)}" data-wrnexus-style-id="${attrEscape(id)}" data-wrnexus-style-owner="${attrEscape(ast.name)}" data-wrnexus-style-kind="${attrEscape(ast.kind)}">\n${css}\n</style>`;
+}
+
+function localStyleExport(ast: PageAst, styles: string[]): string | null {
+  if (!styles.length) return null;
+
+  return `export const __wrnexusStyles = ${JSON.stringify(
+    [
+      {
+        id: localStyleId(ast),
+        owner: ast.name,
+        kind: ast.kind,
+        css: styles.join("\n"),
+      },
+    ],
+    null,
+    2,
+  )};`;
+}
+
 function isSafeGeneratedIdentifier(name: string): boolean {
   return /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(name);
 }
@@ -829,10 +859,12 @@ export function generate(ast: PageAst): string {
     html = `<div data-scope="${scopePlaceholder}"${behaviorAttribute(pageBehavior)}${hydrationAttribute(ast)}>${html}</div>`;
   }
 
-  if (styles.length > 0) {
-    const css = styles.map(styleEscape).join("\n");
-    html = `<style data-wrnexus-style="${attrEscape(ast.name)}">\n${css}\n</style>${html}`;
+  const pageStyleTag = localStyleTag(ast, styles);
+  if (pageStyleTag) {
+    html = `${pageStyleTag}${html}`;
   }
+  const pageStyleExport = localStyleExport(ast, styles);
+  if (pageStyleExport) out.push(pageStyleExport);
   if (csrBindings.length > 0) {
     out.push(`export const __wrnexusCsr = ${JSON.stringify(csrBindings, null, 2)};`);
   }
@@ -1653,12 +1685,7 @@ function generateComponent(ast: PageAst): string {
     )
     .join("");
   const styles = ast.styles.map((body) => body.trim()).filter(Boolean);
-  const styleTag =
-    styles.length > 0
-      ? escLit(
-          `<style data-wrnexus-style="${attrEscape(ast.name)}">\n${styles.map(styleEscape).join("\n")}\n</style>`,
-        )
-      : "";
+  const styleTag = escLit(localStyleTag(ast, styles));
 
   // A component needs a reactive scope only when it has state or event handlers.
   // Prop-driven text/attributes are baked server-side, so static components ship
@@ -1740,6 +1767,8 @@ function generateComponent(ast: PageAst): string {
   if (Object.keys(ast.security).length > 0) {
     out.push(`export const __wrnexusSecurity = ${JSON.stringify(ast.security, null, 2)};`);
   }
+  const componentStyleExport = localStyleExport(ast, styles);
+  if (componentStyleExport) out.push(componentStyleExport);
 
   if (behavior) {
     out.push(`export const __wrnexusBehavior = ${JSON.stringify(behavior, null, 2)};`);
diff --git a/packages/compiler/test/compiler.test.ts b/packages/compiler/test/compiler.test.ts
index af06437c..b7eeeed5 100644
--- a/packages/compiler/test/compiler.test.ts
+++ b/packages/compiler/test/compiler.test.ts
@@ -1343,3 +1343,26 @@ page Pricing {
 
   expect(code).toContain('billingCycle === "annual"');
 });
+
+test("style blocks compile with stable page/component/layout metadata", () => {
+  const page = compileWireFile(`page StyledPage {
+    style { .shared { color: red; } }
+    view { <main class="shared">Page</main> }
+  }`);
+  const component = compileWireFile(`component StyledCard {
+    style { .shared { color: blue; } }
+    view { <article class="shared">Card</article> }
+  }`);
+  const layout = compileWireFile(`layout StyledLayout {
+    style { .shared { color: green; } }
+    view { <div class="shared"><slot></slot></div> }
+  }`);
+
+  expect(page).toContain('data-wrnexus-style-kind="page"');
+  expect(component).toContain('data-wrnexus-style-kind="component"');
+  expect(layout).toContain('data-wrnexus-style-kind="layout"');
+  expect(page).toContain("export const __wrnexusStyles");
+  expect(component).toContain("export const __wrnexusStyles");
+  expect(layout).toContain("export const __wrnexusStyles");
+  expect(page).toMatch(/data-wrnexus-style-id="wrn-page-[a-z0-9]+"/);
+});
diff --git a/packages/csr/src/nav-runtime.ts b/packages/csr/src/nav-runtime.ts
index d5d093af..32cced5a 100644
--- a/packages/csr/src/nav-runtime.ts
+++ b/packages/csr/src/nav-runtime.ts
@@ -69,6 +69,59 @@ export const NAV_RUNTIME = String.raw`
     return rel.indexOf("external") === -1;
   }
 
+  function currentDocumentNonce() {
+    var node = document.querySelector("script[nonce],style[nonce]");
+    if (!node) return "";
+    return node.nonce || node.getAttribute("nonce") || "";
+  }
+
+  function syncWrnStyles(nextDocument) {
+    var current = Array.prototype.slice.call(
+      document.querySelectorAll("style[data-wrnexus-style-id]"),
+    );
+    var next = Array.prototype.slice.call(
+      nextDocument.querySelectorAll("style[data-wrnexus-style-id]"),
+    );
+    var currentById = Object.create(null);
+    var nextIds = Object.create(null);
+    var nonce = currentDocumentNonce();
+
+    current.forEach(function (style) {
+      var id = style.getAttribute("data-wrnexus-style-id");
+      if (id) currentById[id] = style;
+    });
+
+    next.forEach(function (nextStyle) {
+      var id = nextStyle.getAttribute("data-wrnexus-style-id");
+      if (!id) return;
+      nextIds[id] = true;
+
+      var currentStyle = currentById[id];
+      if (!currentStyle) {
+        currentStyle = document.createElement("style");
+        currentStyle.setAttribute("data-wrnexus-style-id", id);
+      }
+
+      ["data-wrnexus-style-owner", "data-wrnexus-style-kind"].forEach(function (name) {
+        var value = nextStyle.getAttribute(name);
+        if (value == null) currentStyle.removeAttribute(name);
+        else currentStyle.setAttribute(name, value);
+      });
+
+      if (nonce) currentStyle.setAttribute("nonce", nonce);
+      if (currentStyle.textContent !== nextStyle.textContent) {
+        currentStyle.textContent = nextStyle.textContent;
+      }
+
+      document.head.appendChild(currentStyle);
+    });
+
+    current.forEach(function (style) {
+      var id = style.getAttribute("data-wrnexus-style-id");
+      if (id && !nextIds[id]) style.remove();
+    });
+  }
+
   function loadedScriptPaths() {
     var loaded = {};
 
@@ -317,6 +370,8 @@ export const NAV_RUNTIME = String.raw`
       document.title = doc.title;
     }
 
+    syncWrnStyles(doc);
+
     var importedNodes = [];
 
     for (
diff --git a/packages/csr/test/nav.test.ts b/packages/csr/test/nav.test.ts
index 0ceaaa2f..662485f7 100644
--- a/packages/csr/test/nav.test.ts
+++ b/packages/csr/test/nav.test.ts
@@ -126,3 +126,24 @@ test("unmounts and remounts package runtimes during client navigation", async ()
   expect(mounts).toBe(1);
   expect(win.document.getElementById("app").textContent).toContain("New");
 });
+
+test("synchronizes page styles during client navigation and preserves the current nonce", async () => {
+  install(
+    `<script nonce="current-nonce"></script>` +
+      `<style data-wrnexus-style-id="home" data-wrnexus-style-kind="page" nonce="current-nonce">.page{color:red}</style>` +
+      `<div id="app"><a href="/about" id="lnk">About</a></div>`,
+  );
+  nextHtml =
+    `<html><head>` +
+    `<style data-wrnexus-style-id="about" data-wrnexus-style-owner="About" data-wrnexus-style-kind="page" nonce="response-nonce">.page{color:blue}</style>` +
+    `</head><body><div id="app"><h1 class="page">About</h1></div></body></html>`;
+
+  win.document.getElementById("lnk").click();
+  await flush();
+
+  expect(win.document.querySelector('style[data-wrnexus-style-id="home"]')).toBeNull();
+  const style = win.document.querySelector('style[data-wrnexus-style-id="about"]');
+  expect(style).not.toBeNull();
+  expect(style.textContent).toContain("color:blue");
+  expect(style.getAttribute("nonce")).toBe("current-nonce");
+});
diff --git a/packages/csr/test/reactive.test.ts b/packages/csr/test/reactive.test.ts
index 0c2647ae..df3ffa34 100644
--- a/packages/csr/test/reactive.test.ts
+++ b/packages/csr/test/reactive.test.ts
@@ -333,3 +333,39 @@ test("data-for preserves arrays of objects from encoded component scope", () =>
     "Four",
   ]);
 });
+
+
+test("$emit inside component functions does not depend on a global browser event", () => {
+  const behavior = Buffer.from(
+    JSON.stringify({
+      functions: `
+        function showOverlay(sourceEvent) {
+          visible = true
+          $emit("open", { source: sourceEvent.type })
+        }
+      `,
+      watches: [],
+      lifecycle: {},
+    }),
+  ).toString("base64");
+
+  delete (globalThis as Record<string, unknown>).event;
+
+  const win = mount(
+    `<div data-scope="visible: false" data-wrn-events="open" data-wrn-behavior="${behavior}">
+       <button data-on-click="showOverlay(event)">Open overlay</button>
+       <span>{visible}</span>
+     </div>`,
+  );
+
+  const root = win.document.querySelector("[data-wrn-events]")!;
+  let detail: Record<string, unknown> | undefined;
+  root.addEventListener("open", (event) => {
+    detail = (event as unknown as CustomEvent).detail;
+  });
+
+  win.document.querySelector("button")!.click();
+
+  expect(win.document.querySelector("span")!.textContent).toBe("true");
+  expect(detail).toEqual({ source: "click" });
+});
diff --git a/packages/dev-server/src/assets.ts b/packages/dev-server/src/assets.ts
index 0595fc76..c5bc9821 100644
--- a/packages/dev-server/src/assets.ts
+++ b/packages/dev-server/src/assets.ts
@@ -46,7 +46,9 @@ function jsResponse(code: string): Response {
   return new Response(code, {
     headers: {
       "content-type": "text/javascript; charset=utf-8",
-      "cache-control": "no-cache",
+      "cache-control": "no-store, max-age=0",
+      pragma: "no-cache",
+      expires: "0",
     },
   });
 }
diff --git a/packages/dev-server/src/runtime.ts b/packages/dev-server/src/runtime.ts
index eda0cf36..00a41472 100644
--- a/packages/dev-server/src/runtime.ts
+++ b/packages/dev-server/src/runtime.ts
@@ -607,6 +607,7 @@ export const HMR_CLIENT_JS = `
     var from = document.getElementById("app");
     var to = doc.getElementById("app");
 
+    syncWrnStyles(doc);
     if (from && to) {
       morph(from, to);
     }
@@ -638,6 +639,62 @@ export const HMR_CLIENT_JS = `
     );
   }
 
+  function currentDocumentNonce() {
+    var node = document.querySelector("script[nonce],style[nonce]");
+    if (!node) return "";
+    return node.nonce || node.getAttribute("nonce") || "";
+  }
+
+  function syncWrnStyles(nextDocument) {
+    var current = Array.prototype.slice.call(
+      document.querySelectorAll("style[data-wrnexus-style-id]"),
+    );
+    var next = Array.prototype.slice.call(
+      nextDocument.querySelectorAll("style[data-wrnexus-style-id]"),
+    );
+    var currentById = Object.create(null);
+    var nextIds = Object.create(null);
+    var nonce = currentDocumentNonce();
+
+    current.forEach(function (style) {
+      var id = style.getAttribute("data-wrnexus-style-id");
+      if (id) currentById[id] = style;
+    });
+
+    next.forEach(function (nextStyle) {
+      var id = nextStyle.getAttribute("data-wrnexus-style-id");
+      if (!id) return;
+      nextIds[id] = true;
+
+      var currentStyle = currentById[id];
+      if (!currentStyle) {
+        currentStyle = document.createElement("style");
+        currentStyle.setAttribute("data-wrnexus-style-id", id);
+      }
+
+      ["data-wrnexus-style-owner", "data-wrnexus-style-kind"].forEach(function (name) {
+        var value = nextStyle.getAttribute(name);
+        if (value == null) currentStyle.removeAttribute(name);
+        else currentStyle.setAttribute(name, value);
+      });
+
+      if (nonce) currentStyle.setAttribute("nonce", nonce);
+      if (currentStyle.textContent !== nextStyle.textContent) {
+        currentStyle.textContent = nextStyle.textContent;
+      }
+
+      // Appending an existing node moves it. This keeps every local style after
+      // global stylesheets and in the exact layout -> page -> component order
+      // produced by the incoming SSR document.
+      document.head.appendChild(currentStyle);
+    });
+
+    current.forEach(function (style) {
+      var id = style.getAttribute("data-wrnexus-style-id");
+      if (id && !nextIds[id]) style.remove();
+    });
+  }
+
   // Minimal index-based DOM morph: preserve matching nodes (keeps state/focus),
   // patch text and attributes, clone genuinely new nodes, drop removed ones.
   // Preserve a hydrated subtree only while its server hydration signature and
@@ -1401,6 +1458,7 @@ export function createHandlers(deps: RuntimeDeps): Handlers {
           .join("\n") || undefined,
       htmlAttrs,
       documentTemplate,
+      styleNonce: (ctx.locals.cspNonce as string | undefined) ?? undefined,
     });
     // Conditional GET: hash the page CONTENT (`body`), not the assembled shell —
     // the shell carries a per-request CSP nonce in dev, which would otherwise make
diff --git a/packages/dev-server/test/theme-accent-runtime.test.ts b/packages/dev-server/test/theme-accent-runtime.test.ts
index 4098b857..d1057553 100644
--- a/packages/dev-server/test/theme-accent-runtime.test.ts
+++ b/packages/dev-server/test/theme-accent-runtime.test.ts
@@ -26,3 +26,11 @@ test("HMR preserves the active browser theme and accent", () => {
 
   expect(HMR_CLIENT_JS).toContain('new CustomEvent("wrnexus:hmr-updated"');
 });
+
+test("HMR synchronizes local WRN styles with the current document nonce", () => {
+  expect(HMR_CLIENT_JS).toContain("style[data-wrnexus-style-id]");
+  expect(HMR_CLIENT_JS).toContain("function currentDocumentNonce()");
+  expect(HMR_CLIENT_JS).toContain('currentStyle.setAttribute("nonce", nonce)');
+  expect(HMR_CLIENT_JS).toContain("document.head.appendChild(currentStyle)");
+  expect(HMR_CLIENT_JS).toContain("syncWrnStyles(doc)");
+});
diff --git a/packages/ssr/src/index.ts b/packages/ssr/src/index.ts
index f4824341..5ee7c282 100644
--- a/packages/ssr/src/index.ts
+++ b/packages/ssr/src/index.ts
@@ -41,6 +41,8 @@ export interface RenderOptions {
   defaultTitle?: string;
   /** Raw HTML injected at the end of `<head>` (trusted, framework-controlled). */
   extraHead?: string;
+  /** CSP nonce applied to framework-promoted `.wrn` style blocks. */
+  styleNonce?: string;
   /** Raw HTML injected at the end of `<body>` (trusted, framework-controlled). */
   extraBody?: string;
   /** Attributes for the `<html>` element, e.g. ` data-theme="dark"` (trusted). */
@@ -64,6 +66,11 @@ export function renderDocument(opts: RenderOptions): string {
   const title = escapeHtml(seo.title);
   const scripts = normalizeScripts(opts.scripts ?? []);
 
+  const sourceDocument = opts.documentTemplate?.trim();
+  const extracted = extractWrnexusStyles(sourceDocument ?? opts.body, opts.styleNonce);
+  const renderedBody = sourceDocument ? opts.body : extracted.html;
+  const renderedDocument = sourceDocument ? extracted.html : undefined;
+
   const seoTags = renderSeoTags(seo);
   const preloadTags = scripts
     .filter((script) => (script.type ?? "module") === "module")
@@ -71,15 +78,16 @@ export function renderDocument(opts: RenderOptions): string {
     .join("");
   const scriptTags = scripts.map((script) => `\n    ${renderScriptTag(script)}`).join("");
 
-  const extraHead = opts.extraHead ? `\n    ${opts.extraHead}` : "";
+  const globalHead = opts.extraHead ? `\n    ${opts.extraHead}` : "";
+  const localStyles = extracted.styles ? `\n    ${extracted.styles}` : "";
   const extraBody = opts.extraBody ? `\n    ${opts.extraBody}` : "";
 
   const htmlAttrs = /(?:^|\s)lang\s*=/.test(opts.htmlAttrs ?? "")
     ? (opts.htmlAttrs ?? "")
     : `${opts.htmlAttrs ?? ""} lang="en"`;
 
-  if (opts.documentTemplate) {
-    let document = opts.documentTemplate.trim();
+  if (renderedDocument) {
+    let document = renderedDocument;
     if (!/^<!doctype\s+html>/i.test(document)) document = `<!doctype html>\n${document}`;
     document = document.replace(/<html([^>]*)>/i, (_match, existing: string) => {
       const language = /(?:^|\s)lang\s*=/.test(`${existing}${opts.htmlAttrs ?? ""}`)
@@ -91,8 +99,9 @@ export function renderDocument(opts: RenderOptions): string {
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" href="/favicon.ico" />
-    <title>${title}</title>${seoTags}${preloadTags}${extraHead}`;
+    <title>${title}</title>${seoTags}${preloadTags}${globalHead}`;
     document = document.replace(/<head([^>]*)>/i, `<head$1>${headContent}`);
+    document = appendBeforeClosingTag(document, "head", localStyles);
     document = document.replace(/<\/body>/i, `${scriptTags}${extraBody}\n  </body>`);
     return `${document}\n`;
   }
@@ -103,15 +112,120 @@ export function renderDocument(opts: RenderOptions): string {
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" href="/favicon.ico" />
-    <title>${title}</title>${seoTags}${preloadTags}${extraHead}
+    <title>${title}</title>${seoTags}${preloadTags}${globalHead}${localStyles}
   </head>
   <body>
-    <div id="app">${opts.body}</div>${scriptTags}${extraBody}
+    <div id="app">${renderedBody}</div>${scriptTags}${extraBody}
   </body>
 </html>
 `;
 }
 
+interface ExtractedStyle {
+  id: string;
+  owner: string;
+  kind: "layout" | "page" | "component";
+  css: string;
+  order: number;
+}
+
+interface ExtractedWrnexusStyles {
+  html: string;
+  styles: string;
+}
+
+const WRNEXUS_STYLE_RE = /<style\b([^>]*)>([\s\S]*?)<\/style\s*>/gi;
+
+function appendBeforeClosingTag(document: string, tag: string, html: string): string {
+  if (!html) return document;
+  const closing = new RegExp(`</${tag}\\s*>`, "i");
+  return closing.test(document)
+    ? document.replace(closing, `${html}\n  </${tag}>`)
+    : `${document}${html}`;
+}
+
+function readHtmlAttribute(attributes: string, name: string): string | undefined {
+  const escaped = name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const match = attributes.match(
+    new RegExp(`(?:^|\\s)${escaped}\\s*=\\s*(?:"([^"]*)"|'([^']*)'|([^\\s>]+))`, "i"),
+  );
+  return match?.[1] ?? match?.[2] ?? match?.[3];
+}
+
+function stableStyleHash(value: string): string {
+  let hash = 0x811c9dc5;
+  for (let index = 0; index < value.length; index++) {
+    hash ^= value.charCodeAt(index);
+    hash = Math.imul(hash, 0x01000193);
+  }
+  return (hash >>> 0).toString(36);
+}
+
+function normalizeStyleKind(value: string | undefined): ExtractedStyle["kind"] {
+  return value === "layout" || value === "page" ? value : "component";
+}
+
+function styleKindOrder(kind: ExtractedStyle["kind"]): number {
+  return kind === "layout" ? 0 : kind === "page" ? 1 : 2;
+}
+
+function escapeStyleAttribute(value: string): string {
+  return escapeHtml(value);
+}
+
+/**
+ * Promote compiler-emitted `.wrn` style blocks out of rendered markup and into
+ * the document head. They are emitted after global stylesheets, deduplicated by
+ * stable id, ordered layout -> page -> component, and nonce-tagged for CSP.
+ */
+export function extractWrnexusStyles(html: string, nonce?: string): ExtractedWrnexusStyles {
+  const found: ExtractedStyle[] = [];
+  let sourceOrder = 0;
+
+  const cleaned = html.replace(
+    WRNEXUS_STYLE_RE,
+    (whole: string, attributes: string, css: string) => {
+      const legacyOwner = readHtmlAttribute(attributes, "data-wrnexus-style");
+      const explicitId = readHtmlAttribute(attributes, "data-wrnexus-style-id");
+      if (!legacyOwner && !explicitId) return whole;
+
+      const owner =
+        readHtmlAttribute(attributes, "data-wrnexus-style-owner") ?? legacyOwner ?? "anonymous";
+      const kind = normalizeStyleKind(readHtmlAttribute(attributes, "data-wrnexus-style-kind"));
+      const id = explicitId ?? `wrn-${kind}-${stableStyleHash(`${kind}:${owner}`)}`;
+
+      found.push({ id, owner, kind, css: css.trim(), order: sourceOrder++ });
+      return "";
+    },
+  );
+
+  const byId = new Map<string, ExtractedStyle>();
+  for (const style of found) {
+    const current = byId.get(style.id);
+    if (!current) {
+      byId.set(style.id, style);
+      continue;
+    }
+    // Repeated mounts of one component carry identical CSS. Keep the latest
+    // body only when it differs while preserving the original cascade position.
+    if (current.css !== style.css) byId.set(style.id, { ...style, order: current.order });
+  }
+
+  const nonceAttribute = nonce ? ` nonce="${escapeStyleAttribute(nonce)}"` : "";
+  const styles = [...byId.values()]
+    .sort((left, right) => {
+      const kind = styleKindOrder(left.kind) - styleKindOrder(right.kind);
+      return kind || left.order - right.order;
+    })
+    .map(
+      (style) =>
+        `<style data-wrnexus-style-id="${escapeStyleAttribute(style.id)}" data-wrnexus-style-owner="${escapeStyleAttribute(style.owner)}" data-wrnexus-style-kind="${style.kind}"${nonceAttribute}>\n${style.css.replace(/<\/style/gi, "<\\/style")}\n</style>`,
+    )
+    .join("\n    ");
+
+  return { html: cleaned, styles };
+}
+
 function normalizeScripts(scripts: readonly RenderScript[]): ScriptAsset[] {
   const bySrc = new Map<string, ScriptAsset>();
   for (const script of scripts) {
diff --git a/packages/ssr/test/ssr.test.ts b/packages/ssr/test/ssr.test.ts
index b40d93c8..9d64a58e 100644
--- a/packages/ssr/test/ssr.test.ts
+++ b/packages/ssr/test/ssr.test.ts
@@ -88,3 +88,60 @@ test("renders rich script metadata and deduplicates by source", () => {
   expect(html).toContain('data-wrnexus-runtime-src="captcha"');
   expect(html).not.toContain('rel="modulepreload" href="/__wrnexus/assets/captcha.abc.js"');
 });
+
+test("promotes WRN style blocks into head after global CSS with CSP nonce", () => {
+  const html = renderDocument({
+    meta: { title: "Styled" },
+    extraHead: '<link rel="stylesheet" href="/global.css" />',
+    styleNonce: "nonce-123",
+    body:
+      '<style data-wrnexus-style="Card" data-wrnexus-style-id="card" data-wrnexus-style-kind="component">.shared{color:blue}</style>' +
+      '<style data-wrnexus-style="Page" data-wrnexus-style-id="page" data-wrnexus-style-kind="page">.shared{color:red}</style>' +
+      '<style data-wrnexus-style="Layout" data-wrnexus-style-id="layout" data-wrnexus-style-kind="layout">.shared{color:green}</style>' +
+      '<main class="shared">Styled</main>',
+  });
+
+  expect(html).not.toContain('<div id="app"><style');
+  expect(html).toContain('<main class="shared">Styled</main>');
+  expect(html.match(/data-wrnexus-style-id=/g)).toHaveLength(3);
+  expect(html.match(/nonce="nonce-123"/g)).toHaveLength(3);
+
+  const globalIndex = html.indexOf("/global.css");
+  const layoutIndex = html.indexOf('data-wrnexus-style-id="layout"');
+  const pageIndex = html.indexOf('data-wrnexus-style-id="page"');
+  const componentIndex = html.indexOf('data-wrnexus-style-id="card"');
+  expect(globalIndex).toBeLessThan(layoutIndex);
+  expect(layoutIndex).toBeLessThan(pageIndex);
+  expect(pageIndex).toBeLessThan(componentIndex);
+});
+
+test("deduplicates repeated component style blocks", () => {
+  const style =
+    '<style data-wrnexus-style="Card" data-wrnexus-style-id="card" data-wrnexus-style-kind="component">.card{display:grid}</style>';
+  const html = renderDocument({
+    meta: { title: "Repeated" },
+    body: `${style}<article>One</article>${style}<article>Two</article>`,
+  });
+
+  expect(html.match(/data-wrnexus-style-id="card"/g)).toHaveLength(1);
+  expect(html).toContain("<article>One</article><article>Two</article>");
+});
+
+test("places document-layout WRN styles at the end of head", () => {
+  const html = renderDocument({
+    meta: { title: "Document styles" },
+    styleNonce: "document-nonce",
+    body: "",
+    documentTemplate:
+      '<html><head><link rel="stylesheet" href="/document-global.css" /></head><body>' +
+      '<style data-wrnexus-style="Document" data-wrnexus-style-id="document-layout" data-wrnexus-style-kind="layout">.shell{display:block}</style>' +
+      '<div id="app" class="shell">Page</div></body></html>',
+  });
+
+  const globalIndex = html.indexOf("/document-global.css");
+  const styleIndex = html.indexOf('data-wrnexus-style-id="document-layout"');
+  const headEnd = html.indexOf("</head>");
+  expect(globalIndex).toBeLessThan(styleIndex);
+  expect(styleIndex).toBeLessThan(headEnd);
+  expect(html).not.toContain("<body><style");
+});
diff --git a/packages/ui/COMPONENTS.md b/packages/ui/COMPONENTS.md
index b1a26d5f..53a2f9ab 100644
--- a/packages/ui/COMPONENTS.md
+++ b/packages/ui/COMPONENTS.md
@@ -49,15 +49,6 @@ Secure multi-cell PIN and verification-code input with regex and paste support.
 - Slots: None
 - Events: `input`, `change`, `complete`, `paste`, `clear`, `error`
 
-### SearchBox
-
-Theme-aware, responsive search box component.
-
-- Mount: `data-component="SearchBox"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Search Box"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "search"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
-- Slots: None
-- Events: None
-
 ### StrongPassword
 
 Theme-aware, responsive strong password component.
@@ -161,7 +152,7 @@ Theme-aware, responsive button group component.
 
 ### Card
 
-Theme-aware, responsive card component.
+Group related content in a responsive themed surface with title, description, content, and supporting slots.
 
 - Mount: `data-component="Card"`
 - Props: `title: string = "Card title"`, `subtitle: string = ""`, `description: string = ""`, `header: string = ""`, `footer: string = ""`, `imageSrc: string = ""`, `imageAlt: string = ""`, `imagePosition: string = "top"`, `actionLabel: string = ""`, `actionHref: string = ""`, `headerActions: string = []`, `navigation: string = []`, `activeNav: string = ""`, `mobileNavigation: boolean = false`, `alertTitle: string = ""`, `alertDescription: string = ""`, `empty: boolean = false`, `emptyTitle: string = "No data to show"`, `emptyIcon: string = "icon-[lucide--inbox]"`, `items: string = []`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "default"`, `layout: string = "vertical"`, `align: string = "left"`, `hover: string = "none"`, `scrollable: boolean = false`, `maxHeight: string = "18rem"`, `dismissible: boolean = false`, `ariaLabel: string = ""`, `class: string = ""`
@@ -222,15 +213,6 @@ Theme-aware, responsive file upload progress component.
 - Slots: None
 - Events: `cancel`, `retry`, `complete`
 
-### HeroActions
-
-Responsive action group for hero and call-to-action sections.
-
-- Mount: `data-component="HeroActions"`
-- Props: `actions: string = []`, `align: string = "left"`, `orientation: string = "horizontal"`, `stackOnMobile: boolean = true`, `fullWidthMobile: boolean = true`, `size: string = "default"`, `color: string = "primary"`, `class: string = ""`
-- Slots: `default`
-- Events: None
-
 ### LegendIndicator
 
 Theme-aware, responsive legend indicator component.
@@ -242,7 +224,7 @@ Theme-aware, responsive legend indicator component.
 
 ### List
 
-Theme-aware, responsive list component.
+Present structured responsive linked or status items with icons, descriptions, actions, and selection events.
 
 - Mount: `data-component="List"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "List"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
@@ -260,7 +242,7 @@ Theme-aware, responsive list group component.
 
 ### Marquee
 
-Theme-aware, responsive marquee component.
+Continuously present responsive labels, partners, notices, or capabilities with pause and resume behavior.
 
 - Mount: `data-component="Marquee"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Marquee"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
@@ -314,7 +296,7 @@ Theme-aware, responsive styled icon component.
 
 ### Timeline
 
-Theme-aware, responsive timeline component.
+Present responsive chronological activity, milestones, or workflow status with rich item metadata.
 
 - Mount: `data-component="Timeline"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Timeline"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
@@ -339,101 +321,67 @@ Theme-aware, responsive tree view component.
 - Slots: `default`
 - Events: `select`, `toggle`, `expand`, `collapse`
 
-## Blocks
+## Core
 
-### AnnouncementBar
+### AuthForm
 
-Accessible public announcement, emergency, maintenance, or status bar.
+Reusable auth form component.
 
-- Mount: `data-component="AnnouncementBar"`
-- Props: `badge: string = ""`, `badgeIcon: string = ""`, `message: string = "Announcement"`, `description: string = ""`, `icon: string = "icon-[lucide--megaphone]"`, `actionLabel: string = ""`, `actionHref: string = ""`, `actionIcon: string = ""`, `dismissible: boolean = false`, `dismissLabel: string = "Dismiss announcement"`, `sticky: boolean = false`, `compact: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "soft"`, `role: string = "status"`, `live: string = "polite"`, `class: string = ""`
-- Slots: None
-- Events: None
+- Mount: `data-component="AuthForm"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `mode: string = "sign-in"`, `action: string = "/api/auth/login"`, `method: string = "post"`, `title: string = "Sign in"`, `description: string = ""`, `returnTo: string = ""`, `schema: string = ""`, `showRemember: boolean = true`, `showName: boolean = true`, `submitLabel: string = "Continue"`, `class: string = ""`
+- Slots: `default`
+- Events: `submit`, `change`, `input`, `focus`, `blur`
 
-### CTASection
+### AuthSplitLayout
 
-Reusable closing call-to-action section with primary and secondary actions.
+Reusable auth split layout component.
 
-- Mount: `data-component="CTASection"`
-- Props: `eyebrow: string = ""`, `title: string = "Ready to get started?"`, `description: string = ""`, `icon: string = ""`, `align: string = "center"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "solid"`, `primaryLabel: string = "Get started"`, `primaryHref: string = "#"`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `backgroundImage: string = ""`, `maxWidth: string = "xl"`, `class: string = ""`
-- Slots: `default`, `actions`, `visual`, `footer`
-- Events: None
-
-### FeatureCard
-
-Reusable linked feature or service card with icon, badge, description, and action.
-
-- Mount: `data-component="FeatureCard"`
-- Props: `icon: string = ""`, `title: string = "Feature"`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Learn more"`, `actionIcon: string = ""`, `badge: string = ""`, `badgeColor: string = "primary"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `hover: string = "lift"`, `align: string = "left"`, `disabled: boolean = false`, `class: string = ""`
-- Slots: `icon`, `default`, `footer`
-- Events: None
-
-### FeatureIconCard
-
-Feature card with a prominent themed icon treatment.
-
-- Mount: `data-component="FeatureIconCard"`
-- Props: `icon: string = "icon-[lucide--sparkles]"`, `iconSize: string = "md"`, `iconVariant: string = "soft"`, `title: string = "Feature"`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Explore"`, `badge: string = ""`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `align: string = "left"`, `hover: string = "lift"`, `class: string = ""`
-- Slots: `default`, `footer`
-- Events: None
-
-### Hero
-
-Reusable public-page hero with actions, trust items, badges, and visual slots.
-
-- Mount: `data-component="Hero"`
-- Props: `eyebrow: string = ""`, `title: string = "Build something remarkable"`, `highlight: string = ""`, `description: string = ""`, `align: string = "left"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `tertiaryLabel: string = ""`, `tertiaryHref: string = ""`, `badges: string = []`, `trustItems: string = []`, `maxWidth: string = "xl"`, `class: string = ""`
-- Slots: `eyebrow`, `actions`, `trust`, `default`, `visual`, `footer`
-- Events: None
-
-### MarketingSectionHeader
-
-Marketing section heading with an optional linked action.
-
-- Mount: `data-component="MarketingSectionHeader"`
-- Props: `id: string = ""`, `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "split"`, `size: string = "default"`, `color: string = "primary"`, `actionLabel: string = ""`, `actionHref: string = ""`, `actionIcon: string = ""`, `actionExternal: boolean = false`, `class: string = ""`
-- Slots: `icon`, `actions`, `default`
-- Events: None
-
-### MetricCard
-
-Single statistic or operational metric with icon, trend, and optional action.
-
-- Mount: `data-component="MetricCard"`
-- Props: `label: string = "Metric"`, `value: string = "0"`, `description: string = ""`, `icon: string = ""`, `prefix: string = ""`, `suffix: string = ""`, `trend: string = ""`, `trendLabel: string = ""`, `trendDirection: string = "neutral"`, `href: string = ""`, `actionLabel: string = ""`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `align: string = "left"`, `class: string = ""`
-- Slots: None
-- Events: None
-
-### PageHeader
-
-Public and application page header with breadcrumbs, metadata, and actions.
-
-- Mount: `data-component="PageHeader"`
-- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `icon: string = ""`, `align: string = "left"`, `size: string = "default"`, `compact: boolean = false`, `showBreadcrumbs: boolean = false`, `breadcrumbs: string = []`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `color: string = "primary"`, `variant: string = "default"`, `class: string = ""`
-- Slots: `meta`, `actions`, `default`
+- Mount: `data-component="AuthSplitLayout"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `eyebrow: string = "Secure identity"`, `title: string = "Welcome back"`, `description: string = ""`, `brand: string = "Police Management System"`, `features: string = []`, `class: string = ""`
+- Slots: `aside-extra`, `form`
 - Events: None
 
 ### PortalDashboard
 
-Responsive portal dashboard with metrics, actions, tasks, and updates.
+Reusable portal dashboard component.
 
 - Mount: `data-component="PortalDashboard"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `eyebrow: string = "Overview"`, `eyebrowKey: string = ""`, `title: string = "Dashboard"`, `titleKey: string = ""`, `description: string = ""`, `descriptionKey: string = ""`, `userName: string = ""`, `metrics: string = []`, `actions: string = []`, `updates: string = []`, `tasks: string = []`, `class: string = ""`
 - Slots: `hero-action`
 - Events: `action`, `navigate`
 
-### SplitHero
+### PreferenceSwitcher
 
-Two-column hero with configurable content and visual placement.
+Reusable preference switcher component.
 
-- Mount: `data-component="SplitHero"`
-- Props: `eyebrow: string = ""`, `title: string = "A better digital experience"`, `highlight: string = ""`, `description: string = ""`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `visualPosition: string = "right"`, `reverse: boolean = false`, `ratio: string = "balanced"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `trustItems: string = []`, `class: string = ""`
-- Slots: `actions`, `trust`, `default`, `visual`
-- Events: None
+- Mount: `data-component="PreferenceSwitcher"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `themeLabel: string = "Theme"`, `colorLabel: string = "Accent color"`, `languageLabel: string = "Language"`, `languages: string = [`, `colors: string = [`, `compact: boolean = true`, `class: string = ""`
+- Slots: None
+- Events: `theme`, `color`, `language`
+
+## Data
+
+### MetricCard
+
+Display one operational metric with value, suffix, description, icon, trend, progress, and optional action.
+
+- Mount: `data-component="MetricCard"`
+- Props: `label: string = "Metric"`, `value: string = "0"`, `description: string = ""`, `icon: string = ""`, `iconStyle: string = "soft"`, `prefix: string = ""`, `suffix: string = ""`, `badge: string = ""`, `trend: string = ""`, `trendLabel: string = ""`, `trendDirection: string = "neutral"`, `progress: number = -1`, `progressLabel: string = ""`, `href: string = ""`, `target: string = ""`, `rel: string = ""`, `external: boolean = false`, `actionLabel: string = ""`, `actionIcon: string = ""`, `showArrow: boolean = true`, `selectable: boolean = false`, `disabled: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `hover: string = "lift"`, `align: string = "left"`, `class: string = ""`
+- Slots: `default`, `footer`
+- Events: `select`, `action`
+
+### MetricGrid
+
+Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.
+
+- Mount: `data-component="MetricGrid"`
+- Props: `items: string = []`, `columns: number = 4`, `tabletColumns: number = 2`, `mobileColumns: number = 1`, `gap: string = "md"`, `equalHeight: boolean = true`, `dividers: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `maxWidth: string = "full"`, `minItemWidth: string = ""`, `class: string = ""`
+- Slots: `default`
+- Events: `select`, `action`
 
 ### StatsBar
 
-Compact responsive statistics strip.
+Present a compact responsive strip of key facts, counts, performance indicators, or trust signals.
 
 - Mount: `data-component="StatsBar"`
 - Props: `items: string = []`, `columns: number = 4`, `compact: boolean = true`, `dividers: boolean = true`, `icons: boolean = true`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "raised"`, `maxWidth: string = "xl"`, `class: string = ""`
@@ -442,15 +390,6 @@ Compact responsive statistics strip.
 
 ## Forms
 
-### AuthForm
-
-Reusable authentication form for sign-in, registration, recovery, reset, and MFA.
-
-- Mount: `data-component="AuthForm"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `mode: string = "sign-in"`, `action: string = "/api/auth/login"`, `method: string = "post"`, `title: string = "Sign in"`, `description: string = ""`, `returnTo: string = ""`, `schema: string = ""`, `showRemember: boolean = true`, `showName: boolean = true`, `submitLabel: string = "Continue"`, `class: string = ""`
-- Slots: `default`
-- Events: `submit`, `change`, `input`, `focus`, `blur`
-
 ### Checkbox
 
 Theme-aware, responsive checkbox component.
@@ -514,6 +453,15 @@ Theme-aware, responsive range slider component.
 - Slots: None
 - Events: `input`, `change`, `focus`, `blur`
 
+### SearchBox
+
+Provide an accessible responsive search field with labels, validation states, sizes, and input or change events.
+
+- Mount: `data-component="SearchBox"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Search Box"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "search"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
+- Slots: None
+- Events: None
+
 ### Select
 
 Theme-aware, responsive select component.
@@ -635,7 +583,7 @@ Theme-aware, responsive file upload component.
 
 ### Map
 
-Theme-aware, responsive map component.
+Present responsive location information and markers with map-ready metadata and movement or marker events.
 
 - Mount: `data-component="Map"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Map"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
@@ -662,18 +610,9 @@ Theme-aware, responsive wysiwyg editor component.
 
 ## Layout
 
-### AuthSplitLayout
-
-Responsive 50/50 authentication layout with content and form regions.
-
-- Mount: `data-component="AuthSplitLayout"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `eyebrow: string = "Secure identity"`, `title: string = "Welcome back"`, `description: string = ""`, `brand: string = "Police Management System"`, `features: string = []`, `class: string = ""`
-- Slots: `aside-extra`, `form`
-- Events: None
-
 ### Columns
 
-Theme-aware, responsive columns component.
+Create responsive balanced content columns with configurable count, gap, density, and maximum width.
 
 - Mount: `data-component="Columns"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""`
@@ -682,7 +621,7 @@ Theme-aware, responsive columns component.
 
 ### Container
 
-Theme-aware, responsive container component.
+Constrain and align page content with responsive gutters and compact, wide, or full width options.
 
 - Mount: `data-component="Container"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""`
@@ -700,7 +639,7 @@ Theme-aware, responsive custom scrollbar component.
 
 ### Divider
 
-Theme-aware, responsive divider component.
+Separate related horizontal or vertical content with optional labels, sizes, and semantic colors.
 
 - Mount: `data-component="Divider"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
@@ -709,16 +648,25 @@ Theme-aware, responsive divider component.
 
 ### FeatureGrid
 
-Responsive equal-height grid for feature and service cards.
+Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.
 
 - Mount: `data-component="FeatureGrid"`
-- Props: `color: string = "primary"`, `size: string = "default"`, `columns: number = 3`, `tabletColumns: number = 2`, `mobileColumns: number = 1`, `gap: string = "md"`, `minItemWidth: string = ""`, `equalHeight: boolean = true`, `align: string = "stretch"`, `maxWidth: string = "full"`, `class: string = ""`
+- Props: `items: string = []`, `columns: number = 3`, `tabletColumns: number = 2`, `mobileColumns: number = 1`, `gap: string = "md"`, `minItemWidth: string = ""`, `equalHeight: boolean = true`, `align: string = "stretch"`, `maxWidth: string = "full"`, `variant: string = "default"`, `label: string = "Features"`, `class: string = ""`
 - Slots: `default`
 - Events: None
 
+### Footer
+
+Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.
+
+- Mount: `data-component="Footer"`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Footer navigation"`, `items: string = []`, `columns: number = 3`, `maxWidth: string = "compact"`, `copyright: string = ""`, `class: string = ""`
+- Slots: `pre-footer`, `post-footer`, `copyright-left`, `copyright-right`
+- Events: `select`, `action`
+
 ### Grid
 
-Theme-aware, responsive grid component.
+Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width.
 
 - Mount: `data-component="Grid"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""`
@@ -727,7 +675,7 @@ Theme-aware, responsive grid component.
 
 ### Image
 
-Theme-aware, responsive image component.
+Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment.
 
 - Mount: `data-component="Image"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `src: string = ""`, `alt: string = ""`, `width: string = ""`, `height: string = ""`, `loading: string = "lazy"`, `rounded: boolean = false`, `class: string = ""`
@@ -754,25 +702,16 @@ Theme-aware, responsive layout splitter component.
 
 ### Link
 
-Theme-aware, responsive link component.
+Render an accessible internal or external link with target, relation, size, color, and public focus or click events.
 
 - Mount: `data-component="Link"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Link"`, `href: string = "#"`, `target: string = ""`, `rel: string = ""`, `external: boolean = false`, `class: string = ""`
 - Slots: `default`
 - Events: None
 
-### MetricGrid
-
-Responsive collection of metric cards.
-
-- Mount: `data-component="MetricGrid"`
-- Props: `items: string = []`, `columns: number = 4`, `tabletColumns: number = 2`, `mobileColumns: number = 1`, `gap: string = "md"`, `equalHeight: boolean = true`, `dividers: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `class: string = ""`
-- Slots: `default`
-- Events: None
-
 ### PublicPageShell
 
-Consistent structural wrapper for public-facing pages.
+Provide the outer responsive structure, width, background, slots, overflow, and minimum-height behavior for public pages.
 
 - Mount: `data-component="PublicPageShell"`
 - Props: `maxWidth: string = "full"`, `fullWidth: boolean = true`, `headerOffset: string = "none"`, `background: string = "default"`, `overflow: string = "clip"`, `minHeight: string = "screen"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `class: string = ""`
@@ -781,7 +720,7 @@ Consistent structural wrapper for public-facing pages.
 
 ### Section
 
-Theme-aware page section with consistent spacing, width, background, and border controls.
+Create a responsive themed page section with controlled spacing, width, borders, and surface treatment.
 
 - Mount: `data-component="Section"`
 - Props: `id: string = ""`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `spacing: string = "lg"`, `maxWidth: string = "xl"`, `fullWidth: boolean = false`, `borderTop: boolean = false`, `borderBottom: boolean = false`, `class: string = ""`
@@ -790,59 +729,133 @@ Theme-aware page section with consistent spacing, width, background, and border
 
 ### SectionHeader
 
-Reusable accessible section heading with eyebrow, title, description, icon, and actions.
+Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.
 
 - Mount: `data-component="SectionHeader"`
 - Props: `id: string = ""`, `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "left"`, `size: string = "default"`, `color: string = "primary"`, `headingLevel: number = 2`, `maxWidth: string = "3xl"`, `class: string = ""`
 - Slots: `icon`, `default`, `actions`
 - Events: None
 
-### TextLink
-
-Styled inline action link with icons, arrows, external state, and disabled handling.
-
-- Mount: `data-component="TextLink"`
-- Props: `label: string = "Learn more"`, `href: string = "#"`, `target: string = ""`, `rel: string = ""`, `external: boolean = false`, `icon: string = ""`, `iconPosition: string = "start"`, `showArrow: boolean = true`, `underline: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `disabled: boolean = false`, `class: string = ""`
-- Slots: None
-- Events: `click`, `focus`, `blur`
-
 ### Typography
 
-Theme-aware, responsive typography component.
+Apply consistent readable responsive typography, widths, columns, spacing, and editorial hierarchy.
 
 - Mount: `data-component="Typography"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""`
 - Slots: `default`
 - Events: None
 
+## Marketing
+
+### AnnouncementBar
+
+Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.
+
+- Mount: `data-component="AnnouncementBar"`
+- Props: `badge: string = ""`, `badgeIcon: string = ""`, `message: string = "Announcement"`, `description: string = ""`, `icon: string = "icon-[lucide--megaphone]"`, `actionLabel: string = ""`, `actionHref: string = ""`, `actionIcon: string = ""`, `dismissible: boolean = false`, `dismissLabel: string = "Dismiss announcement"`, `sticky: boolean = false`, `compact: boolean = false`, `size: string = "default"`, `width: string = "default"`, `color: string = "primary"`, `variant: string = "soft"`, `role: string = "status"`, `live: string = "polite"`, `class: string = ""`
+- Slots: None
+- Events: `dismiss`
+
+### CTASection
+
+Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.
+
+- Mount: `data-component="CTASection"`
+- Props: `eyebrow: string = ""`, `title: string = "Ready to get started?"`, `description: string = ""`, `icon: string = ""`, `align: string = "center"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "solid"`, `primaryLabel: string = "Get started"`, `primaryHref: string = "#"`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `backgroundImage: string = ""`, `visualImage: string = ""`, `visualAlt: string = ""`, `visualIcon: string = ""`, `visualTitle: string = ""`, `visualDescription: string = ""`, `visualItems: string = []`, `visualPosition: string = "right"`, `maxWidth: string = "xl"`, `fullBleed: boolean = false`, `class: string = ""`
+- Slots: `default`, `actions`, `visual`, `footer`
+- Events: None
+
+### FeatureCard
+
+Present one linked feature or service with media, icon, badge, description, and action.
+
+- Mount: `data-component="FeatureCard"`
+- Props: `icon: string = ""`, `iconStyle: string = "soft"`, `iconSize: string = "default"`, `eyebrow: string = ""`, `title: string = "Feature"`, `description: string = ""`, `image: string = ""`, `imageAlt: string = ""`, `imagePosition: string = "top"`, `imageAspect: string = "wide"`, `imageLoading: string = "lazy"`, `href: string = ""`, `target: string = ""`, `rel: string = ""`, `external: boolean = false`, `actionLabel: string = "Learn more"`, `actionIcon: string = ""`, `showArrow: boolean = true`, `stretchedLink: boolean = true`, `badge: string = ""`, `badgeColor: string = "primary"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `hover: string = "lift"`, `align: string = "left"`, `disabled: boolean = false`, `class: string = ""`
+- Slots: `media`, `icon`, `default`, `footer`
+- Events: None
+
+### FeatureIconCard
+
+Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.
+
+- Mount: `data-component="FeatureIconCard"`
+- Props: `icon: string = "icon-[lucide--sparkles]"`, `iconSize: string = "md"`, `iconVariant: string = "soft"`, `title: string = "Feature"`, `description: string = ""`, `href: string = ""`, `actionLabel: string = "Explore"`, `badge: string = ""`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `align: string = "left"`, `hover: string = "lift"`, `class: string = ""`
+- Slots: `default`, `footer`
+- Events: None
+
+### Hero
+
+Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel.
+
+- Mount: `data-component="Hero"`
+- Props: `eyebrow: string = ""`, `eyebrowIcon: string = ""`, `icon: string = ""`, `title: string = "Build something remarkable"`, `highlight: string = ""`, `description: string = ""`, `align: string = "left"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `layout: string = "split"`, `visualPosition: string = "right"`, `visualStyle: string = "plain"`, `showDecorations: boolean = true`, `fullBleed: boolean = true`, `visualEyebrow: string = ""`, `visualTitle: string = ""`, `visualDescription: string = ""`, `visualIcon: string = ""`, `visualImage: string = ""`, `visualAlt: string = ""`, `visualItems: string = []`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `primaryTarget: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `secondaryTarget: string = ""`, `tertiaryLabel: string = ""`, `tertiaryHref: string = ""`, `tertiaryIcon: string = ""`, `tertiaryTarget: string = ""`, `badges: string = []`, `trustItems: string = []`, `maxWidth: string = "xl"`, `class: string = ""`
+- Slots: `eyebrow`, `actions`, `trust`, `default`, `visual`, `footer`
+- Events: None
+
+### HeroActions
+
+Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.
+
+- Mount: `data-component="HeroActions"`
+- Props: `actions: string = []`, `align: string = "left"`, `orientation: string = "horizontal"`, `stackOnMobile: boolean = true`, `fullWidthMobile: boolean = true`, `size: string = "default"`, `color: string = "primary"`, `class: string = ""`
+- Slots: `default`
+- Events: None
+
+### MarketingSectionHeader
+
+Introduce marketing content with an eyebrow, title, description, and optional linked action.
+
+- Mount: `data-component="MarketingSectionHeader"`
+- Props: `id: string = ""`, `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `align: string = "split"`, `size: string = "default"`, `color: string = "primary"`, `actionLabel: string = ""`, `actionHref: string = ""`, `actionIcon: string = ""`, `actionExternal: boolean = false`, `class: string = ""`
+- Slots: `icon`, `actions`, `default`
+- Events: None
+
+### PageHeader
+
+Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.
+
+- Mount: `data-component="PageHeader"`
+- Props: `eyebrow: string = ""`, `title: string = ""`, `description: string = ""`, `icon: string = ""`, `id: string = "page-title"`, `align: string = "left"`, `centered: boolean = false`, `compact: boolean = false`, `size: string = "default"`, `maxWidth: string = "xl"`, `showBreadcrumbs: boolean = false`, `breadcrumbs: string = []`, `breadcrumbParent: string = ""`, `breadcrumbParentHref: string = ""`, `breadcrumbCurrent: string = ""`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `color: string = "primary"`, `variant: string = "default"`, `borderBottom: boolean = true`, `class: string = ""`
+- Slots: `meta`, `actions`, `default`
+- Events: None
+
+### SplitHero
+
+Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel.
+
+- Mount: `data-component="SplitHero"`
+- Props: `eyebrow: string = ""`, `eyebrowIcon: string = "icon-[lucide--sparkles]"`, `title: string = "A better digital experience"`, `highlight: string = ""`, `description: string = ""`, `primaryLabel: string = ""`, `primaryHref: string = ""`, `primaryIcon: string = ""`, `secondaryLabel: string = ""`, `secondaryHref: string = ""`, `secondaryIcon: string = ""`, `visualPosition: string = "right"`, `reverse: boolean = false`, `ratio: string = "balanced"`, `align: string = "left"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `maxWidth: string = "xl"`, `fullBleed: boolean = true`, `backgroundImage: string = ""`, `visualImage: string = ""`, `visualAlt: string = ""`, `visualIcon: string = ""`, `visualEyebrow: string = ""`, `visualTitle: string = ""`, `visualDescription: string = ""`, `visualItems: string = []`, `visualStyle: string = "panel"`, `trustItems: string = []`, `class: string = ""`
+- Slots: `default`, `actions`, `trust`, `visual`
+- Events: None
+
+### TextLink
+
+Render an accessible text action with optional icon, arrow, underline, external state, and semantic styling.
+
+- Mount: `data-component="TextLink"`
+- Props: `label: string = "Learn more"`, `href: string = "#"`, `target: string = ""`, `rel: string = ""`, `external: boolean = false`, `icon: string = ""`, `iconPosition: string = "start"`, `showArrow: boolean = true`, `underline: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `disabled: boolean = false`, `class: string = ""`
+- Slots: None
+- Events: `click`, `focus`, `blur`
+
 ## Navigation
 
 ### BackToTop
 
-Accessible scroll-to-top control with visibility threshold.
+Provide a responsive floating control that returns long pages to the top and can show scroll progress.
 
 - Mount: `data-component="BackToTop"`
-- Props: `threshold: number = 500`, `label: string = "Back to top"`, `ariaLabel: string = "Scroll back to top"`, `icon: string = "icon-[lucide--arrow-up]"`, `position: string = "right"`, `offset: string = "md"`, `behavior: string = "smooth"`, `showProgress: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "solid"`, `class: string = ""`
+- Props: `threshold: number = 500`, `label: string = "Back to top"`, `ariaLabel: string = "Scroll back to top"`, `icon: string = "icon-[lucide--arrow-up]"`, `position: string = "right"`, `offset: string = "md"`, `behavior: string = "smooth"`, `showProgress: boolean = false`, `showLabel: boolean = false`, `alwaysVisible: boolean = false`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "solid"`, `shape: string = "round"`, `class: string = ""`
 - Slots: None
 - Events: None
 
 ### Breadcrumb
 
-Theme-aware, responsive breadcrumb component.
+Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events.
 
 - Mount: `data-component="Breadcrumb"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Breadcrumb"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
-- Slots: `default`
-- Events: `navigate`, `click`
-
-### Footer
-
-Responsive application footer with structured links and pre/post content slots.
-
-- Mount: `data-component="Footer"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Footer navigation"`, `items: string = []`, `columns: number = 3`, `maxWidth: string = "compact"`, `copyright: string = ""`, `class: string = ""`
-- Slots: `pre-footer`, `post-footer`, `copyright-left`, `copyright-right`
-- Events: `select`, `action`
+- Props: `label: string = "Breadcrumb"`, `items: string = []`, `active: string = ""`, `separator: string = "chevron"`, `showHome: boolean = false`, `homeLabel: string = "Home"`, `homeHref: string = "/"`, `homeIcon: string = "icon-[lucide--house]"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "minimal"`, `class: string = ""`
+- Slots: None
+- Events: `select`
 
 ### MegaMenu
 
@@ -880,15 +893,6 @@ Theme-aware, responsive pagination component.
 - Slots: `default`
 - Events: `change`, `previous`, `next`
 
-### PreferenceSwitcher
-
-Accessible theme, accent color, and language preference controls.
-
-- Mount: `data-component="PreferenceSwitcher"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `themeLabel: string = "Theme"`, `colorLabel: string = "Accent color"`, `languageLabel: string = "Language"`, `languages: string = [`, `colors: string = [`, `compact: boolean = true`, `class: string = ""`
-- Slots: None
-- Events: `theme`, `color`, `language`
-
 ### Scrollspy
 
 Theme-aware, responsive scrollspy component.
@@ -918,7 +922,7 @@ Theme-aware, responsive stepper component.
 
 ### Tabs
 
-Theme-aware, responsive tabs component.
+Switch between related responsive content panels with horizontal or vertical orientation and selection events.
 
 - Mount: `data-component="Tabs"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Tabs"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
@@ -929,57 +933,57 @@ Theme-aware, responsive tabs component.
 
 ### ContextMenu
 
-Theme-aware, responsive context menu component.
+Open an accessible keyboard-aware action menu from pointer or keyboard context interactions.
 
 - Mount: `data-component="ContextMenu"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Context Menu"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""`
-- Slots: `default`
-- Events: `open`, `close`, `select`
+- Props: `items: string = []`, `open: boolean = false`, `defaultOpen: boolean = false`, `trigger: string = "contextmenu"`, `placement: string = "pointer"`, `align: string = "start"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "raised"`, `title: string = ""`, `description: string = ""`, `label: string = "Context menu"`, `closeOnSelect: boolean = true`, `closeOnOutside: boolean = true`, `disabled: boolean = false`, `minWidth: string = "14rem"`, `maxWidth: string = "20rem"`, `class: string = ""`
+- Slots: `trigger`, `header`, `default`, `footer`
+- Events: `open`, `close`, `select`, `action`
 
 ### Drawer
 
-Theme-aware, responsive drawer component.
+Present responsive modal side or bottom content with focus management, backdrop behavior, slots, and close events.
 
 - Mount: `data-component="Drawer"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Drawer"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""`
-- Slots: `default`
-- Events: `open`, `close`
+- Props: `open: boolean = false`, `defaultOpen: boolean = false`, `placement: string = "right"`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "default"`, `title: string = "Drawer"`, `description: string = ""`, `icon: string = ""`, `label: string = "Drawer"`, `closeLabel: string = "Close drawer"`, `showClose: boolean = true`, `closeOnBackdrop: boolean = true`, `closeOnEscape: boolean = true`, `overlay: boolean = true`, `scrollable: boolean = true`, `triggerLabel: string = ""`, `triggerIcon: string = ""`, `class: string = ""`
+- Slots: `trigger`, `header`, `default`, `footer`
+- Events: `open`, `close`, `cancel`
 
 ### Dropdown
 
-Theme-aware, responsive dropdown component.
+Open an accessible anchored menu with keyboard navigation, item selection, actions, and responsive placement.
 
 - Mount: `data-component="Dropdown"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Open menu"`, `items: string = []`, `placement: string = "end"`, `class: string = ""`
-- Slots: `trigger`, `header`, `footer`
-- Events: `toggle`, `open`, `close`, `select`
+- Props: `items: string = []`, `open: boolean = false`, `defaultOpen: boolean = false`, `label: string = "Open menu"`, `icon: string = ""`, `showChevron: boolean = true`, `menuLabel: string = "Dropdown menu"`, `placement: string = "bottom-start"`, `width: string = "md"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "raised"`, `closeOnSelect: boolean = true`, `closeOnOutside: boolean = true`, `disabled: boolean = false`, `emptyLabel: string = "No menu items"`, `class: string = ""`
+- Slots: `trigger`, `header`, `default`, `footer`
+- Events: `toggle`, `open`, `close`, `select`, `action`
 
 ### Modal
 
-Theme-aware, responsive modal component.
+Present an accessible modal dialog with focus management, confirmation, cancellation, slots, and responsive sizing.
 
 - Mount: `data-component="Modal"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Modal"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""`
-- Slots: `default`
+- Props: `open: boolean = false`, `defaultOpen: boolean = false`, `title: string = "Modal"`, `description: string = ""`, `icon: string = ""`, `label: string = "Modal dialog"`, `size: string = "md"`, `placement: string = "center"`, `color: string = "primary"`, `variant: string = "default"`, `showClose: boolean = true`, `closeLabel: string = "Close modal"`, `closeOnBackdrop: boolean = true`, `closeOnEscape: boolean = true`, `closeOnCancel: boolean = true`, `closeOnConfirm: boolean = false`, `showFooter: boolean = true`, `cancelLabel: string = "Cancel"`, `cancelIcon: string = ""`, `confirmLabel: string = "Confirm"`, `confirmIcon: string = ""`, `confirmDisabled: boolean = false`, `confirmLoading: boolean = false`, `destructive: boolean = false`, `triggerLabel: string = ""`, `triggerIcon: string = ""`, `scrollable: boolean = true`, `class: string = ""`
+- Slots: `trigger`, `header`, `default`, `footer`
 - Events: `open`, `close`, `cancel`, `confirm`
 
 ### Popover
 
-Theme-aware, responsive popover component.
+Display anchored supporting content with configurable trigger, placement, responsive sizing, and open or close events.
 
 - Mount: `data-component="Popover"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Popover"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""`
-- Slots: `default`
-- Events: `open`, `close`
+- Props: `open: boolean = false`, `defaultOpen: boolean = false`, `triggerLabel: string = "Open popover"`, `triggerIcon: string = ""`, `title: string = ""`, `description: string = ""`, `icon: string = ""`, `placement: string = "bottom-start"`, `width: string = "md"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "raised"`, `showArrow: boolean = true`, `showClose: boolean = false`, `closeLabel: string = "Close popover"`, `closeOnOutside: boolean = true`, `closeOnEscape: boolean = true`, `actionLabel: string = ""`, `actionHref: string = ""`, `actionIcon: string = ""`, `closeOnAction: boolean = true`, `disabled: boolean = false`, `class: string = ""`
+- Slots: `trigger`, `header`, `default`, `footer`
+- Events: `toggle`, `open`, `close`, `action`
 
 ### Tooltip
 
-Theme-aware, responsive tooltip component.
+Show concise accessible contextual help on hover, focus, click, or controlled open state.
 
 - Mount: `data-component="Tooltip"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Tooltip"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""`
-- Slots: `default`
-- Events: `open`, `close`
+- Props: `id: string = ""`, `open: boolean = false`, `defaultOpen: boolean = false`, `title: string = ""`, `description: string = ""`, `content: string = "Tooltip"`, `trigger: string = "hover"`, `placement: string = "top"`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "dark"`, `maxWidth: string = "18rem"`, `offset: number = 10`, `showArrow: boolean = true`, `interactive: boolean = false`, `disabled: boolean = false`, `class: string = ""`
+- Slots: `trigger`, `default`
+- Events: `toggle`, `open`, `close`
 
 ## Tables
 
diff --git a/packages/ui/component-catalog.json b/packages/ui/component-catalog.json
index 299cb70b..66e20a54 100644
--- a/packages/ui/component-catalog.json
+++ b/packages/ui/component-catalog.json
@@ -1,47 +1,91 @@
 {
-  "sourceDocuments": ["Screenshot-directed WRNexus UI catalog reset"],
+  "sourceDocuments": [
+    "Screenshot-directed WRNexus UI catalog reset"
+  ],
   "components": [
+    {
+      "name": "AdvancedSelect",
+      "category": "advanced-forms",
+      "purpose": "Theme-aware, responsive advanced select component.",
+      "events": [
+        "search",
+        "select",
+        "change",
+        "clear",
+        "open",
+        "close",
+        "load",
+        "error"
+      ]
+    },
+    {
+      "name": "ComboBox",
+      "category": "advanced-forms",
+      "purpose": "Editable autocomplete combobox with local and remote suggestions.",
+      "events": [
+        "search",
+        "select",
+        "change",
+        "clear",
+        "open",
+        "close",
+        "load",
+        "error"
+      ]
+    },
+    {
+      "name": "CopyMarkup",
+      "category": "advanced-forms",
+      "purpose": "Theme-aware, responsive copy markup component."
+    },
+    {
+      "name": "InputNumber",
+      "category": "advanced-forms",
+      "purpose": "Theme-aware, responsive input number component."
+    },
+    {
+      "name": "PinInput",
+      "category": "advanced-forms",
+      "purpose": "Secure multi-cell PIN and verification-code input with regex and paste support.",
+      "events": [
+        "input",
+        "change",
+        "complete",
+        "paste",
+        "clear",
+        "error"
+      ]
+    },
+    {
+      "name": "StrongPassword",
+      "category": "advanced-forms",
+      "purpose": "Theme-aware, responsive strong password component."
+    },
+    {
+      "name": "ToggleCount",
+      "category": "advanced-forms",
+      "purpose": "Theme-aware, responsive toggle count component."
+    },
+    {
+      "name": "TogglePassword",
+      "category": "advanced-forms",
+      "purpose": "Accessible password field with optional show and hide controls.",
+      "events": [
+        "input",
+        "change",
+        "toggle"
+      ]
+    },
     {
       "name": "Accordion",
       "category": "base",
       "purpose": "Theme-aware, responsive accordion component."
     },
-    {
-      "name": "AdvancedDatePicker",
-      "category": "integrations",
-      "purpose": "Theme-aware, responsive advanced date picker component."
-    },
-    {
-      "name": "AdvancedRangeSlider",
-      "category": "integrations",
-      "purpose": "Theme-aware, responsive advanced range slider component."
-    },
-    {
-      "name": "AdvancedSelect",
-      "category": "advanced-forms",
-      "purpose": "Theme-aware, responsive advanced select component.",
-      "events": ["search", "select", "change", "clear", "open", "close", "load", "error"]
-    },
     {
       "name": "Alert",
       "category": "base",
       "purpose": "Theme-aware, responsive alert component."
     },
-    {
-      "name": "AnnouncementBar",
-      "category": "blocks",
-      "purpose": "Accessible public announcement, emergency, maintenance, or status bar."
-    },
-    {
-      "name": "AuthForm",
-      "category": "forms",
-      "purpose": "Reusable authentication form for sign-in, registration, recovery, reset, and MFA."
-    },
-    {
-      "name": "AuthSplitLayout",
-      "category": "layout",
-      "purpose": "Responsive 50/50 authentication layout with content and form regions."
-    },
     {
       "name": "Avatar",
       "category": "base",
@@ -52,11 +96,6 @@
       "category": "base",
       "purpose": "Theme-aware, responsive avatar group component."
     },
-    {
-      "name": "BackToTop",
-      "category": "navigation",
-      "purpose": "Accessible scroll-to-top control with visibility threshold."
-    },
     {
       "name": "Badge",
       "category": "base",
@@ -67,11 +106,6 @@
       "category": "base",
       "purpose": "Theme-aware, responsive blockquote component."
     },
-    {
-      "name": "Breadcrumb",
-      "category": "navigation",
-      "purpose": "Theme-aware, responsive breadcrumb component."
-    },
     {
       "name": "Button",
       "category": "base",
@@ -85,94 +119,23 @@
     {
       "name": "Card",
       "category": "base",
-      "purpose": "Theme-aware, responsive card component."
+      "purpose": "Group related content in a responsive themed surface with title, description, content, and supporting slots."
     },
     {
       "name": "Carousel",
       "category": "base",
       "purpose": "Theme-aware, responsive carousel component."
     },
-    {
-      "name": "Chart",
-      "category": "integrations",
-      "purpose": "Theme-aware, responsive chart component."
-    },
     {
       "name": "ChatBubble",
       "category": "base",
       "purpose": "Theme-aware, responsive chat bubble component."
     },
-    {
-      "name": "Checkbox",
-      "category": "forms",
-      "purpose": "Theme-aware, responsive checkbox component."
-    },
-    {
-      "name": "Clipboard",
-      "category": "integrations",
-      "purpose": "Theme-aware, responsive clipboard component."
-    },
     {
       "name": "Collapse",
       "category": "base",
       "purpose": "Theme-aware, responsive collapse component."
     },
-    {
-      "name": "ColorPicker",
-      "category": "forms",
-      "purpose": "Theme-aware, responsive color picker component."
-    },
-    {
-      "name": "Columns",
-      "category": "layout",
-      "purpose": "Theme-aware, responsive columns component."
-    },
-    {
-      "name": "ComboBox",
-      "category": "advanced-forms",
-      "purpose": "Editable autocomplete combobox with local and remote suggestions.",
-      "events": ["search", "select", "change", "clear", "open", "close", "load", "error"]
-    },
-    {
-      "name": "Confetti",
-      "category": "integrations",
-      "purpose": "Theme-aware, responsive confetti component."
-    },
-    {
-      "name": "Container",
-      "category": "layout",
-      "purpose": "Theme-aware, responsive container component."
-    },
-    {
-      "name": "ContextMenu",
-      "category": "overlays",
-      "purpose": "Theme-aware, responsive context menu component."
-    },
-    {
-      "name": "CopyMarkup",
-      "category": "advanced-forms",
-      "purpose": "Theme-aware, responsive copy markup component."
-    },
-    {
-      "name": "CTASection",
-      "category": "blocks",
-      "purpose": "Reusable closing call-to-action section with primary and secondary actions."
-    },
-    {
-      "name": "CustomScrollbar",
-      "category": "layout",
-      "purpose": "Theme-aware, responsive custom scrollbar component."
-    },
-    {
-      "name": "DataMap",
-      "category": "integrations",
-      "purpose": "Theme-aware, responsive data map component."
-    },
-    {
-      "name": "DataTable",
-      "category": "integrations",
-      "purpose": "Theme-aware, responsive data table component."
-    },
     {
       "name": "DatePicker",
       "category": "base",
@@ -183,257 +146,41 @@
       "category": "base",
       "purpose": "Theme-aware, responsive device frame component."
     },
-    {
-      "name": "Divider",
-      "category": "layout",
-      "purpose": "Theme-aware, responsive divider component."
-    },
-    {
-      "name": "DragAndDrop",
-      "category": "integrations",
-      "purpose": "Theme-aware, responsive drag and drop component."
-    },
-    {
-      "name": "Drawer",
-      "category": "overlays",
-      "purpose": "Theme-aware, responsive drawer component."
-    },
-    {
-      "name": "Dropdown",
-      "category": "overlays",
-      "purpose": "Theme-aware, responsive dropdown component."
-    },
-    {
-      "name": "FeatureCard",
-      "category": "blocks",
-      "purpose": "Reusable linked feature or service card with icon, badge, description, and action."
-    },
-    {
-      "name": "FeatureGrid",
-      "category": "layout",
-      "purpose": "Responsive equal-height grid for feature and service cards."
-    },
-    {
-      "name": "FeatureIconCard",
-      "category": "blocks",
-      "purpose": "Feature card with a prominent themed icon treatment."
-    },
-    {
-      "name": "FileInput",
-      "category": "forms",
-      "purpose": "Theme-aware, responsive file input component."
-    },
-    {
-      "name": "FileUpload",
-      "category": "integrations",
-      "purpose": "Theme-aware, responsive file upload component."
-    },
     {
       "name": "FileUploadProgress",
       "category": "base",
       "purpose": "Theme-aware, responsive file upload progress component."
     },
-    {
-      "name": "Footer",
-      "category": "navigation",
-      "purpose": "Responsive application footer with structured links and pre/post content slots."
-    },
-    {
-      "name": "Grid",
-      "category": "layout",
-      "purpose": "Theme-aware, responsive grid component."
-    },
-    {
-      "name": "Hero",
-      "category": "blocks",
-      "purpose": "Reusable public-page hero with actions, trust items, badges, and visual slots."
-    },
-    {
-      "name": "HeroActions",
-      "category": "base",
-      "purpose": "Responsive action group for hero and call-to-action sections."
-    },
-    {
-      "name": "Image",
-      "category": "layout",
-      "purpose": "Theme-aware, responsive image component."
-    },
-    {
-      "name": "Input",
-      "category": "forms",
-      "purpose": "Theme-aware, responsive input component."
-    },
-    {
-      "name": "InputGroup",
-      "category": "forms",
-      "purpose": "Theme-aware, responsive input group component."
-    },
-    {
-      "name": "InputNumber",
-      "category": "advanced-forms",
-      "purpose": "Theme-aware, responsive input number component."
-    },
-    {
-      "name": "Kbd",
-      "category": "layout",
-      "purpose": "Theme-aware, responsive kbd component."
-    },
-    {
-      "name": "LayoutSplitter",
-      "category": "layout",
-      "purpose": "Theme-aware, responsive layout splitter component."
-    },
     {
       "name": "LegendIndicator",
       "category": "base",
       "purpose": "Theme-aware, responsive legend indicator component."
     },
-    {
-      "name": "Link",
-      "category": "layout",
-      "purpose": "Theme-aware, responsive link component."
-    },
     {
       "name": "List",
       "category": "base",
-      "purpose": "Theme-aware, responsive list component."
+      "purpose": "Present structured responsive linked or status items with icons, descriptions, actions, and selection events."
     },
     {
       "name": "ListGroup",
       "category": "base",
       "purpose": "Theme-aware, responsive list group component."
     },
-    {
-      "name": "Map",
-      "category": "integrations",
-      "purpose": "Theme-aware, responsive map component."
-    },
-    {
-      "name": "MarketingSectionHeader",
-      "category": "blocks",
-      "purpose": "Marketing section heading with an optional linked action."
-    },
     {
       "name": "Marquee",
       "category": "base",
-      "purpose": "Theme-aware, responsive marquee component."
-    },
-    {
-      "name": "MegaMenu",
-      "category": "navigation",
-      "purpose": "Theme-aware, responsive mega menu component."
-    },
-    {
-      "name": "MetricCard",
-      "category": "blocks",
-      "purpose": "Single statistic or operational metric with icon, trend, and optional action."
-    },
-    {
-      "name": "MetricGrid",
-      "category": "layout",
-      "purpose": "Responsive collection of metric cards."
-    },
-    {
-      "name": "Modal",
-      "category": "overlays",
-      "purpose": "Theme-aware, responsive modal component."
-    },
-    {
-      "name": "Nav",
-      "category": "navigation",
-      "purpose": "Theme-aware, responsive nav component."
-    },
-    {
-      "name": "Navbar",
-      "category": "navigation",
-      "purpose": "Theme-aware, responsive navbar component."
-    },
-    {
-      "name": "PageHeader",
-      "category": "blocks",
-      "purpose": "Public and application page header with breadcrumbs, metadata, and actions."
-    },
-    {
-      "name": "Pagination",
-      "category": "navigation",
-      "purpose": "Theme-aware, responsive pagination component."
-    },
-    {
-      "name": "PinInput",
-      "category": "advanced-forms",
-      "purpose": "Secure multi-cell PIN and verification-code input with regex and paste support.",
-      "events": ["input", "change", "complete", "paste", "clear", "error"]
-    },
-    {
-      "name": "Popover",
-      "category": "overlays",
-      "purpose": "Theme-aware, responsive popover component."
-    },
-    {
-      "name": "PortalDashboard",
-      "category": "blocks",
-      "purpose": "Responsive portal dashboard with metrics, actions, tasks, and updates."
-    },
-    {
-      "name": "PreferenceSwitcher",
-      "category": "navigation",
-      "purpose": "Accessible theme, accent color, and language preference controls."
+      "purpose": "Continuously present responsive labels, partners, notices, or capabilities with pause and resume behavior."
     },
     {
       "name": "Progress",
       "category": "base",
       "purpose": "Theme-aware, responsive progress component."
     },
-    {
-      "name": "PublicPageShell",
-      "category": "layout",
-      "purpose": "Consistent structural wrapper for public-facing pages."
-    },
-    {
-      "name": "Radio",
-      "category": "forms",
-      "purpose": "Theme-aware, responsive radio component."
-    },
-    {
-      "name": "RangeSlider",
-      "category": "forms",
-      "purpose": "Theme-aware, responsive range slider component."
-    },
     {
       "name": "Rating",
       "category": "base",
       "purpose": "Theme-aware, responsive rating component."
     },
-    {
-      "name": "Scrollspy",
-      "category": "navigation",
-      "purpose": "Theme-aware, responsive scrollspy component."
-    },
-    {
-      "name": "SearchBox",
-      "category": "advanced-forms",
-      "purpose": "Theme-aware, responsive search box component."
-    },
-    {
-      "name": "Section",
-      "category": "layout",
-      "purpose": "Theme-aware page section with consistent spacing, width, background, and border controls."
-    },
-    {
-      "name": "SectionHeader",
-      "category": "layout",
-      "purpose": "Reusable accessible section heading with eyebrow, title, description, icon, and actions."
-    },
-    {
-      "name": "Select",
-      "category": "forms",
-      "purpose": "Theme-aware, responsive select component."
-    },
-    {
-      "name": "Sidebar",
-      "category": "navigation",
-      "purpose": "Theme-aware, responsive sidebar component."
-    },
     {
       "name": "Skeleton",
       "category": "base",
@@ -444,106 +191,370 @@
       "category": "base",
       "purpose": "Theme-aware, responsive spinner component."
     },
-    {
-      "name": "SplitHero",
-      "category": "blocks",
-      "purpose": "Two-column hero with configurable content and visual placement."
-    },
-    {
-      "name": "StatsBar",
-      "category": "blocks",
-      "purpose": "Compact responsive statistics strip."
-    },
-    {
-      "name": "Stepper",
-      "category": "navigation",
-      "purpose": "Theme-aware, responsive stepper component."
-    },
-    {
-      "name": "StrongPassword",
-      "category": "advanced-forms",
-      "purpose": "Theme-aware, responsive strong password component."
-    },
     {
       "name": "StyledIcon",
       "category": "base",
       "purpose": "Theme-aware, responsive styled icon component."
     },
-    {
-      "name": "Switch",
-      "category": "forms",
-      "purpose": "Theme-aware, responsive switch component."
-    },
-    {
-      "name": "Table",
-      "category": "tables",
-      "purpose": "Theme-aware, responsive table component."
-    },
-    {
-      "name": "Tabs",
-      "category": "navigation",
-      "purpose": "Theme-aware, responsive tabs component."
-    },
-    {
-      "name": "Textarea",
-      "category": "forms",
-      "purpose": "Theme-aware, responsive textarea component."
-    },
-    {
-      "name": "TextLink",
-      "category": "layout",
-      "purpose": "Styled inline action link with icons, arrows, external state, and disabled handling."
-    },
     {
       "name": "Timeline",
       "category": "base",
-      "purpose": "Theme-aware, responsive timeline component."
-    },
-    {
-      "name": "TimePicker",
-      "category": "forms",
-      "purpose": "Theme-aware, responsive time picker component."
+      "purpose": "Present responsive chronological activity, milestones, or workflow status with rich item metadata."
     },
     {
       "name": "Toast",
       "category": "base",
       "purpose": "Theme-aware, responsive toast component."
     },
-    {
-      "name": "ToastNotifications",
-      "category": "integrations",
-      "purpose": "Theme-aware, responsive toast notifications component."
-    },
-    {
-      "name": "ToggleCount",
-      "category": "advanced-forms",
-      "purpose": "Theme-aware, responsive toggle count component."
-    },
-    {
-      "name": "TogglePassword",
-      "category": "advanced-forms",
-      "purpose": "Accessible password field with optional show and hide controls.",
-      "events": ["input", "change", "toggle"]
-    },
-    {
-      "name": "Tooltip",
-      "category": "overlays",
-      "purpose": "Theme-aware, responsive tooltip component."
-    },
     {
       "name": "TreeView",
       "category": "base",
       "purpose": "Theme-aware, responsive tree view component."
     },
     {
-      "name": "Typography",
-      "category": "layout",
-      "purpose": "Theme-aware, responsive typography component."
+      "name": "MetricCard",
+      "category": "data",
+      "purpose": "Display one operational metric with value, suffix, description, icon, trend, progress, and optional action."
+    },
+    {
+      "name": "MetricGrid",
+      "category": "data",
+      "purpose": "Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid."
+    },
+    {
+      "name": "StatsBar",
+      "category": "data",
+      "purpose": "Present a compact responsive strip of key facts, counts, performance indicators, or trust signals."
+    },
+    {
+      "name": "Checkbox",
+      "category": "forms",
+      "purpose": "Theme-aware, responsive checkbox component."
+    },
+    {
+      "name": "ColorPicker",
+      "category": "forms",
+      "purpose": "Theme-aware, responsive color picker component."
+    },
+    {
+      "name": "FileInput",
+      "category": "forms",
+      "purpose": "Theme-aware, responsive file input component."
+    },
+    {
+      "name": "Input",
+      "category": "forms",
+      "purpose": "Theme-aware, responsive input component."
+    },
+    {
+      "name": "InputGroup",
+      "category": "forms",
+      "purpose": "Theme-aware, responsive input group component."
+    },
+    {
+      "name": "Radio",
+      "category": "forms",
+      "purpose": "Theme-aware, responsive radio component."
+    },
+    {
+      "name": "RangeSlider",
+      "category": "forms",
+      "purpose": "Theme-aware, responsive range slider component."
+    },
+    {
+      "name": "SearchBox",
+      "category": "forms",
+      "purpose": "Provide an accessible responsive search field with labels, validation states, sizes, and input or change events."
+    },
+    {
+      "name": "Select",
+      "category": "forms",
+      "purpose": "Theme-aware, responsive select component."
+    },
+    {
+      "name": "Switch",
+      "category": "forms",
+      "purpose": "Theme-aware, responsive switch component."
+    },
+    {
+      "name": "Textarea",
+      "category": "forms",
+      "purpose": "Theme-aware, responsive textarea component."
+    },
+    {
+      "name": "TimePicker",
+      "category": "forms",
+      "purpose": "Theme-aware, responsive time picker component."
+    },
+    {
+      "name": "AdvancedDatePicker",
+      "category": "integrations",
+      "purpose": "Theme-aware, responsive advanced date picker component."
+    },
+    {
+      "name": "AdvancedRangeSlider",
+      "category": "integrations",
+      "purpose": "Theme-aware, responsive advanced range slider component."
+    },
+    {
+      "name": "Chart",
+      "category": "integrations",
+      "purpose": "Theme-aware, responsive chart component."
+    },
+    {
+      "name": "Clipboard",
+      "category": "integrations",
+      "purpose": "Theme-aware, responsive clipboard component."
+    },
+    {
+      "name": "Confetti",
+      "category": "integrations",
+      "purpose": "Theme-aware, responsive confetti component."
+    },
+    {
+      "name": "DataMap",
+      "category": "integrations",
+      "purpose": "Theme-aware, responsive data map component."
+    },
+    {
+      "name": "DataTable",
+      "category": "integrations",
+      "purpose": "Theme-aware, responsive data table component."
+    },
+    {
+      "name": "DragAndDrop",
+      "category": "integrations",
+      "purpose": "Theme-aware, responsive drag and drop component."
+    },
+    {
+      "name": "FileUpload",
+      "category": "integrations",
+      "purpose": "Theme-aware, responsive file upload component."
+    },
+    {
+      "name": "Map",
+      "category": "integrations",
+      "purpose": "Present responsive location information and markers with map-ready metadata and movement or marker events."
+    },
+    {
+      "name": "ToastNotifications",
+      "category": "integrations",
+      "purpose": "Theme-aware, responsive toast notifications component."
     },
     {
       "name": "WysiwygEditor",
       "category": "integrations",
       "purpose": "Theme-aware, responsive wysiwyg editor component."
+    },
+    {
+      "name": "Columns",
+      "category": "layout",
+      "purpose": "Create responsive balanced content columns with configurable count, gap, density, and maximum width."
+    },
+    {
+      "name": "Container",
+      "category": "layout",
+      "purpose": "Constrain and align page content with responsive gutters and compact, wide, or full width options."
+    },
+    {
+      "name": "CustomScrollbar",
+      "category": "layout",
+      "purpose": "Theme-aware, responsive custom scrollbar component."
+    },
+    {
+      "name": "Divider",
+      "category": "layout",
+      "purpose": "Separate related horizontal or vertical content with optional labels, sizes, and semantic colors."
+    },
+    {
+      "name": "FeatureGrid",
+      "category": "layout",
+      "purpose": "Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid."
+    },
+    {
+      "name": "Footer",
+      "category": "layout",
+      "purpose": "Render structured responsive footer navigation, pre and post content, copyright content, links, and public events."
+    },
+    {
+      "name": "Grid",
+      "category": "layout",
+      "purpose": "Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width."
+    },
+    {
+      "name": "Image",
+      "category": "layout",
+      "purpose": "Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment."
+    },
+    {
+      "name": "Kbd",
+      "category": "layout",
+      "purpose": "Theme-aware, responsive kbd component."
+    },
+    {
+      "name": "LayoutSplitter",
+      "category": "layout",
+      "purpose": "Theme-aware, responsive layout splitter component."
+    },
+    {
+      "name": "Link",
+      "category": "layout",
+      "purpose": "Render an accessible internal or external link with target, relation, size, color, and public focus or click events."
+    },
+    {
+      "name": "PublicPageShell",
+      "category": "layout",
+      "purpose": "Provide the outer responsive structure, width, background, slots, overflow, and minimum-height behavior for public pages."
+    },
+    {
+      "name": "Section",
+      "category": "layout",
+      "purpose": "Create a responsive themed page section with controlled spacing, width, borders, and surface treatment."
+    },
+    {
+      "name": "SectionHeader",
+      "category": "layout",
+      "purpose": "Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy."
+    },
+    {
+      "name": "Typography",
+      "category": "layout",
+      "purpose": "Apply consistent readable responsive typography, widths, columns, spacing, and editorial hierarchy."
+    },
+    {
+      "name": "AnnouncementBar",
+      "category": "marketing",
+      "purpose": "Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls."
+    },
+    {
+      "name": "CTASection",
+      "category": "marketing",
+      "purpose": "Close a page or major section with conversion-focused copy, actions, and optional supporting visual content."
+    },
+    {
+      "name": "FeatureCard",
+      "category": "marketing",
+      "purpose": "Present one linked feature or service with media, icon, badge, description, and action."
+    },
+    {
+      "name": "FeatureIconCard",
+      "category": "marketing",
+      "purpose": "Present a compact feature or benefit with a styled icon, title, description, badge, and optional link."
+    },
+    {
+      "name": "Hero",
+      "category": "marketing",
+      "purpose": "Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel."
+    },
+    {
+      "name": "HeroActions",
+      "category": "marketing",
+      "purpose": "Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking."
+    },
+    {
+      "name": "MarketingSectionHeader",
+      "category": "marketing",
+      "purpose": "Introduce marketing content with an eyebrow, title, description, and optional linked action."
+    },
+    {
+      "name": "PageHeader",
+      "category": "marketing",
+      "purpose": "Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions."
+    },
+    {
+      "name": "SplitHero",
+      "category": "marketing",
+      "purpose": "Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel."
+    },
+    {
+      "name": "TextLink",
+      "category": "marketing",
+      "purpose": "Render an accessible text action with optional icon, arrow, underline, external state, and semantic styling."
+    },
+    {
+      "name": "BackToTop",
+      "category": "navigation",
+      "purpose": "Provide a responsive floating control that returns long pages to the top and can show scroll progress."
+    },
+    {
+      "name": "Breadcrumb",
+      "category": "navigation",
+      "purpose": "Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events."
+    },
+    {
+      "name": "MegaMenu",
+      "category": "navigation",
+      "purpose": "Theme-aware, responsive mega menu component."
+    },
+    {
+      "name": "Nav",
+      "category": "navigation",
+      "purpose": "Theme-aware, responsive nav component."
+    },
+    {
+      "name": "Navbar",
+      "category": "navigation",
+      "purpose": "Theme-aware, responsive navbar component."
+    },
+    {
+      "name": "Pagination",
+      "category": "navigation",
+      "purpose": "Theme-aware, responsive pagination component."
+    },
+    {
+      "name": "Scrollspy",
+      "category": "navigation",
+      "purpose": "Theme-aware, responsive scrollspy component."
+    },
+    {
+      "name": "Sidebar",
+      "category": "navigation",
+      "purpose": "Theme-aware, responsive sidebar component."
+    },
+    {
+      "name": "Stepper",
+      "category": "navigation",
+      "purpose": "Theme-aware, responsive stepper component."
+    },
+    {
+      "name": "Tabs",
+      "category": "navigation",
+      "purpose": "Switch between related responsive content panels with horizontal or vertical orientation and selection events."
+    },
+    {
+      "name": "ContextMenu",
+      "category": "overlays",
+      "purpose": "Open an accessible keyboard-aware action menu from pointer or keyboard context interactions."
+    },
+    {
+      "name": "Drawer",
+      "category": "overlays",
+      "purpose": "Present responsive modal side or bottom content with focus management, backdrop behavior, slots, and close events."
+    },
+    {
+      "name": "Dropdown",
+      "category": "overlays",
+      "purpose": "Open an accessible anchored menu with keyboard navigation, item selection, actions, and responsive placement."
+    },
+    {
+      "name": "Modal",
+      "category": "overlays",
+      "purpose": "Present an accessible modal dialog with focus management, confirmation, cancellation, slots, and responsive sizing."
+    },
+    {
+      "name": "Popover",
+      "category": "overlays",
+      "purpose": "Display anchored supporting content with configurable trigger, placement, responsive sizing, and open or close events."
+    },
+    {
+      "name": "Tooltip",
+      "category": "overlays",
+      "purpose": "Show concise accessible contextual help on hover, focus, click, or controlled open state."
+    },
+    {
+      "name": "Table",
+      "category": "tables",
+      "purpose": "Theme-aware, responsive table component."
     }
   ]
 }
diff --git a/packages/ui/component-reference.json b/packages/ui/component-reference.json
index 5a717e4a..98e76b5d 100644
--- a/packages/ui/component-reference.json
+++ b/packages/ui/component-reference.json
@@ -678,8 +678,8 @@
     {
       "name": "AnnouncementBar",
       "mount": "AnnouncementBar",
-      "category": "blocks",
-      "purpose": "Accessible public announcement, emergency, maintenance, or status bar.",
+      "category": "marketing",
+      "purpose": "Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.",
       "props": [
         {
           "name": "badge",
@@ -759,6 +759,12 @@
           "required": false,
           "default": "\"default\""
         },
+        {
+          "name": "width",
+          "type": "string",
+          "required": false,
+          "default": "\"default\""
+        },
         {
           "name": "color",
           "type": "string",
@@ -791,14 +797,14 @@
         }
       ],
       "slots": [],
-      "events": [],
+      "events": ["dismiss"],
       "source": "components/AnnouncementBar.wrn"
     },
     {
       "name": "AuthForm",
       "mount": "AuthForm",
-      "category": "forms",
-      "purpose": "Reusable authentication form for sign-in, registration, recovery, reset, and MFA.",
+      "category": "core",
+      "purpose": "Reusable auth form component.",
       "props": [
         {
           "name": "size",
@@ -886,8 +892,8 @@
     {
       "name": "AuthSplitLayout",
       "mount": "AuthSplitLayout",
-      "category": "layout",
-      "purpose": "Responsive 50/50 authentication layout with content and form regions.",
+      "category": "core",
+      "purpose": "Reusable auth split layout component.",
       "props": [
         {
           "name": "size",
@@ -1148,7 +1154,7 @@
       "name": "BackToTop",
       "mount": "BackToTop",
       "category": "navigation",
-      "purpose": "Accessible scroll-to-top control with visibility threshold.",
+      "purpose": "Provide a responsive floating control that returns long pages to the top and can show scroll progress.",
       "props": [
         {
           "name": "threshold",
@@ -1198,6 +1204,18 @@
           "required": false,
           "default": "false"
         },
+        {
+          "name": "showLabel",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "alwaysVisible",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
         {
           "name": "size",
           "type": "string",
@@ -1216,6 +1234,12 @@
           "required": false,
           "default": "\"solid\""
         },
+        {
+          "name": "shape",
+          "type": "string",
+          "required": false,
+          "default": "\"round\""
+        },
         {
           "name": "class",
           "type": "string",
@@ -1463,20 +1487,8 @@
       "name": "Breadcrumb",
       "mount": "Breadcrumb",
       "category": "navigation",
-      "purpose": "Theme-aware, responsive breadcrumb component.",
+      "purpose": "Show responsive hierarchical navigation with home support, separators, current-page state, sizes, and selection events.",
       "props": [
-        {
-          "name": "size",
-          "type": "string",
-          "required": false,
-          "default": "\"default\""
-        },
-        {
-          "name": "color",
-          "type": "string",
-          "required": false,
-          "default": "\"primary\""
-        },
         {
           "name": "label",
           "type": "string",
@@ -1496,10 +1508,52 @@
           "default": "\"\""
         },
         {
-          "name": "orientation",
+          "name": "separator",
           "type": "string",
           "required": false,
-          "default": "\"horizontal\""
+          "default": "\"chevron\""
+        },
+        {
+          "name": "showHome",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "homeLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"Home\""
+        },
+        {
+          "name": "homeHref",
+          "type": "string",
+          "required": false,
+          "default": "\"/\""
+        },
+        {
+          "name": "homeIcon",
+          "type": "string",
+          "required": false,
+          "default": "\"icon-[lucide--house]\""
+        },
+        {
+          "name": "size",
+          "type": "string",
+          "required": false,
+          "default": "\"default\""
+        },
+        {
+          "name": "color",
+          "type": "string",
+          "required": false,
+          "default": "\"primary\""
+        },
+        {
+          "name": "variant",
+          "type": "string",
+          "required": false,
+          "default": "\"minimal\""
         },
         {
           "name": "class",
@@ -1508,8 +1562,8 @@
           "default": "\"\""
         }
       ],
-      "slots": ["default"],
-      "events": ["navigate", "click"],
+      "slots": [],
+      "events": ["select"],
       "source": "components/Breadcrumb.wrn"
     },
     {
@@ -1766,7 +1820,7 @@
       "name": "Card",
       "mount": "Card",
       "category": "base",
-      "purpose": "Theme-aware, responsive card component.",
+      "purpose": "Group related content in a responsive themed surface with title, description, content, and supporting slots.",
       "props": [
         {
           "name": "title",
@@ -2657,7 +2711,7 @@
       "name": "Columns",
       "mount": "Columns",
       "category": "layout",
-      "purpose": "Theme-aware, responsive columns component.",
+      "purpose": "Create responsive balanced content columns with configurable count, gap, density, and maximum width.",
       "props": [
         {
           "name": "size",
@@ -3014,7 +3068,7 @@
       "name": "Container",
       "mount": "Container",
       "category": "layout",
-      "purpose": "Theme-aware, responsive container component.",
+      "purpose": "Constrain and align page content with responsive gutters and compact, wide, or full width options.",
       "props": [
         {
           "name": "size",
@@ -3061,8 +3115,44 @@
       "name": "ContextMenu",
       "mount": "ContextMenu",
       "category": "overlays",
-      "purpose": "Theme-aware, responsive context menu component.",
+      "purpose": "Open an accessible keyboard-aware action menu from pointer or keyboard context interactions.",
       "props": [
+        {
+          "name": "items",
+          "type": "string",
+          "required": false,
+          "default": "[]"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "trigger",
+          "type": "string",
+          "required": false,
+          "default": "\"contextmenu\""
+        },
+        {
+          "name": "placement",
+          "type": "string",
+          "required": false,
+          "default": "\"pointer\""
+        },
+        {
+          "name": "align",
+          "type": "string",
+          "required": false,
+          "default": "\"start\""
+        },
         {
           "name": "size",
           "type": "string",
@@ -3075,11 +3165,17 @@
           "required": false,
           "default": "\"primary\""
         },
+        {
+          "name": "variant",
+          "type": "string",
+          "required": false,
+          "default": "\"raised\""
+        },
         {
           "name": "title",
           "type": "string",
           "required": false,
-          "default": "\"Context Menu\""
+          "default": "\"\""
         },
         {
           "name": "description",
@@ -3088,22 +3184,40 @@
           "default": "\"\""
         },
         {
-          "name": "open",
+          "name": "label",
+          "type": "string",
+          "required": false,
+          "default": "\"Context menu\""
+        },
+        {
+          "name": "closeOnSelect",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "closeOnOutside",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "disabled",
           "type": "boolean",
           "required": false,
           "default": "false"
         },
         {
-          "name": "placement",
+          "name": "minWidth",
           "type": "string",
           "required": false,
-          "default": "\"bottom\""
+          "default": "\"14rem\""
         },
         {
-          "name": "closeLabel",
+          "name": "maxWidth",
           "type": "string",
           "required": false,
-          "default": "\"Close\""
+          "default": "\"20rem\""
         },
         {
           "name": "class",
@@ -3112,8 +3226,8 @@
           "default": "\"\""
         }
       ],
-      "slots": ["default"],
-      "events": ["open", "close", "select"],
+      "slots": ["trigger", "header", "default", "footer"],
+      "events": ["open", "close", "select", "action"],
       "source": "components/ContextMenu.wrn"
     },
     {
@@ -3208,8 +3322,8 @@
     {
       "name": "CTASection",
       "mount": "CTASection",
-      "category": "blocks",
-      "purpose": "Reusable closing call-to-action section with primary and secondary actions.",
+      "category": "marketing",
+      "purpose": "Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.",
       "props": [
         {
           "name": "eyebrow",
@@ -3301,12 +3415,60 @@
           "required": false,
           "default": "\"\""
         },
+        {
+          "name": "visualImage",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "visualAlt",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "visualIcon",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "visualTitle",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "visualDescription",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "visualItems",
+          "type": "string",
+          "required": false,
+          "default": "[]"
+        },
+        {
+          "name": "visualPosition",
+          "type": "string",
+          "required": false,
+          "default": "\"right\""
+        },
         {
           "name": "maxWidth",
           "type": "string",
           "required": false,
           "default": "\"xl\""
         },
+        {
+          "name": "fullBleed",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
         {
           "name": "class",
           "type": "string",
@@ -3731,7 +3893,7 @@
       "name": "Divider",
       "mount": "Divider",
       "category": "layout",
-      "purpose": "Theme-aware, responsive divider component.",
+      "purpose": "Separate related horizontal or vertical content with optional labels, sizes, and semantic colors.",
       "props": [
         {
           "name": "size",
@@ -3825,13 +3987,31 @@
       "name": "Drawer",
       "mount": "Drawer",
       "category": "overlays",
-      "purpose": "Theme-aware, responsive drawer component.",
+      "purpose": "Present responsive modal side or bottom content with focus management, backdrop behavior, slots, and close events.",
       "props": [
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "placement",
+          "type": "string",
+          "required": false,
+          "default": "\"right\""
+        },
         {
           "name": "size",
           "type": "string",
           "required": false,
-          "default": "\"default\""
+          "default": "\"md\""
         },
         {
           "name": "color",
@@ -3839,6 +4019,12 @@
           "required": false,
           "default": "\"primary\""
         },
+        {
+          "name": "variant",
+          "type": "string",
+          "required": false,
+          "default": "\"default\""
+        },
         {
           "name": "title",
           "type": "string",
@@ -3852,22 +4038,64 @@
           "default": "\"\""
         },
         {
-          "name": "open",
-          "type": "boolean",
-          "required": false,
-          "default": "false"
-        },
-        {
-          "name": "placement",
+          "name": "icon",
           "type": "string",
           "required": false,
-          "default": "\"bottom\""
+          "default": "\"\""
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "required": false,
+          "default": "\"Drawer\""
         },
         {
           "name": "closeLabel",
           "type": "string",
           "required": false,
-          "default": "\"Close\""
+          "default": "\"Close drawer\""
+        },
+        {
+          "name": "showClose",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "closeOnBackdrop",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "closeOnEscape",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "overlay",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "scrollable",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "triggerLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "triggerIcon",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
         },
         {
           "name": "class",
@@ -3876,16 +4104,70 @@
           "default": "\"\""
         }
       ],
-      "slots": ["default"],
-      "events": ["open", "close"],
+      "slots": ["trigger", "header", "default", "footer"],
+      "events": ["open", "close", "cancel"],
       "source": "components/Drawer.wrn"
     },
     {
       "name": "Dropdown",
       "mount": "Dropdown",
       "category": "overlays",
-      "purpose": "Theme-aware, responsive dropdown component.",
+      "purpose": "Open an accessible anchored menu with keyboard navigation, item selection, actions, and responsive placement.",
       "props": [
+        {
+          "name": "items",
+          "type": "string",
+          "required": false,
+          "default": "[]"
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "required": false,
+          "default": "\"Open menu\""
+        },
+        {
+          "name": "icon",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "showChevron",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "menuLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"Dropdown menu\""
+        },
+        {
+          "name": "placement",
+          "type": "string",
+          "required": false,
+          "default": "\"bottom-start\""
+        },
+        {
+          "name": "width",
+          "type": "string",
+          "required": false,
+          "default": "\"md\""
+        },
         {
           "name": "size",
           "type": "string",
@@ -3899,22 +4181,34 @@
           "default": "\"primary\""
         },
         {
-          "name": "label",
+          "name": "variant",
           "type": "string",
           "required": false,
-          "default": "\"Open menu\""
+          "default": "\"raised\""
         },
         {
-          "name": "items",
-          "type": "string",
+          "name": "closeOnSelect",
+          "type": "boolean",
           "required": false,
-          "default": "[]"
+          "default": "true"
         },
         {
-          "name": "placement",
+          "name": "closeOnOutside",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "emptyLabel",
           "type": "string",
           "required": false,
-          "default": "\"end\""
+          "default": "\"No menu items\""
         },
         {
           "name": "class",
@@ -3923,15 +4217,15 @@
           "default": "\"\""
         }
       ],
-      "slots": ["trigger", "header", "footer"],
-      "events": ["toggle", "open", "close", "select"],
+      "slots": ["trigger", "header", "default", "footer"],
+      "events": ["toggle", "open", "close", "select", "action"],
       "source": "components/Dropdown.wrn"
     },
     {
       "name": "FeatureCard",
       "mount": "FeatureCard",
-      "category": "blocks",
-      "purpose": "Reusable linked feature or service card with icon, badge, description, and action.",
+      "category": "marketing",
+      "purpose": "Present one linked feature or service with media, icon, badge, description, and action.",
       "props": [
         {
           "name": "icon",
@@ -3939,6 +4233,24 @@
           "required": false,
           "default": "\"\""
         },
+        {
+          "name": "iconStyle",
+          "type": "string",
+          "required": false,
+          "default": "\"soft\""
+        },
+        {
+          "name": "iconSize",
+          "type": "string",
+          "required": false,
+          "default": "\"default\""
+        },
+        {
+          "name": "eyebrow",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
         {
           "name": "title",
           "type": "string",
@@ -3951,12 +4263,60 @@
           "required": false,
           "default": "\"\""
         },
+        {
+          "name": "image",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "imageAlt",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "imagePosition",
+          "type": "string",
+          "required": false,
+          "default": "\"top\""
+        },
+        {
+          "name": "imageAspect",
+          "type": "string",
+          "required": false,
+          "default": "\"wide\""
+        },
+        {
+          "name": "imageLoading",
+          "type": "string",
+          "required": false,
+          "default": "\"lazy\""
+        },
         {
           "name": "href",
           "type": "string",
           "required": false,
           "default": "\"\""
         },
+        {
+          "name": "target",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "rel",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "external",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
         {
           "name": "actionLabel",
           "type": "string",
@@ -3969,6 +4329,18 @@
           "required": false,
           "default": "\"\""
         },
+        {
+          "name": "showArrow",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "stretchedLink",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
         {
           "name": "badge",
           "type": "string",
@@ -4024,7 +4396,7 @@
           "default": "\"\""
         }
       ],
-      "slots": ["icon", "default", "footer"],
+      "slots": ["media", "icon", "default", "footer"],
       "events": [],
       "source": "components/FeatureCard.wrn"
     },
@@ -4032,19 +4404,13 @@
       "name": "FeatureGrid",
       "mount": "FeatureGrid",
       "category": "layout",
-      "purpose": "Responsive equal-height grid for feature and service cards.",
+      "purpose": "Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.",
       "props": [
         {
-          "name": "color",
+          "name": "items",
           "type": "string",
           "required": false,
-          "default": "\"primary\""
-        },
-        {
-          "name": "size",
-          "type": "string",
-          "required": false,
-          "default": "\"default\""
+          "default": "[]"
         },
         {
           "name": "columns",
@@ -4094,6 +4460,18 @@
           "required": false,
           "default": "\"full\""
         },
+        {
+          "name": "variant",
+          "type": "string",
+          "required": false,
+          "default": "\"default\""
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "required": false,
+          "default": "\"Features\""
+        },
         {
           "name": "class",
           "type": "string",
@@ -4108,8 +4486,8 @@
     {
       "name": "FeatureIconCard",
       "mount": "FeatureIconCard",
-      "category": "blocks",
-      "purpose": "Feature card with a prominent themed icon treatment.",
+      "category": "marketing",
+      "purpose": "Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.",
       "props": [
         {
           "name": "icon",
@@ -4482,8 +4860,8 @@
     {
       "name": "Footer",
       "mount": "Footer",
-      "category": "navigation",
-      "purpose": "Responsive application footer with structured links and pre/post content slots.",
+      "category": "layout",
+      "purpose": "Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.",
       "props": [
         {
           "name": "size",
@@ -4542,7 +4920,7 @@
       "name": "Grid",
       "mount": "Grid",
       "category": "layout",
-      "purpose": "Theme-aware, responsive grid component.",
+      "purpose": "Arrange arbitrary content in a responsive configurable CSS grid with stable columns, gaps, alignment, and width.",
       "props": [
         {
           "name": "size",
@@ -4588,8 +4966,8 @@
     {
       "name": "Hero",
       "mount": "Hero",
-      "category": "blocks",
-      "purpose": "Reusable public-page hero with actions, trust items, badges, and visual slots.",
+      "category": "marketing",
+      "purpose": "Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel.",
       "props": [
         {
           "name": "eyebrow",
@@ -4597,6 +4975,18 @@
           "required": false,
           "default": "\"\""
         },
+        {
+          "name": "eyebrowIcon",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "icon",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
         {
           "name": "title",
           "type": "string",
@@ -4639,6 +5029,78 @@
           "required": false,
           "default": "\"default\""
         },
+        {
+          "name": "layout",
+          "type": "string",
+          "required": false,
+          "default": "\"split\""
+        },
+        {
+          "name": "visualPosition",
+          "type": "string",
+          "required": false,
+          "default": "\"right\""
+        },
+        {
+          "name": "visualStyle",
+          "type": "string",
+          "required": false,
+          "default": "\"plain\""
+        },
+        {
+          "name": "showDecorations",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "fullBleed",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "visualEyebrow",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "visualTitle",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "visualDescription",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "visualIcon",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "visualImage",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "visualAlt",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "visualItems",
+          "type": "string",
+          "required": false,
+          "default": "[]"
+        },
         {
           "name": "primaryLabel",
           "type": "string",
@@ -4657,6 +5119,12 @@
           "required": false,
           "default": "\"\""
         },
+        {
+          "name": "primaryTarget",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
         {
           "name": "secondaryLabel",
           "type": "string",
@@ -4675,6 +5143,12 @@
           "required": false,
           "default": "\"\""
         },
+        {
+          "name": "secondaryTarget",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
         {
           "name": "tertiaryLabel",
           "type": "string",
@@ -4687,6 +5161,18 @@
           "required": false,
           "default": "\"\""
         },
+        {
+          "name": "tertiaryIcon",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "tertiaryTarget",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
         {
           "name": "badges",
           "type": "string",
@@ -4719,8 +5205,8 @@
     {
       "name": "HeroActions",
       "mount": "HeroActions",
-      "category": "base",
-      "purpose": "Responsive action group for hero and call-to-action sections.",
+      "category": "marketing",
+      "purpose": "Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.",
       "props": [
         {
           "name": "actions",
@@ -4779,7 +5265,7 @@
       "name": "Image",
       "mount": "Image",
       "category": "layout",
-      "purpose": "Theme-aware, responsive image component.",
+      "purpose": "Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment.",
       "props": [
         {
           "name": "size",
@@ -5558,7 +6044,7 @@
       "name": "Link",
       "mount": "Link",
       "category": "layout",
-      "purpose": "Theme-aware, responsive link component.",
+      "purpose": "Render an accessible internal or external link with target, relation, size, color, and public focus or click events.",
       "props": [
         {
           "name": "size",
@@ -5617,7 +6103,7 @@
       "name": "List",
       "mount": "List",
       "category": "base",
-      "purpose": "Theme-aware, responsive list component.",
+      "purpose": "Present structured responsive linked or status items with icons, descriptions, actions, and selection events.",
       "props": [
         {
           "name": "size",
@@ -5723,7 +6209,7 @@
       "name": "Map",
       "mount": "Map",
       "category": "integrations",
-      "purpose": "Theme-aware, responsive map component.",
+      "purpose": "Present responsive location information and markers with map-ready metadata and movement or marker events.",
       "props": [
         {
           "name": "size",
@@ -5775,8 +6261,8 @@
     {
       "name": "MarketingSectionHeader",
       "mount": "MarketingSectionHeader",
-      "category": "blocks",
-      "purpose": "Marketing section heading with an optional linked action.",
+      "category": "marketing",
+      "purpose": "Introduce marketing content with an eyebrow, title, description, and optional linked action.",
       "props": [
         {
           "name": "id",
@@ -5859,7 +6345,7 @@
       "name": "Marquee",
       "mount": "Marquee",
       "category": "base",
-      "purpose": "Theme-aware, responsive marquee component.",
+      "purpose": "Continuously present responsive labels, partners, notices, or capabilities with pause and resume behavior.",
       "props": [
         {
           "name": "size",
@@ -5964,8 +6450,8 @@
     {
       "name": "MetricCard",
       "mount": "MetricCard",
-      "category": "blocks",
-      "purpose": "Single statistic or operational metric with icon, trend, and optional action.",
+      "category": "data",
+      "purpose": "Display one operational metric with value, suffix, description, icon, trend, progress, and optional action.",
       "props": [
         {
           "name": "label",
@@ -5991,6 +6477,12 @@
           "required": false,
           "default": "\"\""
         },
+        {
+          "name": "iconStyle",
+          "type": "string",
+          "required": false,
+          "default": "\"soft\""
+        },
         {
           "name": "prefix",
           "type": "string",
@@ -6003,6 +6495,12 @@
           "required": false,
           "default": "\"\""
         },
+        {
+          "name": "badge",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
         {
           "name": "trend",
           "type": "string",
@@ -6021,18 +6519,72 @@
           "required": false,
           "default": "\"neutral\""
         },
+        {
+          "name": "progress",
+          "type": "number",
+          "required": false,
+          "default": "-1"
+        },
+        {
+          "name": "progressLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
         {
           "name": "href",
           "type": "string",
           "required": false,
           "default": "\"\""
         },
+        {
+          "name": "target",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "rel",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "external",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
         {
           "name": "actionLabel",
           "type": "string",
           "required": false,
           "default": "\"\""
         },
+        {
+          "name": "actionIcon",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "showArrow",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "selectable",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
         {
           "name": "size",
           "type": "string",
@@ -6051,6 +6603,12 @@
           "required": false,
           "default": "\"default\""
         },
+        {
+          "name": "hover",
+          "type": "string",
+          "required": false,
+          "default": "\"lift\""
+        },
         {
           "name": "align",
           "type": "string",
@@ -6064,15 +6622,15 @@
           "default": "\"\""
         }
       ],
-      "slots": [],
-      "events": [],
+      "slots": ["default", "footer"],
+      "events": ["select", "action"],
       "source": "components/MetricCard.wrn"
     },
     {
       "name": "MetricGrid",
       "mount": "MetricGrid",
-      "category": "layout",
-      "purpose": "Responsive collection of metric cards.",
+      "category": "data",
+      "purpose": "Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.",
       "props": [
         {
           "name": "items",
@@ -6134,6 +6692,18 @@
           "required": false,
           "default": "\"default\""
         },
+        {
+          "name": "maxWidth",
+          "type": "string",
+          "required": false,
+          "default": "\"full\""
+        },
+        {
+          "name": "minItemWidth",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
         {
           "name": "class",
           "type": "string",
@@ -6142,26 +6712,26 @@
         }
       ],
       "slots": ["default"],
-      "events": [],
+      "events": ["select", "action"],
       "source": "components/MetricGrid.wrn"
     },
     {
       "name": "Modal",
       "mount": "Modal",
       "category": "overlays",
-      "purpose": "Theme-aware, responsive modal component.",
+      "purpose": "Present an accessible modal dialog with focus management, confirmation, cancellation, slots, and responsive sizing.",
       "props": [
         {
-          "name": "size",
-          "type": "string",
+          "name": "open",
+          "type": "boolean",
           "required": false,
-          "default": "\"default\""
+          "default": "false"
         },
         {
-          "name": "color",
-          "type": "string",
+          "name": "defaultOpen",
+          "type": "boolean",
           "required": false,
-          "default": "\"primary\""
+          "default": "false"
         },
         {
           "name": "title",
@@ -6176,22 +6746,142 @@
           "default": "\"\""
         },
         {
-          "name": "open",
-          "type": "boolean",
+          "name": "icon",
+          "type": "string",
           "required": false,
-          "default": "false"
+          "default": "\"\""
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "required": false,
+          "default": "\"Modal dialog\""
+        },
+        {
+          "name": "size",
+          "type": "string",
+          "required": false,
+          "default": "\"md\""
         },
         {
           "name": "placement",
           "type": "string",
           "required": false,
-          "default": "\"bottom\""
+          "default": "\"center\""
+        },
+        {
+          "name": "color",
+          "type": "string",
+          "required": false,
+          "default": "\"primary\""
+        },
+        {
+          "name": "variant",
+          "type": "string",
+          "required": false,
+          "default": "\"default\""
+        },
+        {
+          "name": "showClose",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
         },
         {
           "name": "closeLabel",
           "type": "string",
           "required": false,
-          "default": "\"Close\""
+          "default": "\"Close modal\""
+        },
+        {
+          "name": "closeOnBackdrop",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "closeOnEscape",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "closeOnCancel",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "closeOnConfirm",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "showFooter",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "cancelLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"Cancel\""
+        },
+        {
+          "name": "cancelIcon",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "confirmLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"Confirm\""
+        },
+        {
+          "name": "confirmIcon",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "confirmDisabled",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "confirmLoading",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "destructive",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "triggerLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "triggerIcon",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "scrollable",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
         },
         {
           "name": "class",
@@ -6200,7 +6890,7 @@
           "default": "\"\""
         }
       ],
-      "slots": ["default"],
+      "slots": ["trigger", "header", "default", "footer"],
       "events": ["open", "close", "cancel", "confirm"],
       "source": "components/Modal.wrn"
     },
@@ -6349,8 +7039,8 @@
     {
       "name": "PageHeader",
       "mount": "PageHeader",
-      "category": "blocks",
-      "purpose": "Public and application page header with breadcrumbs, metadata, and actions.",
+      "category": "marketing",
+      "purpose": "Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.",
       "props": [
         {
           "name": "eyebrow",
@@ -6376,12 +7066,30 @@
           "required": false,
           "default": "\"\""
         },
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "default": "\"page-title\""
+        },
         {
           "name": "align",
           "type": "string",
           "required": false,
           "default": "\"left\""
         },
+        {
+          "name": "centered",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "compact",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
         {
           "name": "size",
           "type": "string",
@@ -6389,10 +7097,10 @@
           "default": "\"default\""
         },
         {
-          "name": "compact",
-          "type": "boolean",
+          "name": "maxWidth",
+          "type": "string",
           "required": false,
-          "default": "false"
+          "default": "\"xl\""
         },
         {
           "name": "showBreadcrumbs",
@@ -6406,6 +7114,24 @@
           "required": false,
           "default": "[]"
         },
+        {
+          "name": "breadcrumbParent",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "breadcrumbParentHref",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "breadcrumbCurrent",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
         {
           "name": "primaryLabel",
           "type": "string",
@@ -6454,6 +7180,12 @@
           "required": false,
           "default": "\"default\""
         },
+        {
+          "name": "borderBottom",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
         {
           "name": "class",
           "type": "string",
@@ -6689,8 +7421,62 @@
       "name": "Popover",
       "mount": "Popover",
       "category": "overlays",
-      "purpose": "Theme-aware, responsive popover component.",
+      "purpose": "Display anchored supporting content with configurable trigger, placement, responsive sizing, and open or close events.",
       "props": [
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "triggerLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"Open popover\""
+        },
+        {
+          "name": "triggerIcon",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "icon",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "placement",
+          "type": "string",
+          "required": false,
+          "default": "\"bottom-start\""
+        },
+        {
+          "name": "width",
+          "type": "string",
+          "required": false,
+          "default": "\"md\""
+        },
         {
           "name": "size",
           "type": "string",
@@ -6704,34 +7490,70 @@
           "default": "\"primary\""
         },
         {
-          "name": "title",
+          "name": "variant",
           "type": "string",
           "required": false,
-          "default": "\"Popover\""
+          "default": "\"raised\""
         },
         {
-          "name": "description",
-          "type": "string",
+          "name": "showArrow",
+          "type": "boolean",
           "required": false,
-          "default": "\"\""
+          "default": "true"
         },
         {
-          "name": "open",
+          "name": "showClose",
           "type": "boolean",
           "required": false,
           "default": "false"
         },
-        {
-          "name": "placement",
-          "type": "string",
-          "required": false,
-          "default": "\"bottom\""
-        },
         {
           "name": "closeLabel",
           "type": "string",
           "required": false,
-          "default": "\"Close\""
+          "default": "\"Close popover\""
+        },
+        {
+          "name": "closeOnOutside",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "closeOnEscape",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "actionLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "actionHref",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "actionIcon",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "closeOnAction",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
         },
         {
           "name": "class",
@@ -6740,15 +7562,15 @@
           "default": "\"\""
         }
       ],
-      "slots": ["default"],
-      "events": ["open", "close"],
+      "slots": ["trigger", "header", "default", "footer"],
+      "events": ["toggle", "open", "close", "action"],
       "source": "components/Popover.wrn"
     },
     {
       "name": "PortalDashboard",
       "mount": "PortalDashboard",
-      "category": "blocks",
-      "purpose": "Responsive portal dashboard with metrics, actions, tasks, and updates.",
+      "category": "core",
+      "purpose": "Reusable portal dashboard component.",
       "props": [
         {
           "name": "size",
@@ -6842,8 +7664,8 @@
     {
       "name": "PreferenceSwitcher",
       "mount": "PreferenceSwitcher",
-      "category": "navigation",
-      "purpose": "Accessible theme, accent color, and language preference controls.",
+      "category": "core",
+      "purpose": "Reusable preference switcher component.",
       "props": [
         {
           "name": "size",
@@ -6961,7 +7783,7 @@
       "name": "PublicPageShell",
       "mount": "PublicPageShell",
       "category": "layout",
-      "purpose": "Consistent structural wrapper for public-facing pages.",
+      "purpose": "Provide the outer responsive structure, width, background, slots, overflow, and minimum-height behavior for public pages.",
       "props": [
         {
           "name": "maxWidth",
@@ -7465,8 +8287,8 @@
     {
       "name": "SearchBox",
       "mount": "SearchBox",
-      "category": "advanced-forms",
-      "purpose": "Theme-aware, responsive search box component.",
+      "category": "forms",
+      "purpose": "Provide an accessible responsive search field with labels, validation states, sizes, and input or change events.",
       "props": [
         {
           "name": "size",
@@ -7555,7 +8377,7 @@
       "name": "Section",
       "mount": "Section",
       "category": "layout",
-      "purpose": "Theme-aware page section with consistent spacing, width, background, and border controls.",
+      "purpose": "Create a responsive themed page section with controlled spacing, width, borders, and surface treatment.",
       "props": [
         {
           "name": "id",
@@ -7626,7 +8448,7 @@
       "name": "SectionHeader",
       "mount": "SectionHeader",
       "category": "layout",
-      "purpose": "Reusable accessible section heading with eyebrow, title, description, icon, and actions.",
+      "purpose": "Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.",
       "props": [
         {
           "name": "id",
@@ -7980,8 +8802,8 @@
     {
       "name": "SplitHero",
       "mount": "SplitHero",
-      "category": "blocks",
-      "purpose": "Two-column hero with configurable content and visual placement.",
+      "category": "marketing",
+      "purpose": "Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel.",
       "props": [
         {
           "name": "eyebrow",
@@ -7989,6 +8811,12 @@
           "required": false,
           "default": "\"\""
         },
+        {
+          "name": "eyebrowIcon",
+          "type": "string",
+          "required": false,
+          "default": "\"icon-[lucide--sparkles]\""
+        },
         {
           "name": "title",
           "type": "string",
@@ -8061,6 +8889,12 @@
           "required": false,
           "default": "\"balanced\""
         },
+        {
+          "name": "align",
+          "type": "string",
+          "required": false,
+          "default": "\"left\""
+        },
         {
           "name": "size",
           "type": "string",
@@ -8079,6 +8913,72 @@
           "required": false,
           "default": "\"default\""
         },
+        {
+          "name": "maxWidth",
+          "type": "string",
+          "required": false,
+          "default": "\"xl\""
+        },
+        {
+          "name": "fullBleed",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "backgroundImage",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "visualImage",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "visualAlt",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "visualIcon",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "visualEyebrow",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "visualTitle",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "visualDescription",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "visualItems",
+          "type": "string",
+          "required": false,
+          "default": "[]"
+        },
+        {
+          "name": "visualStyle",
+          "type": "string",
+          "required": false,
+          "default": "\"panel\""
+        },
         {
           "name": "trustItems",
           "type": "string",
@@ -8092,15 +8992,15 @@
           "default": "\"\""
         }
       ],
-      "slots": ["actions", "trust", "default", "visual"],
+      "slots": ["default", "actions", "trust", "visual"],
       "events": [],
       "source": "components/SplitHero.wrn"
     },
     {
       "name": "StatsBar",
       "mount": "StatsBar",
-      "category": "blocks",
-      "purpose": "Compact responsive statistics strip.",
+      "category": "data",
+      "purpose": "Present a compact responsive strip of key facts, counts, performance indicators, or trust signals.",
       "props": [
         {
           "name": "items",
@@ -8634,7 +9534,7 @@
       "name": "Tabs",
       "mount": "Tabs",
       "category": "navigation",
-      "purpose": "Theme-aware, responsive tabs component.",
+      "purpose": "Switch between related responsive content panels with horizontal or vertical orientation and selection events.",
       "props": [
         {
           "name": "size",
@@ -8835,8 +9735,8 @@
     {
       "name": "TextLink",
       "mount": "TextLink",
-      "category": "layout",
-      "purpose": "Styled inline action link with icons, arrows, external state, and disabled handling.",
+      "category": "marketing",
+      "purpose": "Render an accessible text action with optional icon, arrow, underline, external state, and semantic styling.",
       "props": [
         {
           "name": "label",
@@ -8931,7 +9831,7 @@
       "name": "Timeline",
       "mount": "Timeline",
       "category": "base",
-      "purpose": "Theme-aware, responsive timeline component.",
+      "purpose": "Present responsive chronological activity, milestones, or workflow status with rich item metadata.",
       "props": [
         {
           "name": "size",
@@ -9561,8 +10461,56 @@
       "name": "Tooltip",
       "mount": "Tooltip",
       "category": "overlays",
-      "purpose": "Theme-aware, responsive tooltip component.",
+      "purpose": "Show concise accessible contextual help on hover, focus, click, or controlled open state.",
       "props": [
+        {
+          "name": "id",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "open",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "required": false,
+          "default": "false"
+        },
+        {
+          "name": "title",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "description",
+          "type": "string",
+          "required": false,
+          "default": "\"\""
+        },
+        {
+          "name": "content",
+          "type": "string",
+          "required": false,
+          "default": "\"Tooltip\""
+        },
+        {
+          "name": "trigger",
+          "type": "string",
+          "required": false,
+          "default": "\"hover\""
+        },
+        {
+          "name": "placement",
+          "type": "string",
+          "required": false,
+          "default": "\"top\""
+        },
         {
           "name": "size",
           "type": "string",
@@ -9576,34 +10524,40 @@
           "default": "\"primary\""
         },
         {
-          "name": "title",
+          "name": "variant",
           "type": "string",
           "required": false,
-          "default": "\"Tooltip\""
+          "default": "\"dark\""
         },
         {
-          "name": "description",
+          "name": "maxWidth",
           "type": "string",
           "required": false,
-          "default": "\"\""
+          "default": "\"18rem\""
         },
         {
-          "name": "open",
+          "name": "offset",
+          "type": "number",
+          "required": false,
+          "default": "10"
+        },
+        {
+          "name": "showArrow",
+          "type": "boolean",
+          "required": false,
+          "default": "true"
+        },
+        {
+          "name": "interactive",
           "type": "boolean",
           "required": false,
           "default": "false"
         },
         {
-          "name": "placement",
-          "type": "string",
+          "name": "disabled",
+          "type": "boolean",
           "required": false,
-          "default": "\"bottom\""
-        },
-        {
-          "name": "closeLabel",
-          "type": "string",
-          "required": false,
-          "default": "\"Close\""
+          "default": "false"
         },
         {
           "name": "class",
@@ -9612,9 +10566,9 @@
           "default": "\"\""
         }
       ],
-      "slots": ["default"],
-      "events": ["open", "close"],
-      "source": "components/tooltip.wrn"
+      "slots": ["trigger", "default"],
+      "events": ["toggle", "open", "close"],
+      "source": "components/Tooltip.wrn"
     },
     {
       "name": "TreeView",
@@ -9673,7 +10627,7 @@
       "name": "Typography",
       "mount": "Typography",
       "category": "layout",
-      "purpose": "Theme-aware, responsive typography component.",
+      "purpose": "Apply consistent readable responsive typography, widths, columns, spacing, and editorial hierarchy.",
       "props": [
         {
           "name": "size",
diff --git a/packages/ui/components/AnnouncementBar.wrn b/packages/ui/components/AnnouncementBar.wrn
index 3e7341f8..2c0119da 100644
--- a/packages/ui/components/AnnouncementBar.wrn
+++ b/packages/ui/components/AnnouncementBar.wrn
@@ -1,5 +1,7 @@
 component AnnouncementBar {
   props {
+    @event dismiss = function
+
     badge = ""
     badgeIcon = ""
     message = "Announcement"
@@ -13,6 +15,7 @@ component AnnouncementBar {
     sticky = false
     compact = false
     size = "default"
+    width = "default"
     color = "primary"
     variant = "soft"
     role = "status"
@@ -24,108 +27,590 @@ component AnnouncementBar {
 
   view {
     <aside
+      {...attrs}
       data-ui-component="AnnouncementBar"
+      data-size='{size}'
+      data-width='{width}'
+      data-color='{color}'
+      data-variant='{variant}'
+      data-compact='{compact}'
+      data-sticky='{sticky}'
+      data-show='{!dismissed}'
+      aria-hidden='{dismissed ? "true" : "false"}'
       role='{role}'
       aria-live='{live}'
-      data-show='!dismissed'
-      class='z-40 w-full border-y border-[var(--wire-color-border)] {class}'
-      class:sticky='sticky'
-      class:top-0='sticky'
-      class:bg-[var(--wire-color-primary-soft)]='variant === "soft" && color === "primary"'
-      class:border-[var(--wire-color-primary-muted)]='variant === "soft" && color === "primary"'
-      class:bg-[var(--wire-color-info-soft)]='variant === "soft" && color === "info"'
-      class:border-[var(--wire-color-info-muted)]='variant === "soft" && color === "info"'
-      class:bg-[var(--wire-color-success-soft)]='variant === "soft" && color === "success"'
-      class:border-[var(--wire-color-success-muted)]='variant === "soft" && color === "success"'
-      class:bg-[var(--wire-color-warning-soft)]='variant === "soft" && color === "warning"'
-      class:border-[var(--wire-color-warning-muted)]='variant === "soft" && color === "warning"'
-      class:bg-[var(--wire-color-danger-soft)]='variant === "soft" && color === "danger"'
-      class:border-[var(--wire-color-danger-muted)]='variant === "soft" && color === "danger"'
-      class:bg-[var(--wire-color-primary)]='variant === "solid" && color === "primary"'
-      class:text-[var(--wire-color-on-primary)]='variant === "solid" && color === "primary"'
-      class:bg-[var(--wire-color-danger)]='variant === "solid" && color === "danger"'
-      class:text-[var(--wire-color-on-danger)]='variant === "solid" && color === "danger"'
-      class:bg-[var(--wire-color-surface-raised)]='variant === "default"'
+      class='wire-announcement {class}'
     >
-      <Container columns="1" maxWidth="xl" size="default">
-        <div
-          class="flex flex-col gap-4 py-4 sm:flex-row sm:items-center sm:justify-between"
-          class:py-2.5='compact'
-        >
-          <div class="flex min-w-0 items-start gap-3 sm:items-center">
+      <div class="wire-announcement__surface">
+        <span
+          class="wire-announcement__accent"
+          aria-hidden="true"
+        ></span>
+
+        <span
+          class="wire-announcement__glow wire-announcement__glow--one"
+          aria-hidden="true"
+        ></span>
+
+        <span
+          class="wire-announcement__glow wire-announcement__glow--two"
+          aria-hidden="true"
+        ></span>
+
+        <div class="wire-announcement__inner">
+          <div class="wire-announcement__content">
             {#if icon}
-              <span
-                class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-[var(--wire-color-surface-raised)] text-[var(--wire-color-primary)] shadow-sm"
-                class:size-8='compact'
-                class:text-[var(--wire-color-danger)]='color === "danger"'
-                class:text-[var(--wire-color-warning-text)]='color === "warning"'
-                class:text-[var(--wire-color-success)]='color === "success"'
-                class:text-[var(--wire-color-info)]='color === "info"'
-              >
-                <span class='{icon + " size-5"}' aria-hidden="true"></span>
+              <span class="wire-announcement__icon">
+                <span
+                  class='{icon}'
+                  aria-hidden="true"
+                ></span>
               </span>
             {/if}
 
-            <div class="min-w-0">
-              <div class="flex flex-wrap items-center gap-2">
+            <div class="wire-announcement__copy">
+              <div class="wire-announcement__headline">
                 {#if badge}
-                  <Badge
-                    label='{badge}'
-                    icon='{badgeIcon}'
-                    size="sm"
-                    color='{color}'
-                    variant='{variant === "solid" ? "outline" : "solid"}'
-                  />
+                  <span class="wire-announcement__badge">
+                    {#if badgeIcon}
+                      <span
+                        class='{badgeIcon}'
+                        aria-hidden="true"
+                      ></span>
+                    {/if}
+
+                    <span>{badge}</span>
+                  </span>
                 {/if}
 
-                <p
-                  class="font-semibold"
-                  class:text-sm='compact || size === "sm"'
-                  class:text-base='!compact && size !== "sm"'
-                  class:text-[var(--wire-color-text)]='variant !== "solid"'
-                >
+                <p class="wire-announcement__message">
                   {message}
                 </p>
               </div>
 
               {#if description && !compact}
-                <p
-                  class="mt-1 text-sm leading-6"
-                  class:text-[var(--wire-color-text-muted)]='variant !== "solid"'
-                  class:opacity-85='variant === "solid"'
-                >
+                <p class="wire-announcement__description">
                   {description}
                 </p>
               {/if}
             </div>
           </div>
 
-          <div class="flex shrink-0 items-center gap-2 sm:justify-end">
-            {#if actionLabel}
-              <TextLink
-                label='{actionLabel}'
-                href='{actionHref}'
-                icon='{actionIcon}'
-                iconPosition="start"
-                showArrow="true"
-                color='{variant === "solid" ? "neutral" : color}'
-                variant='{variant === "solid" ? "button" : "default"}'
-              />
-            {/if}
+          {#if actionLabel || dismissible}
+            <div class="wire-announcement__actions">
+              {#if actionLabel}
+                <a
+                  href='{actionHref || "#"}'
+                  class="wire-announcement__action"
+                >
+                  <span>{actionLabel}</span>
 
-            {#if dismissible}
-              <button
-                type="button"
-                aria-label='{dismissLabel}'
-                class="inline-flex size-9 items-center justify-center rounded-lg text-[var(--wire-color-text-muted)] transition hover:bg-[var(--wire-color-surface-raised)] hover:text-[var(--wire-color-text)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-focus)]"
-                @click='dismissed = true; event.currentTarget.dispatchEvent(new CustomEvent("dismiss", { bubbles: true }))'
-              >
-                <span class="icon-[lucide--x] size-4" aria-hidden="true"></span>
-              </button>
-            {/if}
-          </div>
+                  {#if actionIcon}
+                    <span
+                      class='{actionIcon}'
+                      aria-hidden="true"
+                    ></span>
+                  {:else}
+                    <span
+                      class="icon-[lucide--arrow-right]"
+                      aria-hidden="true"
+                    ></span>
+                  {/if}
+                </a>
+              {/if}
+
+              {#if dismissible}
+                <button
+                  type="button"
+                  aria-label='{dismissLabel}'
+                  title='{dismissLabel}'
+                  class="wire-announcement__dismiss"
+                  @click='dismissed = true; event.currentTarget.dispatchEvent(new CustomEvent("dismiss", { bubbles: true, detail: { message: message } }))'
+                >
+                  <span
+                    class="icon-[lucide--x]"
+                    aria-hidden="true"
+                  ></span>
+                </button>
+              {/if}
+            </div>
+          {/if}
         </div>
-      </Container>
+      </div>
     </aside>
   }
+
+  style {
+    .wire-announcement {
+      --announcement-accent: var(--wire-color-primary);
+      --announcement-contrast: var(--wire-color-primary-contrast, #ffffff);
+      --announcement-soft: var(--wire-color-primary-soft);
+      --announcement-muted: var(--wire-color-primary-muted);
+
+      position: relative;
+      z-index: 40;
+      display: block;
+      width: 100vw;
+      max-width: 100vw;
+      margin-inline: calc(50% - 50vw);
+      color: var(--wire-color-text);
+    }
+
+    .wire-announcement__surface {
+      width: min(calc(100% - 2rem), 72rem);
+      margin-inline: auto;
+    }
+
+    .wire-announcement[data-width="wide"] .wire-announcement__surface {
+      width: min(calc(100% - 2rem), 90rem);
+    }
+
+    .wire-announcement[data-width="full"] .wire-announcement__surface {
+      width: 100%;
+      max-width: none;
+      margin-inline: 0;
+      border-inline: 0;
+      border-radius: 0;
+    }
+
+    .wire-announcement[data-sticky="true"] {
+      position: sticky;
+      top: 0;
+    }
+
+    .wire-announcement[data-color="secondary"] {
+      --announcement-accent: var(--wire-color-secondary);
+      --announcement-contrast: var(--wire-color-secondary-contrast, #ffffff);
+      --announcement-soft: var(--wire-color-secondary-soft);
+      --announcement-muted: var(--wire-color-secondary-muted);
+    }
+
+    .wire-announcement[data-color="info"] {
+      --announcement-accent: var(--wire-color-info);
+      --announcement-contrast: var(--wire-color-info-contrast, #ffffff);
+      --announcement-soft: var(--wire-color-info-soft);
+      --announcement-muted: var(--wire-color-info-muted);
+    }
+
+    .wire-announcement[data-color="success"] {
+      --announcement-accent: var(--wire-color-success);
+      --announcement-contrast: var(--wire-color-success-contrast, #ffffff);
+      --announcement-soft: var(--wire-color-success-soft);
+      --announcement-muted: var(--wire-color-success-muted);
+    }
+
+    .wire-announcement[data-color="warning"] {
+      --announcement-accent: var(--wire-color-warning);
+      --announcement-contrast: var(--wire-color-warning-contrast, #111827);
+      --announcement-soft: var(--wire-color-warning-soft);
+      --announcement-muted: var(--wire-color-warning-muted);
+    }
+
+    .wire-announcement[data-color="danger"] {
+      --announcement-accent: var(--wire-color-danger);
+      --announcement-contrast: var(--wire-color-danger-contrast, #ffffff);
+      --announcement-soft: var(--wire-color-danger-soft);
+      --announcement-muted: var(--wire-color-danger-muted);
+    }
+
+    .wire-announcement__surface {
+      position: relative;
+      isolation: isolate;
+      overflow: hidden;
+      background: var(--wire-color-surface-raised);
+      border: 1px solid var(--wire-color-border);
+      border-radius: 1.25rem;
+      box-shadow:
+        0 1px 2px rgb(0 0 0 / 0.04),
+        0 12px 32px rgb(0 0 0 / 0.08);
+    }
+
+    .wire-announcement[data-variant="soft"] .wire-announcement__surface {
+      background:
+        linear-gradient(
+          135deg,
+          color-mix(in srgb, var(--announcement-soft) 86%, var(--wire-color-surface-raised)),
+          var(--wire-color-surface-raised)
+        );
+      border-color: color-mix(in srgb, var(--announcement-accent) 28%, var(--wire-color-border));
+    }
+
+    .wire-announcement[data-variant="outline"] .wire-announcement__surface {
+      background: transparent;
+      border-color: color-mix(in srgb, var(--announcement-accent) 46%, var(--wire-color-border));
+      box-shadow: none;
+    }
+
+    .wire-announcement[data-variant="minimal"] .wire-announcement__surface {
+      background: transparent;
+      border-color: transparent;
+      border-radius: 0;
+      box-shadow: none;
+    }
+
+    .wire-announcement[data-variant="solid"] {
+      color: var(--announcement-contrast);
+    }
+
+    .wire-announcement[data-variant="solid"] .wire-announcement__surface {
+      background:
+        radial-gradient(
+          circle at 8% 15%,
+          color-mix(in srgb, var(--announcement-contrast) 14%, transparent),
+          transparent 30%
+        ),
+        linear-gradient(
+          135deg,
+          color-mix(in srgb, var(--announcement-accent) 96%, white 4%),
+          color-mix(in srgb, var(--announcement-accent) 76%, black 24%)
+        );
+      border-color: color-mix(in srgb, var(--announcement-contrast) 28%, transparent);
+      box-shadow:
+        0 1px 0 color-mix(in srgb, var(--announcement-contrast) 20%, transparent) inset,
+        0 18px 46px color-mix(in srgb, var(--announcement-accent) 30%, transparent);
+    }
+
+    .wire-announcement__accent {
+      position: absolute;
+      z-index: -1;
+      inset-block: 0;
+      inset-inline-start: 0;
+      width: 0.25rem;
+      background: var(--announcement-accent);
+    }
+
+    .wire-announcement[data-variant="solid"] .wire-announcement__accent,
+    .wire-announcement[data-variant="minimal"] .wire-announcement__accent {
+      display: none;
+    }
+
+    .wire-announcement__glow {
+      position: absolute;
+      z-index: -1;
+      display: block;
+      border-radius: 999px;
+      pointer-events: none;
+      filter: blur(3rem);
+      opacity: 0.28;
+    }
+
+    .wire-announcement__glow--one {
+      width: 16rem;
+      height: 16rem;
+      inset-block-start: -10rem;
+      inset-inline-end: -4rem;
+      background: var(--announcement-muted);
+    }
+
+    .wire-announcement__glow--two {
+      width: 10rem;
+      height: 10rem;
+      inset-block-end: -7rem;
+      inset-inline-start: 28%;
+      background: var(--announcement-soft);
+      opacity: 0.18;
+    }
+
+    .wire-announcement[data-variant="solid"] .wire-announcement__glow {
+      background: var(--announcement-contrast);
+      opacity: 0.1;
+    }
+
+    .wire-announcement[data-variant="minimal"] .wire-announcement__glow {
+      display: none;
+    }
+
+    .wire-announcement__inner {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      width: 100%;
+      padding: 1rem 1.125rem;
+    }
+
+    .wire-announcement[data-size="sm"] .wire-announcement__inner,
+    .wire-announcement[data-compact="true"] .wire-announcement__inner {
+      padding-block: 0.75rem;
+    }
+
+    .wire-announcement[data-size="lg"] .wire-announcement__inner {
+      padding: 1.25rem 1.5rem;
+    }
+
+    .wire-announcement__content {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.875rem;
+      min-width: 0;
+    }
+
+    .wire-announcement__icon {
+      display: inline-flex;
+      flex: 0 0 auto;
+      align-items: center;
+      justify-content: center;
+      width: 2.75rem;
+      height: 2.75rem;
+      color: var(--announcement-accent);
+      background: var(--announcement-soft);
+      border: 1px solid color-mix(in srgb, var(--announcement-accent) 20%, transparent);
+      border-radius: 0.875rem;
+      box-shadow: 0 8px 20px color-mix(in srgb, var(--announcement-accent) 12%, transparent);
+    }
+
+    .wire-announcement__icon > span {
+      width: 1.2rem;
+      height: 1.2rem;
+    }
+
+    .wire-announcement[data-size="sm"] .wire-announcement__icon,
+    .wire-announcement[data-compact="true"] .wire-announcement__icon {
+      width: 2.35rem;
+      height: 2.35rem;
+      border-radius: 0.75rem;
+    }
+
+    .wire-announcement[data-size="lg"] .wire-announcement__icon {
+      width: 3.15rem;
+      height: 3.15rem;
+    }
+
+    .wire-announcement[data-variant="solid"] .wire-announcement__icon {
+      color: var(--announcement-contrast);
+      background: color-mix(in srgb, var(--announcement-contrast) 12%, transparent);
+      border-color: color-mix(in srgb, var(--announcement-contrast) 22%, transparent);
+      box-shadow: none;
+    }
+
+    .wire-announcement__copy {
+      flex: 1 1 auto;
+      min-width: 0;
+      padding-top: 0.1rem;
+    }
+
+    .wire-announcement__headline {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.55rem 0.8rem;
+    }
+
+    .wire-announcement__badge {
+      display: inline-flex;
+      flex: 0 0 auto;
+      align-items: center;
+      gap: 0.35rem;
+      min-height: 1.6rem;
+      padding: 0.25rem 0.65rem;
+      color: var(--announcement-accent);
+      font-size: 0.6875rem;
+      font-weight: 700;
+      line-height: 1;
+      white-space: nowrap;
+      background: var(--announcement-soft);
+      border: 1px solid color-mix(in srgb, var(--announcement-accent) 22%, transparent);
+      border-radius: 999px;
+    }
+
+    .wire-announcement__badge > span:first-child:not(:last-child) {
+      width: 0.8rem;
+      height: 0.8rem;
+    }
+
+    .wire-announcement[data-variant="solid"] .wire-announcement__badge {
+      color: var(--announcement-contrast);
+      background: color-mix(in srgb, var(--announcement-contrast) 13%, transparent);
+      border-color: color-mix(in srgb, var(--announcement-contrast) 24%, transparent);
+    }
+
+    .wire-announcement__message {
+      margin: 0;
+      color: var(--wire-color-text);
+      font-size: 0.9375rem;
+      font-weight: 650;
+      line-height: 1.5;
+    }
+
+    .wire-announcement[data-size="sm"] .wire-announcement__message,
+    .wire-announcement[data-compact="true"] .wire-announcement__message {
+      font-size: 0.875rem;
+    }
+
+    .wire-announcement[data-size="lg"] .wire-announcement__message {
+      font-size: 1rem;
+    }
+
+    .wire-announcement[data-variant="solid"] .wire-announcement__message {
+      color: var(--announcement-contrast);
+    }
+
+    .wire-announcement__description {
+      max-width: 52rem;
+      margin: 0.28rem 0 0;
+      color: var(--wire-color-text-muted);
+      font-size: 0.8125rem;
+      line-height: 1.55;
+    }
+
+    .wire-announcement[data-size="lg"] .wire-announcement__description {
+      font-size: 0.875rem;
+    }
+
+    .wire-announcement[data-variant="solid"] .wire-announcement__description {
+      color: color-mix(in srgb, var(--announcement-contrast) 76%, transparent);
+    }
+
+    .wire-announcement__actions {
+      display: flex;
+      flex: 0 0 auto;
+      align-items: center;
+      gap: 0.55rem;
+      padding-inline-start: 3.625rem;
+    }
+
+    .wire-announcement__action,
+    .wire-announcement__dismiss {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 2.5rem;
+      color: var(--wire-color-text);
+      font-size: 0.8125rem;
+      font-weight: 650;
+      text-decoration: none;
+      background: var(--wire-color-surface-raised);
+      border: 1px solid var(--wire-color-border);
+      border-radius: 0.75rem;
+      box-shadow: 0 5px 14px rgb(0 0 0 / 0.06);
+      transition:
+        transform 160ms ease,
+        border-color 160ms ease,
+        background-color 160ms ease,
+        box-shadow 160ms ease;
+    }
+
+    .wire-announcement__action {
+      gap: 0.45rem;
+      padding: 0.55rem 0.9rem;
+    }
+
+    .wire-announcement__action > span:last-child {
+      width: 0.95rem;
+      height: 0.95rem;
+      transition: transform 160ms ease;
+    }
+
+    .wire-announcement__dismiss {
+      width: 2.5rem;
+      padding: 0;
+      cursor: pointer;
+    }
+
+    .wire-announcement__dismiss > span {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    .wire-announcement__action:hover,
+    .wire-announcement__dismiss:hover {
+      transform: translateY(-1px);
+      border-color: color-mix(in srgb, var(--announcement-accent) 42%, var(--wire-color-border));
+      box-shadow: 0 8px 20px rgb(0 0 0 / 0.1);
+    }
+
+    .wire-announcement__action:hover > span:last-child {
+      transform: translateX(0.16rem);
+    }
+
+    .wire-announcement__action:focus-visible,
+    .wire-announcement__dismiss:focus-visible {
+      outline: 2px solid var(--wire-color-focus, var(--announcement-accent));
+      outline-offset: 3px;
+    }
+
+    .wire-announcement[data-variant="solid"] .wire-announcement__action {
+      color: var(--announcement-accent);
+      background: var(--announcement-contrast);
+      border-color: transparent;
+      box-shadow: 0 8px 22px color-mix(in srgb, black 18%, transparent);
+    }
+
+    .wire-announcement[data-variant="solid"] .wire-announcement__dismiss {
+      color: var(--announcement-contrast);
+      background: color-mix(in srgb, var(--announcement-contrast) 13%, transparent);
+      border-color: color-mix(in srgb, var(--announcement-contrast) 24%, transparent);
+      box-shadow: none;
+    }
+
+    .wire-announcement[data-variant="solid"] .wire-announcement__action:hover {
+      background: color-mix(in srgb, var(--announcement-contrast) 92%, transparent);
+    }
+
+    .wire-announcement[data-variant="solid"] .wire-announcement__dismiss:hover {
+      background: color-mix(in srgb, var(--announcement-contrast) 20%, transparent);
+      border-color: color-mix(in srgb, var(--announcement-contrast) 34%, transparent);
+    }
+
+    @media (min-width: 768px) {
+      .wire-announcement__inner {
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        gap: 1.5rem;
+      }
+
+      .wire-announcement__content {
+        flex: 1 1 auto;
+      }
+
+      .wire-announcement__actions {
+        justify-content: flex-end;
+        padding-inline-start: 0;
+      }
+    }
+
+    @media (max-width: 639px) {
+      .wire-announcement__surface,
+      .wire-announcement[data-width="wide"] .wire-announcement__surface {
+        width: calc(100% - 1rem);
+      }
+
+      .wire-announcement[data-width="full"] .wire-announcement__surface {
+        width: 100%;
+        border-radius: 0;
+      }
+
+      .wire-announcement__surface {
+        border-radius: 1rem;
+      }
+
+      .wire-announcement__inner {
+        padding-inline: 0.9rem;
+      }
+
+      .wire-announcement__actions {
+        width: 100%;
+        padding-inline-start: 3.625rem;
+      }
+
+      .wire-announcement__action {
+        flex: 1 1 auto;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .wire-announcement__action,
+      .wire-announcement__dismiss,
+      .wire-announcement__action > span:last-child {
+        transition: none;
+      }
+
+      .wire-announcement__action:hover,
+      .wire-announcement__dismiss:hover,
+      .wire-announcement__action:hover > span:last-child {
+        transform: none;
+      }
+    }
+  }
 }
diff --git a/packages/ui/components/BackToTop.wrn b/packages/ui/components/BackToTop.wrn
index 42d2e157..8b1c0d21 100644
--- a/packages/ui/components/BackToTop.wrn
+++ b/packages/ui/components/BackToTop.wrn
@@ -8,9 +8,12 @@ component BackToTop {
     offset = "md"
     behavior = "smooth"
     showProgress = false
+    showLabel = false
+    alwaysVisible = false
     size = "default"
     color = "primary"
     variant = "solid"
+    shape = "round"
     class = ""
   }
 
@@ -19,51 +22,316 @@ component BackToTop {
 
   view {
     <button
+      {...attrs}
       data-ui-component="BackToTop"
       type="button"
       aria-label='{ariaLabel}'
       title='{label}'
-      data-show='visible'
-      class='fixed z-50 inline-flex items-center justify-center rounded-full border border-[var(--wire-color-border)] shadow-xl backdrop-blur transition duration-200 hover:-translate-y-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--wire-color-focus)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--wire-color-background)] {class}'
-      class:bottom-4='offset === "sm"'
-      class:bottom-6='offset === "md"'
-      class:bottom-8='offset === "lg"'
-      class:right-4='position === "right" && offset === "sm"'
-      class:right-6='position === "right" && offset === "md"'
-      class:right-8='position === "right" && offset === "lg"'
-      class:left-4='position === "left" && offset === "sm"'
-      class:left-6='position === "left" && offset === "md"'
-      class:left-8='position === "left" && offset === "lg"'
-      class:left-1/2='position === "center"'
-      class:-translate-x-1/2='position === "center"'
-      class:size-10='size === "sm"'
-      class:size-12='size === "default" || size === "md"'
-      class:size-14='size === "lg"'
-      class:bg-[var(--wire-color-primary)]='variant === "solid" && color === "primary"'
-      class:text-[var(--wire-color-on-primary)]='variant === "solid" && color === "primary"'
-      class:bg-[var(--wire-color-danger)]='variant === "solid" && color === "danger"'
-      class:text-[var(--wire-color-on-danger)]='variant === "solid" && color === "danger"'
-      class:bg-[var(--wire-color-surface-raised)]='variant === "outline" || variant === "soft"'
-      class:text-[var(--wire-color-primary)]='variant === "outline" || variant === "soft"'
+      data-position='{position}'
+      data-offset='{offset}'
+      data-size='{size}'
+      data-color='{color}'
+      data-variant='{variant}'
+      data-shape='{shape}'
+      data-show-label='{showLabel ? "true" : "false"}'
+      data-progress='{showProgress ? "true" : "false"}'
+      data-show='{alwaysVisible || visible}'
+      class='wire-back-to-top {class}'
       style='--wire-back-to-top-progress: {progress}%;'
-      @window:scroll='visible = window.scrollY >= threshold; progress = Math.min(100, Math.round((window.scrollY / Math.max(1, document.documentElement.scrollHeight - window.innerHeight)) * 100))'
+      @window:scroll='visible = window.scrollY >= threshold; progress = Math.min(100, Math.max(0, Math.round((window.scrollY / Math.max(1, document.documentElement.scrollHeight - window.innerHeight)) * 100)))'
       @click='window.scrollTo({ top: 0, behavior: behavior })'
     >
       {#if showProgress}
-        <span class="wire-back-to-top-progress absolute inset-0 rounded-full" aria-hidden="true"></span>
+        <span class="wire-back-to-top__progress" aria-hidden="true"></span>
       {/if}
-      <span class='{icon + " relative z-10 size-5"}' aria-hidden="true"></span>
-      <span class="sr-only">{label}</span>
+
+      <span class="wire-back-to-top__surface">
+        <span class='wire-back-to-top__icon {icon}' aria-hidden="true"></span>
+
+        {#if showLabel}
+          <span class="wire-back-to-top__label">{label}</span>
+        {/if}
+      </span>
+
+      <span class="wire-back-to-top__sr">{label}</span>
     </button>
   }
 
   style {
-    .wire-back-to-top-progress {
+    .wire-back-to-top {
+      --back-accent: var(--wire-color-primary);
+      --back-accent-hover: var(--wire-color-primary-hover);
+      --back-accent-soft: var(--wire-color-primary-soft);
+      --back-contrast: var(--wire-color-primary-contrast);
+
+      position: fixed;
+      z-index: 70;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 3rem;
+      min-height: 3rem;
+      padding: 0;
+      color: var(--back-contrast);
+      background: transparent;
+      border: 0;
+      border-radius: 999px;
+      cursor: pointer;
+      filter: drop-shadow(0 14px 30px color-mix(in srgb, black 22%, transparent));
+      transition:
+        transform 180ms ease,
+        opacity 180ms ease,
+        filter 180ms ease;
+    }
+
+    .wire-back-to-top[data-color="secondary"] {
+      --back-accent: var(--wire-color-secondary);
+      --back-accent-hover: var(--wire-color-secondary-hover);
+      --back-accent-soft: var(--wire-color-secondary-soft);
+      --back-contrast: var(--wire-color-secondary-contrast);
+    }
+
+    .wire-back-to-top[data-color="info"] {
+      --back-accent: var(--wire-color-info);
+      --back-accent-hover: var(--wire-color-info-hover);
+      --back-accent-soft: var(--wire-color-info-soft);
+      --back-contrast: var(--wire-color-info-contrast);
+    }
+
+    .wire-back-to-top[data-color="success"] {
+      --back-accent: var(--wire-color-success);
+      --back-accent-hover: var(--wire-color-success-hover);
+      --back-accent-soft: var(--wire-color-success-soft);
+      --back-contrast: var(--wire-color-success-contrast);
+    }
+
+    .wire-back-to-top[data-color="warning"] {
+      --back-accent: var(--wire-color-warning);
+      --back-accent-hover: var(--wire-color-warning-hover);
+      --back-accent-soft: var(--wire-color-warning-soft);
+      --back-contrast: var(--wire-color-warning-contrast);
+    }
+
+    .wire-back-to-top[data-color="danger"] {
+      --back-accent: var(--wire-color-danger);
+      --back-accent-hover: var(--wire-color-danger-hover);
+      --back-accent-soft: var(--wire-color-danger-soft);
+      --back-contrast: var(--wire-color-danger-contrast);
+    }
+
+    .wire-back-to-top[data-position="right"] {
+      right: 1.5rem;
+    }
+
+    .wire-back-to-top[data-position="left"] {
+      left: 1.5rem;
+    }
+
+    .wire-back-to-top[data-position="center"] {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .wire-back-to-top[data-position="center"]:hover {
+      transform: translateX(-50%) translateY(-3px);
+    }
+
+    .wire-back-to-top[data-offset="sm"] {
+      bottom: 1rem;
+    }
+
+    .wire-back-to-top[data-offset="md"] {
+      bottom: 1.5rem;
+    }
+
+    .wire-back-to-top[data-offset="lg"] {
+      bottom: 2rem;
+    }
+
+    .wire-back-to-top[data-offset="xl"] {
+      bottom: 3rem;
+    }
+
+    .wire-back-to-top[data-size="sm"] {
+      min-width: 2.5rem;
+      min-height: 2.5rem;
+    }
+
+    .wire-back-to-top[data-size="lg"] {
+      min-width: 3.5rem;
+      min-height: 3.5rem;
+    }
+
+    .wire-back-to-top[data-show-label="true"] {
+      min-width: 0;
+    }
+
+    .wire-back-to-top:hover {
+      transform: translateY(-3px);
+      filter: drop-shadow(0 18px 36px color-mix(in srgb, var(--back-accent) 24%, transparent));
+    }
+
+    .wire-back-to-top:active {
+      transform: translateY(-1px) scale(0.98);
+    }
+
+    .wire-back-to-top__surface {
+      position: relative;
+      z-index: 2;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.55rem;
+      min-width: 3rem;
+      min-height: 3rem;
+      padding: 0.75rem;
+      color: var(--back-contrast);
+      background:
+        linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 56%),
+        var(--back-accent);
+      border: 1px solid color-mix(in srgb, white 18%, transparent);
+      border-radius: inherit;
+      box-shadow:
+        0 1px 0 color-mix(in srgb, white 20%, transparent) inset,
+        0 10px 24px color-mix(in srgb, black 18%, transparent);
+      backdrop-filter: blur(12px);
+      transition:
+        background-color 160ms ease,
+        border-color 160ms ease,
+        color 160ms ease;
+    }
+
+    .wire-back-to-top[data-size="sm"] .wire-back-to-top__surface {
+      min-width: 2.5rem;
+      min-height: 2.5rem;
+      padding: 0.58rem;
+    }
+
+    .wire-back-to-top[data-size="lg"] .wire-back-to-top__surface {
+      min-width: 3.5rem;
+      min-height: 3.5rem;
+      padding: 0.9rem;
+    }
+
+    .wire-back-to-top[data-show-label="true"] .wire-back-to-top__surface {
+      min-width: 0;
+      padding-inline: 1rem;
+    }
+
+    .wire-back-to-top[data-variant="outline"] .wire-back-to-top__surface {
+      color: var(--back-accent);
+      background: color-mix(in srgb, var(--wire-color-surface-raised) 88%, transparent);
+      border-color: color-mix(in srgb, var(--back-accent) 46%, var(--wire-color-border));
+    }
+
+    .wire-back-to-top[data-variant="soft"] .wire-back-to-top__surface {
+      color: var(--back-accent);
+      background: color-mix(in srgb, var(--back-accent-soft) 88%, var(--wire-color-surface-raised));
+      border-color: color-mix(in srgb, var(--back-accent) 22%, var(--wire-color-border));
+    }
+
+    .wire-back-to-top[data-variant="ghost"] .wire-back-to-top__surface {
+      color: var(--back-accent);
+      background: color-mix(in srgb, var(--wire-color-surface-raised) 68%, transparent);
+      border-color: transparent;
+      box-shadow: none;
+    }
+
+    .wire-back-to-top[data-variant="minimal"] .wire-back-to-top__surface {
+      color: var(--back-accent);
+      background: transparent;
+      border-color: transparent;
+      box-shadow: none;
+      backdrop-filter: none;
+    }
+
+    .wire-back-to-top[data-shape="rounded"] {
+      border-radius: 0.9rem;
+    }
+
+    .wire-back-to-top[data-shape="pill"] {
+      border-radius: 999px;
+    }
+
+    .wire-back-to-top__progress {
+      position: absolute;
+      inset: -0.22rem;
+      z-index: 1;
+      border-radius: inherit;
       background: conic-gradient(
-        currentColor var(--wire-back-to-top-progress),
-        transparent var(--wire-back-to-top-progress)
+        var(--back-accent) var(--wire-back-to-top-progress),
+        color-mix(in srgb, var(--wire-color-border) 72%, transparent) var(--wire-back-to-top-progress)
       );
-      opacity: 0.22;
+      mask: radial-gradient(farthest-side, transparent calc(100% - 0.18rem), #000 calc(100% - 0.17rem));
+      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.18rem), #000 calc(100% - 0.17rem));
+      pointer-events: none;
+    }
+
+    .wire-back-to-top__icon {
+      width: 1.1rem;
+      height: 1.1rem;
+      flex: 0 0 auto;
+    }
+
+    .wire-back-to-top[data-size="sm"] .wire-back-to-top__icon {
+      width: 0.95rem;
+      height: 0.95rem;
+    }
+
+    .wire-back-to-top[data-size="lg"] .wire-back-to-top__icon {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+
+    .wire-back-to-top__label {
+      white-space: nowrap;
+      font-size: 0.78rem;
+      font-weight: 700;
+      line-height: 1;
+    }
+
+    .wire-back-to-top__sr {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    .wire-back-to-top:focus-visible {
+      outline: 2px solid var(--wire-color-focus);
+      outline-offset: 4px;
+    }
+
+    @media (max-width: 639px) {
+      .wire-back-to-top[data-position="right"] {
+        right: 1rem;
+      }
+
+      .wire-back-to-top[data-position="left"] {
+        left: 1rem;
+      }
+
+      .wire-back-to-top[data-offset="lg"],
+      .wire-back-to-top[data-offset="xl"] {
+        bottom: 1.25rem;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .wire-back-to-top,
+      .wire-back-to-top__surface {
+        transition: none;
+      }
+
+      .wire-back-to-top:hover,
+      .wire-back-to-top[data-position="center"]:hover {
+        transform: none;
+      }
     }
   }
 }
diff --git a/packages/ui/components/Breadcrumb.wrn b/packages/ui/components/Breadcrumb.wrn
index 1fee40b5..86c14545 100644
--- a/packages/ui/components/Breadcrumb.wrn
+++ b/packages/ui/components/Breadcrumb.wrn
@@ -1,19 +1,321 @@
 component Breadcrumb {
   props {
-    @event navigate = function
-    @event click = function
-    size = "default"
-    color = "primary"
+    @event select = function
+
     label = "Breadcrumb"
     items = []
     active = ""
-    orientation = "horizontal"
+    separator = "chevron"
+    showHome = false
+    homeLabel = "Home"
+    homeHref = "/"
+    homeIcon = "icon-[lucide--house]"
+    size = "default"
+    color = "primary"
+    variant = "minimal"
     class = ""
   }
+
   view {
-    <nav class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--breadcrumb wire-next--{orientation} {class}" aria-label="{label}">
-      {#each items as item}<a href="{item.href}" aria-current="{item.value === active ? 'page' : ''}">{item.label}</a>{/each}
-      <slot />
+    <nav
+      {...attrs}
+      data-ui-component="Breadcrumb"
+      data-size='{size}'
+      data-color='{color}'
+      data-variant='{variant}'
+      aria-label='{label}'
+      class='wire-breadcrumb {class}'
+    >
+      <ol class="wire-breadcrumb__list">
+        {#if showHome}
+          <li class="wire-breadcrumb__item wire-breadcrumb__item--home">
+            <a
+              href='{homeHref || "/"}'
+              class="wire-breadcrumb__link wire-breadcrumb__home"
+              @click='event.currentTarget.dispatchEvent(new CustomEvent("select", { bubbles: true, detail: { item: { label: homeLabel, href: homeHref || "/", value: "home" }, itemIndex: -1 } }))'
+            >
+              {#if homeIcon === "icon-[lucide--house]"}
+                <span class="icon-[lucide--house] wire-breadcrumb__icon" aria-hidden="true"></span>
+              {:else if homeIcon}
+                <span class='{homeIcon} wire-breadcrumb__icon' aria-hidden="true"></span>
+              {/if}
+
+              <span class="wire-breadcrumb__home-label">{homeLabel}</span>
+            </a>
+          </li>
+        {/if}
+
+        {#each items as item, itemIndex}
+          <li
+            class="wire-breadcrumb__item"
+            data-current='{item.active || item.current || (active && active === (item.value || item.label || item.title)) || (!active && itemIndex === items.length - 1) ? "true" : "false"}'
+          >
+            {#if showHome || itemIndex > 0}
+              <span class="wire-breadcrumb__separator" aria-hidden="true">
+                {#if separator === "slash"}
+                  <span>/</span>
+                {:else if separator === "dot"}
+                  <span>•</span>
+                {:else if separator === "arrow"}
+                  <span>→</span>
+                {:else}
+                  <span class="icon-[lucide--chevron-right] wire-breadcrumb__separator-icon"></span>
+                {/if}
+              </span>
+            {/if}
+
+            {#if item.href && !item.disabled && !(item.active || item.current || (active && active === (item.value || item.label || item.title)) || (!active && itemIndex === items.length - 1))}
+              <a
+                href='{item.href}'
+                target='{item.target || ""}'
+                rel='{item.external ? "noopener noreferrer" : (item.rel || "")}'
+                class="wire-breadcrumb__link"
+                @click='event.currentTarget.dispatchEvent(new CustomEvent("select", { bubbles: true, detail: { item: item, itemIndex: itemIndex } }))'
+              >
+                {#if item.icon}
+                  <span class='{item.icon} wire-breadcrumb__icon' aria-hidden="true"></span>
+                {/if}
+
+                <span class="wire-breadcrumb__label">{item.label || item.title}</span>
+
+                {#if item.external}
+                  <span class="icon-[lucide--arrow-up-right] wire-breadcrumb__external" aria-hidden="true"></span>
+                {/if}
+              </a>
+            {:else}
+              <span
+                class="wire-breadcrumb__current"
+                aria-current='{item.active || item.current || (active && active === (item.value || item.label || item.title)) || (!active && itemIndex === items.length - 1) ? "page" : ""}'
+                aria-disabled='{item.disabled ? "true" : "false"}'
+              >
+                {#if item.icon}
+                  <span class='{item.icon} wire-breadcrumb__icon' aria-hidden="true"></span>
+                {/if}
+
+                <span class="wire-breadcrumb__label">{item.label || item.title}</span>
+              </span>
+            {/if}
+          </li>
+        {/each}
+      </ol>
     </nav>
   }
+
+  style {
+    .wire-breadcrumb {
+      --breadcrumb-accent: var(--wire-color-primary);
+      --breadcrumb-soft: var(--wire-color-primary-soft);
+      --breadcrumb-muted: var(--wire-color-primary-muted);
+      --breadcrumb-text: var(--wire-color-primary-text);
+
+      min-width: 0;
+      color: var(--wire-color-text-muted);
+    }
+
+    .wire-breadcrumb[data-color="secondary"] {
+      --breadcrumb-accent: var(--wire-color-secondary);
+      --breadcrumb-soft: var(--wire-color-secondary-soft);
+      --breadcrumb-muted: var(--wire-color-secondary-muted);
+      --breadcrumb-text: var(--wire-color-secondary-text);
+    }
+
+    .wire-breadcrumb[data-color="info"] {
+      --breadcrumb-accent: var(--wire-color-info);
+      --breadcrumb-soft: var(--wire-color-info-soft);
+      --breadcrumb-muted: var(--wire-color-info-muted);
+      --breadcrumb-text: var(--wire-color-info-text);
+    }
+
+    .wire-breadcrumb[data-color="success"] {
+      --breadcrumb-accent: var(--wire-color-success);
+      --breadcrumb-soft: var(--wire-color-success-soft);
+      --breadcrumb-muted: var(--wire-color-success-muted);
+      --breadcrumb-text: var(--wire-color-success-text);
+    }
+
+    .wire-breadcrumb[data-color="warning"] {
+      --breadcrumb-accent: var(--wire-color-warning);
+      --breadcrumb-soft: var(--wire-color-warning-soft);
+      --breadcrumb-muted: var(--wire-color-warning-muted);
+      --breadcrumb-text: var(--wire-color-warning-text);
+    }
+
+    .wire-breadcrumb[data-color="danger"] {
+      --breadcrumb-accent: var(--wire-color-danger);
+      --breadcrumb-soft: var(--wire-color-danger-soft);
+      --breadcrumb-muted: var(--wire-color-danger-muted);
+      --breadcrumb-text: var(--wire-color-danger-text);
+    }
+
+    .wire-breadcrumb[data-variant="soft"] {
+      width: fit-content;
+      max-width: 100%;
+      padding: 0.45rem 0.65rem;
+      background: var(--breadcrumb-soft);
+      border: 1px solid var(--breadcrumb-muted);
+      border-radius: 0.75rem;
+    }
+
+    .wire-breadcrumb[data-variant="outline"] {
+      width: fit-content;
+      max-width: 100%;
+      padding: 0.45rem 0.65rem;
+      background: var(--wire-color-surface-raised);
+      border: 1px solid var(--wire-color-border);
+      border-radius: 0.75rem;
+      box-shadow: var(--wire-shadow-sm);
+    }
+
+    .wire-breadcrumb[data-variant="contrast"] {
+      color: rgba(255, 255, 255, 0.78);
+    }
+
+    .wire-breadcrumb__list {
+      display: flex;
+      align-items: center;
+      gap: 0;
+      min-width: 0;
+      margin: 0;
+      padding: 0;
+      overflow-x: auto;
+      list-style: none;
+      scrollbar-width: none;
+      white-space: nowrap;
+    }
+
+    .wire-breadcrumb__list::-webkit-scrollbar {
+      display: none;
+    }
+
+    .wire-breadcrumb__item {
+      display: inline-flex;
+      align-items: center;
+      min-width: 0;
+      flex: 0 0 auto;
+    }
+
+    .wire-breadcrumb__separator {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      margin-inline: 0.45rem;
+      color: var(--wire-color-text-subtle);
+      font-size: 0.75rem;
+      opacity: 0.72;
+    }
+
+    .wire-breadcrumb__separator-icon {
+      width: 0.9rem;
+      height: 0.9rem;
+    }
+
+    .wire-breadcrumb__link,
+    .wire-breadcrumb__current {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.4rem;
+      min-width: 0;
+      min-height: 2rem;
+      padding: 0.25rem 0.4rem;
+      border-radius: 0.55rem;
+      font-size: 0.8125rem;
+      line-height: 1.25rem;
+      text-decoration: none;
+    }
+
+    .wire-breadcrumb[data-size="sm"] .wire-breadcrumb__link,
+    .wire-breadcrumb[data-size="sm"] .wire-breadcrumb__current {
+      min-height: 1.75rem;
+      font-size: 0.75rem;
+    }
+
+    .wire-breadcrumb[data-size="lg"] .wire-breadcrumb__link,
+    .wire-breadcrumb[data-size="lg"] .wire-breadcrumb__current {
+      min-height: 2.25rem;
+      font-size: 0.875rem;
+    }
+
+    .wire-breadcrumb__link {
+      color: var(--wire-color-text-muted);
+      font-weight: 600;
+      transition:
+        color 160ms ease,
+        background 160ms ease;
+    }
+
+    .wire-breadcrumb__link:hover {
+      color: var(--breadcrumb-accent);
+      background: var(--breadcrumb-soft);
+    }
+
+    .wire-breadcrumb__link:focus-visible {
+      color: var(--breadcrumb-accent);
+      outline: 2px solid var(--breadcrumb-accent);
+      outline-offset: 2px;
+    }
+
+    .wire-breadcrumb__current {
+      max-width: 22rem;
+      color: var(--wire-color-text);
+      font-weight: 750;
+    }
+
+    .wire-breadcrumb__item[data-current="true"] .wire-breadcrumb__current {
+      color: var(--breadcrumb-text);
+      background: var(--breadcrumb-soft);
+    }
+
+    .wire-breadcrumb__current[aria-disabled="true"] {
+      opacity: 0.58;
+    }
+
+    .wire-breadcrumb__icon,
+    .wire-breadcrumb__external {
+      flex: 0 0 auto;
+      width: 0.95rem;
+      height: 0.95rem;
+    }
+
+    .wire-breadcrumb__home {
+      color: var(--breadcrumb-accent);
+    }
+
+    .wire-breadcrumb__label {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .wire-breadcrumb[data-variant="contrast"] .wire-breadcrumb__link,
+    .wire-breadcrumb[data-variant="contrast"] .wire-breadcrumb__current,
+    .wire-breadcrumb[data-variant="contrast"] .wire-breadcrumb__home {
+      color: inherit;
+    }
+
+    .wire-breadcrumb[data-variant="contrast"] .wire-breadcrumb__link:hover,
+    .wire-breadcrumb[data-variant="contrast"] .wire-breadcrumb__item[data-current="true"] .wire-breadcrumb__current {
+      color: #ffffff;
+      background: rgba(255, 255, 255, 0.12);
+    }
+
+    .wire-breadcrumb[data-variant="contrast"] .wire-breadcrumb__separator {
+      color: rgba(255, 255, 255, 0.62);
+    }
+
+    @media (max-width: 639px) {
+      .wire-breadcrumb__home-label {
+        display: none;
+      }
+
+      .wire-breadcrumb__current {
+        max-width: 13rem;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .wire-breadcrumb__link {
+        transition: none;
+      }
+    }
+  }
 }
diff --git a/packages/ui/components/CTASection.wrn b/packages/ui/components/CTASection.wrn
index 36453a83..83799a26 100644
--- a/packages/ui/components/CTASection.wrn
+++ b/packages/ui/components/CTASection.wrn
@@ -15,136 +15,684 @@ component CTASection {
     secondaryHref = ""
     secondaryIcon = ""
     backgroundImage = ""
+    visualImage = ""
+    visualAlt = ""
+    visualIcon = ""
+    visualTitle = ""
+    visualDescription = ""
+    visualItems = []
+    visualPosition = "right"
     maxWidth = "xl"
+    fullBleed = false
     class = ""
   }
 
   view {
-    <Section
-      spacing='{size === "compact" ? "md" : "lg"}'
-      variant="default"
-      color='{color}'
-      maxWidth='{maxWidth}'
-      class='{class}'
+    <section
+      {...attrs}
+      data-ui-component="CTASection"
+      data-align='{align}'
+      data-size='{size}'
+      data-color='{color}'
+      data-variant='{variant}'
+      data-max-width='{maxWidth}'
+      data-full-bleed='{fullBleed ? "true" : "false"}'
+      data-visual-position='{visualPosition}'
+      class='wire-cta-section {class}'
     >
-      <div
-        data-ui-component="CTASection"
-        class="relative isolate overflow-hidden rounded-3xl border border-[var(--wire-color-border)] p-8 shadow-xl sm:p-10 lg:p-14"
-        class:bg-[var(--wire-color-primary)]='variant === "solid" && color === "primary"'
-        class:text-[var(--wire-color-on-primary)]='variant === "solid" && color === "primary"'
-        class:bg-[var(--wire-color-danger)]='variant === "solid" && color === "danger"'
-        class:text-[var(--wire-color-on-danger)]='variant === "solid" && color === "danger"'
-        class:bg-[var(--wire-color-primary-soft)]='variant === "soft" && color === "primary"'
-        class:bg-[var(--wire-color-success-soft)]='variant === "soft" && color === "success"'
-        class:bg-[var(--wire-color-warning-soft)]='variant === "soft" && color === "warning"'
-        class:bg-[var(--wire-color-danger-soft)]='variant === "soft" && color === "danger"'
-        class:bg-[var(--wire-color-surface-raised)]='variant === "default" || variant === "outline"'
-        class:bg-gradient-to-br='variant === "gradient"'
-        class:from-[var(--wire-color-primary)]='variant === "gradient"'
-        class:to-[var(--wire-color-secondary)]='variant === "gradient"'
-        class:text-[var(--wire-color-on-primary)]='variant === "gradient"'
-        class:text-center='align === "center"'
-      >
-        {#if backgroundImage}
-          <img
-            src='{backgroundImage}'
-            alt=""
-            aria-hidden="true"
-            class="absolute inset-0 -z-20 h-full w-full object-cover opacity-15"
-          />
-        {/if}
+      <div class="wire-cta-section__outer">
+        <div class="wire-cta-section__surface">
+          {#if backgroundImage}
+            <img
+              src='{backgroundImage}'
+              alt=""
+              aria-hidden="true"
+              class="wire-cta-section__background-image"
+            />
+          {/if}
 
-        <div
-          class="pointer-events-none absolute -right-20 -top-20 -z-10 size-72 rounded-full bg-white/15 blur-3xl"
-          aria-hidden="true"
-        ></div>
-        <div
-          class="pointer-events-none absolute -bottom-24 -left-20 -z-10 size-72 rounded-full bg-black/10 blur-3xl"
-          aria-hidden="true"
-        ></div>
+          <div class="wire-cta-section__glow wire-cta-section__glow--one" aria-hidden="true"></div>
+          <div class="wire-cta-section__glow wire-cta-section__glow--two" aria-hidden="true"></div>
 
-        <div
-          class="flex flex-col gap-8"
-          class:items-center='align === "center"'
-          class:lg:flex-row='align === "split"'
-          class:lg:items-center='align === "split"'
-          class:lg:justify-between='align === "split"'
-        >
-          <div class="max-w-3xl">
-            {#if icon}
-              <span
-                class="mb-5 inline-flex size-12 items-center justify-center rounded-2xl bg-white/15"
-                class:bg-[var(--wire-color-primary-soft)]='variant !== "solid" && variant !== "gradient"'
-                class:text-[var(--wire-color-primary)]='variant !== "solid" && variant !== "gradient"'
-              >
-                <span class='{icon + " size-6"}' aria-hidden="true"></span>
-              </span>
-            {/if}
+          <div class="wire-cta-section__layout">
+            <div class="wire-cta-section__content">
+              {#if icon}
+                <div class="wire-cta-section__icon" aria-hidden="true">
+                  <span class='{icon}'></span>
+                </div>
+              {/if}
 
-            {#if eyebrow}
-              <p
-                class="text-xs font-bold uppercase tracking-[0.18em]"
-                class:text-[var(--wire-color-primary)]='variant !== "solid" && variant !== "gradient"'
-                class:opacity-80='variant === "solid" || variant === "gradient"'
-              >
-                {eyebrow}
-              </p>
-            {/if}
+              {#if eyebrow}
+                <p class="wire-cta-section__eyebrow">{eyebrow}</p>
+              {/if}
 
-            <h2
-              class="mt-3 text-3xl font-bold leading-tight tracking-tight sm:text-4xl lg:text-5xl"
-              class:text-[var(--wire-color-text)]='variant !== "solid" && variant !== "gradient"'
-            >
-              {title}
-            </h2>
+              <h2 class="wire-cta-section__title">{title}</h2>
 
-            {#if description}
-              <p
-                class="mt-4 text-base leading-7 sm:text-lg"
-                class:text-[var(--wire-color-text-muted)]='variant !== "solid" && variant !== "gradient"'
-                class:opacity-85='variant === "solid" || variant === "gradient"'
-              >
-                {description}
-              </p>
-            {/if}
+              {#if description}
+                <p class="wire-cta-section__description">{description}</p>
+              {/if}
 
-            <slot></slot>
+              <slot></slot>
+
+              {#if primaryLabel || secondaryLabel}
+                <div class="wire-cta-section__actions">
+                  {#if primaryLabel}
+                    <a href='{primaryHref || "#"}' class="wire-cta-section__action wire-cta-section__action--primary">
+                      {#if primaryIcon}
+                        <span class='wire-cta-section__action-icon {primaryIcon}' aria-hidden="true"></span>
+                      {/if}
+                      <span>{primaryLabel}</span>
+                    </a>
+                  {/if}
+
+                  {#if secondaryLabel}
+                    <a href='{secondaryHref || "#"}' class="wire-cta-section__action wire-cta-section__action--secondary">
+                      {#if secondaryIcon}
+                        <span class='wire-cta-section__action-icon {secondaryIcon}' aria-hidden="true"></span>
+                      {/if}
+                      <span>{secondaryLabel}</span>
+                    </a>
+                  {/if}
+
+                  <slot name="actions"></slot>
+                </div>
+              {:else}
+                <div class="wire-cta-section__actions wire-cta-section__actions--slot">
+                  <slot name="actions"></slot>
+                </div>
+              {/if}
+            </div>
+
+            <div class="wire-cta-section__visual-column">
+              <slot name="visual"></slot>
+
+              {#if visualImage || visualIcon || visualTitle || visualDescription || visualItems.length > 0}
+                <div class="wire-cta-section__visual">
+                  {#if visualImage}
+                    <div class="wire-cta-section__visual-media">
+                      <img src='{visualImage}' alt='{visualAlt}' class="wire-cta-section__visual-image" />
+                    </div>
+                  {/if}
+
+                  {#if visualIcon || visualTitle || visualDescription}
+                    <div class="wire-cta-section__visual-header">
+                      {#if visualIcon}
+                        <div class="wire-cta-section__visual-icon" aria-hidden="true">
+                          <span class='{visualIcon}'></span>
+                        </div>
+                      {/if}
+
+                      <div class="wire-cta-section__visual-copy">
+                        {#if visualTitle}
+                          <h3 class="wire-cta-section__visual-title">{visualTitle}</h3>
+                        {/if}
+
+                        {#if visualDescription}
+                          <p class="wire-cta-section__visual-description">{visualDescription}</p>
+                        {/if}
+                      </div>
+                    </div>
+                  {/if}
+
+                  {#if visualItems.length > 0}
+                    <div class="wire-cta-section__visual-list">
+                      {#each visualItems as item}
+                        <div class="wire-cta-section__visual-item">
+                          {#if item.icon}
+                            <span class='wire-cta-section__visual-item-icon {item.icon}' aria-hidden="true"></span>
+                          {/if}
+                          <div>
+                            <strong>{item.label || item.title}</strong>
+                            {#if item.description}
+                              <p>{item.description}</p>
+                            {/if}
+                          </div>
+                        </div>
+                      {/each}
+                    </div>
+                  {/if}
+                </div>
+              {/if}
+            </div>
           </div>
 
-          <HeroActions
-            actions='{[
-              {
-                label: primaryLabel,
-                href: primaryHref,
-                icon: primaryIcon,
-                variant: "default",
-                color: color,
-                controlClass: variant === "solid" || variant === "gradient" ? "!bg-white !text-[var(--wire-color-primary)] hover:!bg-white/90" : ""
-              },
-              {
-                label: secondaryLabel,
-                href: secondaryHref,
-                icon: secondaryIcon,
-                variant: "outline",
-                color: color,
-                controlClass: variant === "solid" || variant === "gradient" ? "!border-white/50 !text-white hover:!bg-white/10" : ""
-              }
-            ]}'
-            align='{align === "center" ? "center" : "right"}'
-            stackOnMobile="true"
-            fullWidthMobile="true"
-            size="lg"
-            color='{color}'
-            class="shrink-0"
-          >
-            <slot name="actions"></slot>
-          </HeroActions>
-
-          <slot name="visual"></slot>
+          <div class="wire-cta-section__footer">
+            <slot name="footer"></slot>
+          </div>
         </div>
-
-        <slot name="footer"></slot>
       </div>
-    </Section>
+    </section>
+  }
+
+  style {
+    .wire-cta-section {
+      --cta-accent: var(--wire-color-primary);
+      --cta-accent-hover: var(--wire-color-primary-hover);
+      --cta-accent-soft: var(--wire-color-primary-soft);
+      --cta-accent-muted: var(--wire-color-primary-muted);
+      --cta-contrast: var(--wire-color-primary-contrast);
+      --cta-border: color-mix(in srgb, var(--cta-accent) 15%, var(--wire-color-border));
+
+      position: relative;
+      width: 100%;
+      color: var(--wire-color-text);
+    }
+
+    .wire-cta-section[data-color="secondary"] {
+      --cta-accent: var(--wire-color-secondary);
+      --cta-accent-hover: var(--wire-color-secondary-hover);
+      --cta-accent-soft: var(--wire-color-secondary-soft);
+      --cta-accent-muted: var(--wire-color-secondary-muted);
+      --cta-contrast: var(--wire-color-secondary-contrast);
+    }
+
+    .wire-cta-section[data-color="info"] {
+      --cta-accent: var(--wire-color-info);
+      --cta-accent-hover: var(--wire-color-info-hover);
+      --cta-accent-soft: var(--wire-color-info-soft);
+      --cta-accent-muted: var(--wire-color-info-muted);
+      --cta-contrast: var(--wire-color-info-contrast);
+    }
+
+    .wire-cta-section[data-color="success"] {
+      --cta-accent: var(--wire-color-success);
+      --cta-accent-hover: var(--wire-color-success-hover);
+      --cta-accent-soft: var(--wire-color-success-soft);
+      --cta-accent-muted: var(--wire-color-success-muted);
+      --cta-contrast: var(--wire-color-success-contrast);
+    }
+
+    .wire-cta-section[data-color="warning"] {
+      --cta-accent: var(--wire-color-warning);
+      --cta-accent-hover: var(--wire-color-warning-hover);
+      --cta-accent-soft: var(--wire-color-warning-soft);
+      --cta-accent-muted: var(--wire-color-warning-muted);
+      --cta-contrast: var(--wire-color-warning-contrast);
+    }
+
+    .wire-cta-section[data-color="danger"] {
+      --cta-accent: var(--wire-color-danger);
+      --cta-accent-hover: var(--wire-color-danger-hover);
+      --cta-accent-soft: var(--wire-color-danger-soft);
+      --cta-accent-muted: var(--wire-color-danger-muted);
+      --cta-contrast: var(--wire-color-danger-contrast);
+    }
+
+    .wire-cta-section__outer {
+      width: min(calc(100% - 2rem), 80rem);
+      margin-inline: auto;
+    }
+
+    .wire-cta-section[data-max-width="compact"] .wire-cta-section__outer {
+      width: min(calc(100% - 2rem), 64rem);
+    }
+
+    .wire-cta-section[data-max-width="lg"] .wire-cta-section__outer {
+      width: min(calc(100% - 2rem), 72rem);
+    }
+
+    .wire-cta-section[data-max-width="wide"] .wire-cta-section__outer,
+    .wire-cta-section[data-max-width="2xl"] .wire-cta-section__outer {
+      width: min(calc(100% - 2rem), 90rem);
+    }
+
+    .wire-cta-section[data-max-width="full"] .wire-cta-section__outer {
+      width: 100%;
+      max-width: none;
+    }
+
+    .wire-cta-section[data-full-bleed="true"] .wire-cta-section__outer {
+      width: 100%;
+      max-width: none;
+    }
+
+    .wire-cta-section__surface {
+      position: relative;
+      isolation: isolate;
+      overflow: hidden;
+      padding: 3rem;
+      background:
+        radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--cta-accent) 10%, transparent), transparent 28%),
+        var(--wire-color-surface-raised);
+      border: 1px solid var(--cta-border);
+      border-radius: 1.5rem;
+      box-shadow:
+        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
+        0 24px 70px color-mix(in srgb, black 15%, transparent);
+    }
+
+    .wire-cta-section[data-size="compact"] .wire-cta-section__surface,
+    .wire-cta-section[data-size="sm"] .wire-cta-section__surface {
+      padding: 2rem;
+    }
+
+    .wire-cta-section[data-size="lg"] .wire-cta-section__surface {
+      padding: 4rem;
+    }
+
+    .wire-cta-section[data-full-bleed="true"] .wire-cta-section__surface {
+      border-inline: 0;
+      border-radius: 0;
+    }
+
+    .wire-cta-section[data-variant="soft"] .wire-cta-section__surface {
+      background:
+        radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--cta-accent) 14%, transparent), transparent 30%),
+        linear-gradient(135deg, var(--cta-accent-soft), transparent 64%),
+        var(--wire-color-surface-raised);
+      box-shadow: none;
+    }
+
+    .wire-cta-section[data-variant="outline"] .wire-cta-section__surface {
+      background: transparent;
+      box-shadow: none;
+    }
+
+    .wire-cta-section[data-variant="gradient"] .wire-cta-section__surface {
+      color: var(--cta-contrast);
+      background:
+        radial-gradient(circle at 90% 8%, color-mix(in srgb, white 16%, transparent), transparent 30%),
+        linear-gradient(135deg, var(--cta-accent), color-mix(in srgb, var(--cta-accent) 70%, var(--wire-color-secondary)));
+      border-color: color-mix(in srgb, white 22%, transparent);
+    }
+
+    .wire-cta-section[data-variant="solid"] .wire-cta-section__surface {
+      color: var(--cta-contrast);
+      background:
+        radial-gradient(circle at 90% 8%, color-mix(in srgb, white 14%, transparent), transparent 30%),
+        var(--cta-accent);
+      border-color: color-mix(in srgb, white 22%, transparent);
+      box-shadow: 0 30px 80px color-mix(in srgb, var(--cta-accent) 28%, transparent);
+    }
+
+    .wire-cta-section__background-image {
+      position: absolute;
+      inset: 0;
+      z-index: -3;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      opacity: 0.14;
+    }
+
+    .wire-cta-section__glow {
+      position: absolute;
+      z-index: -2;
+      width: 22rem;
+      height: 22rem;
+      pointer-events: none;
+      background: var(--cta-accent);
+      border-radius: 999px;
+      filter: blur(110px);
+      opacity: 0.1;
+    }
+
+    .wire-cta-section__glow--one {
+      top: -12rem;
+      right: -7rem;
+    }
+
+    .wire-cta-section__glow--two {
+      bottom: -14rem;
+      left: -8rem;
+      opacity: 0.06;
+    }
+
+    .wire-cta-section__layout {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      align-items: center;
+      gap: 2.5rem;
+    }
+
+    .wire-cta-section__content,
+    .wire-cta-section__visual-column {
+      min-width: 0;
+    }
+
+    .wire-cta-section__content {
+      max-width: 48rem;
+    }
+
+    .wire-cta-section[data-align="center"] .wire-cta-section__content {
+      margin-inline: auto;
+      text-align: center;
+    }
+
+    .wire-cta-section[data-align="right"] .wire-cta-section__content {
+      margin-left: auto;
+      text-align: right;
+    }
+
+    .wire-cta-section__icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 3rem;
+      height: 3rem;
+      margin-bottom: 1.1rem;
+      color: var(--cta-accent);
+      background: var(--cta-accent-soft);
+      border: 1px solid color-mix(in srgb, var(--cta-accent) 20%, transparent);
+      border-radius: 0.9rem;
+      font-size: 1.35rem;
+    }
+
+    .wire-cta-section[data-variant="solid"] .wire-cta-section__icon,
+    .wire-cta-section[data-variant="gradient"] .wire-cta-section__icon {
+      color: currentColor;
+      background: color-mix(in srgb, white 14%, transparent);
+      border-color: color-mix(in srgb, white 22%, transparent);
+    }
+
+    .wire-cta-section__eyebrow {
+      margin: 0;
+      color: var(--cta-accent);
+      font-size: 0.72rem;
+      font-weight: 650;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .wire-cta-section[data-variant="solid"] .wire-cta-section__eyebrow,
+    .wire-cta-section[data-variant="gradient"] .wire-cta-section__eyebrow {
+      color: currentColor;
+      opacity: 0.78;
+    }
+
+    .wire-cta-section__title {
+      max-width: 18ch;
+      margin: 0.75rem 0 0;
+      color: var(--wire-color-text);
+      font-size: clamp(2rem, 5vw, 4rem);
+      font-weight: 650;
+      line-height: 1.05;
+      letter-spacing: -0.045em;
+    }
+
+    .wire-cta-section[data-align="center"] .wire-cta-section__title,
+    .wire-cta-section[data-align="right"] .wire-cta-section__title {
+      margin-inline: auto;
+    }
+
+    .wire-cta-section[data-align="right"] .wire-cta-section__title {
+      margin-right: 0;
+    }
+
+    .wire-cta-section[data-variant="solid"] .wire-cta-section__title,
+    .wire-cta-section[data-variant="gradient"] .wire-cta-section__title {
+      color: currentColor;
+    }
+
+    .wire-cta-section__description {
+      max-width: 44rem;
+      margin: 1rem 0 0;
+      color: var(--wire-color-text-muted);
+      font-size: 0.96rem;
+      line-height: 1.75;
+    }
+
+    .wire-cta-section[data-align="center"] .wire-cta-section__description,
+    .wire-cta-section[data-align="right"] .wire-cta-section__description {
+      margin-inline: auto;
+    }
+
+    .wire-cta-section[data-align="right"] .wire-cta-section__description {
+      margin-right: 0;
+    }
+
+    .wire-cta-section[data-variant="solid"] .wire-cta-section__description,
+    .wire-cta-section[data-variant="gradient"] .wire-cta-section__description {
+      color: color-mix(in srgb, currentColor 82%, transparent);
+    }
+
+    .wire-cta-section__actions {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.75rem;
+      margin-top: 1.75rem;
+    }
+
+    .wire-cta-section__actions--slot:empty {
+      display: none;
+    }
+
+    .wire-cta-section[data-align="center"] .wire-cta-section__actions {
+      justify-content: center;
+    }
+
+    .wire-cta-section[data-align="right"] .wire-cta-section__actions {
+      justify-content: flex-end;
+    }
+
+    .wire-cta-section__action {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.55rem;
+      min-height: 2.85rem;
+      padding: 0.78rem 1.1rem;
+      border-radius: 0.75rem;
+      font-size: 0.84rem;
+      font-weight: 700;
+      line-height: 1;
+      text-decoration: none;
+      transition:
+        transform 160ms ease,
+        background-color 160ms ease,
+        color 160ms ease,
+        border-color 160ms ease;
+    }
+
+    .wire-cta-section__action:hover {
+      transform: translateY(-2px);
+    }
+
+    .wire-cta-section__action--primary {
+      color: var(--cta-contrast);
+      background: var(--cta-accent);
+      border: 1px solid transparent;
+    }
+
+    .wire-cta-section__action--primary:hover {
+      background: var(--cta-accent-hover);
+    }
+
+    .wire-cta-section__action--secondary {
+      color: var(--cta-accent);
+      background: transparent;
+      border: 1px solid color-mix(in srgb, var(--cta-accent) 42%, var(--wire-color-border));
+    }
+
+    .wire-cta-section__action--secondary:hover {
+      background: var(--cta-accent-soft);
+      border-color: var(--cta-accent);
+    }
+
+    .wire-cta-section[data-variant="solid"] .wire-cta-section__action--primary,
+    .wire-cta-section[data-variant="gradient"] .wire-cta-section__action--primary {
+      color: var(--cta-accent);
+      background: var(--cta-contrast);
+    }
+
+    .wire-cta-section[data-variant="solid"] .wire-cta-section__action--secondary,
+    .wire-cta-section[data-variant="gradient"] .wire-cta-section__action--secondary {
+      color: currentColor;
+      border-color: color-mix(in srgb, white 46%, transparent);
+    }
+
+    .wire-cta-section[data-variant="solid"] .wire-cta-section__action--secondary:hover,
+    .wire-cta-section[data-variant="gradient"] .wire-cta-section__action--secondary:hover {
+      background: color-mix(in srgb, white 12%, transparent);
+      border-color: color-mix(in srgb, white 68%, transparent);
+    }
+
+    .wire-cta-section__action-icon {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    .wire-cta-section__action:focus-visible {
+      outline: 2px solid var(--wire-color-focus);
+      outline-offset: 3px;
+    }
+
+    .wire-cta-section__visual-column {
+      position: relative;
+      min-height: 0;
+    }
+
+    .wire-cta-section__visual {
+      overflow: hidden;
+      color: var(--wire-color-text);
+      background: var(--wire-color-surface-raised);
+      border: 1px solid var(--wire-color-border);
+      border-radius: 1.2rem;
+      box-shadow: 0 20px 54px color-mix(in srgb, black 18%, transparent);
+    }
+
+    .wire-cta-section__visual-media {
+      aspect-ratio: 16 / 9;
+      overflow: hidden;
+      background: var(--wire-color-surface-soft);
+    }
+
+    .wire-cta-section__visual-image {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .wire-cta-section__visual-header {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      gap: 0.9rem;
+      padding: 1.25rem;
+    }
+
+    .wire-cta-section__visual-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 2.6rem;
+      height: 2.6rem;
+      color: var(--cta-accent);
+      background: var(--cta-accent-soft);
+      border-radius: 0.82rem;
+      font-size: 1.15rem;
+    }
+
+    .wire-cta-section__visual-copy {
+      min-width: 0;
+    }
+
+    .wire-cta-section__visual-title {
+      margin: 0;
+      color: var(--wire-color-text);
+      font-size: 1rem;
+      font-weight: 650;
+    }
+
+    .wire-cta-section__visual-description {
+      margin: 0.42rem 0 0;
+      color: var(--wire-color-text-muted);
+      font-size: 0.78rem;
+      line-height: 1.6;
+    }
+
+    .wire-cta-section__visual-list {
+      display: grid;
+      border-top: 1px solid var(--wire-color-border);
+    }
+
+    .wire-cta-section__visual-item {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      gap: 0.7rem;
+      padding: 0.95rem 1.25rem;
+    }
+
+    .wire-cta-section__visual-item + .wire-cta-section__visual-item {
+      border-top: 1px solid var(--wire-color-border);
+    }
+
+    .wire-cta-section__visual-item-icon {
+      width: 1rem;
+      height: 1rem;
+      margin-top: 0.12rem;
+      color: var(--cta-accent);
+    }
+
+    .wire-cta-section__visual-item strong {
+      color: var(--wire-color-text);
+      font-size: 0.78rem;
+    }
+
+    .wire-cta-section__visual-item p {
+      margin: 0.3rem 0 0;
+      color: var(--wire-color-text-muted);
+      font-size: 0.73rem;
+      line-height: 1.5;
+    }
+
+    .wire-cta-section__footer:empty {
+      display: none;
+    }
+
+    .wire-cta-section__footer:not(:empty) {
+      margin-top: 2rem;
+      padding-top: 1.25rem;
+      border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
+    }
+
+    @media (min-width: 900px) {
+      .wire-cta-section[data-align="split"] .wire-cta-section__layout {
+        grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
+        gap: 4rem;
+      }
+
+      .wire-cta-section[data-align="split"][data-visual-position="left"] .wire-cta-section__content {
+        order: 2;
+      }
+
+      .wire-cta-section[data-align="split"][data-visual-position="left"] .wire-cta-section__visual-column {
+        order: 1;
+      }
+
+      .wire-cta-section[data-align="split"] .wire-cta-section__visual-column:empty {
+        display: none;
+      }
+
+      .wire-cta-section[data-align="split"] .wire-cta-section__visual-column:empty + * {
+        grid-column: 1 / -1;
+      }
+    }
+
+    @media (max-width: 639px) {
+      .wire-cta-section__surface {
+        padding: 1.6rem;
+        border-radius: 1.2rem;
+      }
+
+      .wire-cta-section__actions {
+        align-items: stretch;
+      }
+
+      .wire-cta-section__action {
+        width: 100%;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .wire-cta-section__action {
+        transition: none;
+      }
+
+      .wire-cta-section__action:hover {
+        transform: none;
+      }
+    }
   }
 }
diff --git a/packages/ui/components/ContextMenu.wrn b/packages/ui/components/ContextMenu.wrn
index 7a8b1264..12a75b91 100644
--- a/packages/ui/components/ContextMenu.wrn
+++ b/packages/ui/components/ContextMenu.wrn
@@ -3,20 +3,516 @@ component ContextMenu {
     @event open = function
     @event close = function
     @event select = function
+    @event action = function
+
+    items = []
+    open = false
+    defaultOpen = false
+    trigger = "contextmenu"
+    placement = "pointer"
+    align = "start"
     size = "default"
     color = "primary"
-    title = "Context Menu"
+    variant = "raised"
+    title = ""
     description = ""
-    open = false
-    placement = "bottom"
-    closeLabel = "Close"
+    label = "Context menu"
+    closeOnSelect = true
+    closeOnOutside = true
+    disabled = false
+    minWidth = "14rem"
+    maxWidth = "20rem"
     class = ""
   }
+
+  state visible = defaultOpen
+  state positionX = 16
+  state positionY = 16
+
+  functions {
+    function isOpen() {
+      return open || visible
+    }
+
+    function showMenu(sourceEvent) {
+      if (disabled) {
+        return
+      }
+      if (sourceEvent && sourceEvent.type === "contextmenu") {
+        sourceEvent.preventDefault()
+      }
+      if (placement === "pointer" && sourceEvent) {
+        positionX = Math.max(12, Math.min(sourceEvent.clientX || 12, window.innerWidth - 340))
+        positionY = Math.max(12, Math.min(sourceEvent.clientY || 12, window.innerHeight - 420))
+      }
+      visible = true
+      $emit("open", {
+        x: positionX,
+        y: positionY,
+        trigger: trigger,
+        sourceEvent: sourceEvent
+      })
+    }
+
+    function hideMenu(reason, sourceEvent) {
+      visible = false
+      $emit("close", {
+        reason: reason,
+        sourceEvent: sourceEvent
+      })
+    }
+
+    function toggleMenu(sourceEvent) {
+      if (isOpen()) {
+        hideMenu("toggle", sourceEvent)
+      } else {
+        showMenu(sourceEvent)
+      }
+    }
+
+    function chooseItem(item, itemIndex, sourceEvent) {
+      if (disabled || item.disabled || item.type === "header" || item.type === "divider") {
+        sourceEvent.preventDefault()
+        return
+      }
+      $emit("select", {
+        item: item,
+        itemIndex: itemIndex,
+        value: item.value || "",
+        sourceEvent: sourceEvent
+      })
+      if (item.action) {
+        $emit("action", {
+          item: item,
+          itemIndex: itemIndex,
+          value: item.value || "",
+          sourceEvent: sourceEvent
+        })
+      }
+      if (closeOnSelect) {
+        hideMenu("select", sourceEvent)
+      }
+    }
+
+    function moveFocus(sourceEvent, direction) {
+      const root = sourceEvent.currentTarget.closest(".wire-context-menu") || sourceEvent.currentTarget
+      const options = [...root.querySelectorAll("[data-context-menu-item]:not([disabled])")]
+      if (!options.length) {
+        return
+      }
+      const activeIndex = options.indexOf(document.activeElement)
+      const nextIndex = (activeIndex + direction + options.length) % options.length
+      options[nextIndex].focus()
+    }
+
+    function handleKeydown(sourceEvent) {
+      if (sourceEvent.key === "Escape") {
+        sourceEvent.preventDefault()
+        hideMenu("escape", sourceEvent)
+      } else if (sourceEvent.key === "ArrowDown") {
+        sourceEvent.preventDefault()
+        moveFocus(sourceEvent, 1)
+      } else if (sourceEvent.key === "ArrowUp") {
+        sourceEvent.preventDefault()
+        moveFocus(sourceEvent, -1)
+      }
+    }
+  }
+
   view {
-    <div data-show="{open}" class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--context-menu wire-next--placement-{placement} {class}" role="region" aria-modal="false" aria-label="{title}">
-      <header><strong>{title}</strong><button type="button" aria-label="{closeLabel}">×</button></header>
-      {#if description}<p>{description}</p>{/if}
-      <slot />
+    <div
+      {...attrs}
+      data-ui-component="ContextMenu"
+      data-open='{open || visible ? "true" : "false"}'
+      data-trigger='{trigger}'
+      data-placement='{placement}'
+      data-align='{align}'
+      data-size='{size}'
+      data-color='{color}'
+      data-variant='{variant}'
+      class='wire-context-menu {class}'
+      style='--wire-context-x:{positionX}px;--wire-context-y:{positionY}px;--wire-context-min-width:{minWidth};--wire-context-max-width:{maxWidth};'
+      @keydown='handleKeydown(event)'
+    >
+      <div
+        class="wire-context-menu__trigger"
+        tabindex='{disabled ? "-1" : "0"}'
+        aria-haspopup="menu"
+        aria-expanded='{open || visible ? "true" : "false"}'
+        @contextmenu='if (trigger === "contextmenu" || trigger === "both") { showMenu(event) }'
+        @click='if (trigger === "click" || trigger === "both") { toggleMenu(event) }'
+        @keydown='if (event.key === "Enter" || event.key === " ") { event.preventDefault(); toggleMenu(event) }'
+      >
+        <slot name="trigger"></slot>
+      </div>
+
+      {#if closeOnOutside}
+        <button
+          type="button"
+          class="wire-context-menu__dismiss-layer"
+          data-show='{open || visible}'
+          aria-label="Close context menu"
+          @click='hideMenu("outside", event)'
+        ></button>
+      {/if}
+
+      <div
+        class="wire-context-menu__panel"
+        data-show='{open || visible}'
+        role="menu"
+        aria-label='{label}'
+      >
+        {#if title || description}
+          <div class="wire-context-menu__header">
+            {#if title}
+              <strong>{title}</strong>
+            {/if}
+            {#if description}
+              <span>{description}</span>
+            {/if}
+          </div>
+        {/if}
+
+        <slot name="header"></slot>
+
+        <div class="wire-context-menu__items">
+          {#each items as item, itemIndex}
+            {#if item.type === "divider"}
+              <div class="wire-context-menu__divider" role="separator"></div>
+            {:else if item.type === "header"}
+              <div class="wire-context-menu__section-label">{item.label || item.title}</div>
+            {:else if item.href}
+              <a
+                href='{item.href}'
+                target='{item.target || ""}'
+                rel='{item.external || item.target === "_blank" ? "noopener noreferrer" : (item.rel || "")}'
+                role="menuitem"
+                data-context-menu-item
+                data-danger='{item.danger ? "true" : "false"}'
+                data-selected='{item.selected || item.checked ? "true" : "false"}'
+                aria-disabled='{item.disabled ? "true" : "false"}'
+                class="wire-context-menu__item"
+                @click='chooseItem(item, itemIndex, event)'
+              >
+                {#if item.icon}
+                  <span class='wire-context-menu__icon {item.icon}' aria-hidden="true"></span>
+                {/if}
+                <span class="wire-context-menu__copy">
+                  <strong>{item.label || item.title}</strong>
+                  {#if item.description}
+                    <small>{item.description}</small>
+                  {/if}
+                </span>
+                {#if item.shortcut}
+                  <kbd>{item.shortcut}</kbd>
+                {:else if item.checked || item.selected}
+                  <span class="icon-[lucide--check] wire-context-menu__status" aria-hidden="true"></span>
+                {:else if item.external}
+                  <span class="icon-[lucide--arrow-up-right] wire-context-menu__status" aria-hidden="true"></span>
+                {/if}
+              </a>
+            {:else}
+              <button
+                type="button"
+                role="menuitem"
+                data-context-menu-item
+                data-danger='{item.danger ? "true" : "false"}'
+                data-selected='{item.selected || item.checked ? "true" : "false"}'
+                disabled='{item.disabled}'
+                class="wire-context-menu__item"
+                @click='chooseItem(item, itemIndex, event)'
+              >
+                {#if item.icon}
+                  <span class='wire-context-menu__icon {item.icon}' aria-hidden="true"></span>
+                {/if}
+                <span class="wire-context-menu__copy">
+                  <strong>{item.label || item.title}</strong>
+                  {#if item.description}
+                    <small>{item.description}</small>
+                  {/if}
+                </span>
+                {#if item.shortcut}
+                  <kbd>{item.shortcut}</kbd>
+                {:else if item.checked || item.selected}
+                  <span class="icon-[lucide--check] wire-context-menu__status" aria-hidden="true"></span>
+                {/if}
+              </button>
+            {/if}
+          {/each}
+        </div>
+
+        <slot></slot>
+        <slot name="footer"></slot>
+      </div>
     </div>
   }
+
+  style {
+    .wire-context-menu {
+      --context-accent: var(--wire-color-primary);
+      --context-soft: var(--wire-color-primary-soft);
+      position: relative;
+      display: block;
+      min-width: 0;
+    }
+
+    .wire-context-menu[data-color="secondary"] {
+      --context-accent: var(--wire-color-secondary);
+      --context-soft: var(--wire-color-secondary-soft);
+    }
+
+    .wire-context-menu[data-color="info"] {
+      --context-accent: var(--wire-color-info);
+      --context-soft: var(--wire-color-info-soft);
+    }
+
+    .wire-context-menu[data-color="success"] {
+      --context-accent: var(--wire-color-success);
+      --context-soft: var(--wire-color-success-soft);
+    }
+
+    .wire-context-menu[data-color="warning"] {
+      --context-accent: var(--wire-color-warning);
+      --context-soft: var(--wire-color-warning-soft);
+    }
+
+    .wire-context-menu[data-color="danger"] {
+      --context-accent: var(--wire-color-danger);
+      --context-soft: var(--wire-color-danger-soft);
+    }
+
+    .wire-context-menu__trigger {
+      display: block;
+      min-width: 0;
+      outline: none;
+    }
+
+    .wire-context-menu__trigger:focus-visible {
+      border-radius: 0.6rem;
+      outline: 2px solid var(--wire-color-focus);
+      outline-offset: 3px;
+    }
+
+    .wire-context-menu__dismiss-layer {
+      position: fixed;
+      inset: 0;
+      z-index: 1090;
+      appearance: none;
+      padding: 0;
+      background: transparent;
+      border: 0;
+    }
+
+    .wire-context-menu__panel {
+      position: absolute;
+      z-index: 1091;
+      top: calc(100% + 0.5rem);
+      left: 0;
+      width: max-content;
+      min-width: var(--wire-context-min-width);
+      max-width: min(var(--wire-context-max-width), calc(100vw - 1.5rem));
+      padding: 0.45rem;
+      color: var(--wire-color-text);
+      background:
+        linear-gradient(145deg, color-mix(in srgb, var(--context-accent) 5%, transparent), transparent 58%),
+        color-mix(in srgb, var(--wire-color-surface-raised) 96%, transparent);
+      border: 1px solid color-mix(in srgb, var(--context-accent) 18%, var(--wire-color-border));
+      border-radius: 1rem;
+      box-shadow:
+        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
+        0 24px 64px color-mix(in srgb, black 24%, transparent);
+      backdrop-filter: blur(18px);
+      transform-origin: top left;
+    }
+
+    .wire-context-menu[data-placement="pointer"] .wire-context-menu__panel {
+      position: fixed;
+      top: var(--wire-context-y);
+      left: var(--wire-context-x);
+    }
+
+    .wire-context-menu[data-placement="bottom-end"] .wire-context-menu__panel {
+      right: 0;
+      left: auto;
+      transform-origin: top right;
+    }
+
+    .wire-context-menu[data-placement="top-start"] .wire-context-menu__panel {
+      top: auto;
+      bottom: calc(100% + 0.5rem);
+      transform-origin: bottom left;
+    }
+
+    .wire-context-menu[data-placement="top-end"] .wire-context-menu__panel {
+      top: auto;
+      right: 0;
+      bottom: calc(100% + 0.5rem);
+      left: auto;
+      transform-origin: bottom right;
+    }
+
+    .wire-context-menu[data-variant="soft"] .wire-context-menu__panel {
+      background:
+        linear-gradient(145deg, var(--context-soft), transparent 72%),
+        var(--wire-color-surface-raised);
+      box-shadow: 0 18px 48px color-mix(in srgb, black 16%, transparent);
+    }
+
+    .wire-context-menu[data-variant="outline"] .wire-context-menu__panel {
+      background: var(--wire-color-surface-raised);
+      box-shadow: none;
+    }
+
+    .wire-context-menu__header {
+      display: grid;
+      gap: 0.2rem;
+      padding: 0.65rem 0.75rem 0.75rem;
+      border-bottom: 1px solid var(--wire-color-border);
+    }
+
+    .wire-context-menu__header strong {
+      font-size: 0.86rem;
+      font-weight: 650;
+    }
+
+    .wire-context-menu__header span {
+      color: var(--wire-color-text-muted);
+      font-size: 0.75rem;
+      line-height: 1.45;
+    }
+
+    .wire-context-menu__items {
+      display: grid;
+      gap: 0.15rem;
+      padding-block: 0.25rem;
+    }
+
+    .wire-context-menu__section-label {
+      padding: 0.55rem 0.75rem 0.3rem;
+      color: var(--wire-color-text-muted);
+      font-size: 0.68rem;
+      font-weight: 700;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+    }
+
+    .wire-context-menu__divider {
+      height: 1px;
+      margin: 0.3rem 0.45rem;
+      background: var(--wire-color-border);
+    }
+
+    .wire-context-menu__item {
+      appearance: none;
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 0.7rem;
+      width: 100%;
+      min-width: 0;
+      padding: 0.65rem 0.7rem;
+      color: var(--wire-color-text);
+      background: transparent;
+      border: 0;
+      border-radius: 0.72rem;
+      font: inherit;
+      text-align: left;
+      text-decoration: none;
+      cursor: pointer;
+      transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
+    }
+
+    .wire-context-menu__item:hover,
+    .wire-context-menu__item:focus-visible,
+    .wire-context-menu__item[data-selected="true"] {
+      color: var(--context-accent);
+      background: var(--context-soft);
+      outline: none;
+    }
+
+    .wire-context-menu__item:active {
+      transform: scale(0.985);
+    }
+
+    .wire-context-menu__item[data-danger="true"] {
+      color: var(--wire-color-danger);
+    }
+
+    .wire-context-menu__item[data-danger="true"]:hover,
+    .wire-context-menu__item[data-danger="true"]:focus-visible {
+      background: var(--wire-color-danger-soft);
+    }
+
+    .wire-context-menu__item[disabled],
+    .wire-context-menu__item[aria-disabled="true"] {
+      opacity: 0.48;
+      pointer-events: none;
+    }
+
+    .wire-context-menu__icon,
+    .wire-context-menu__status {
+      width: 1rem;
+      height: 1rem;
+      color: currentColor;
+    }
+
+    .wire-context-menu__copy {
+      display: grid;
+      gap: 0.12rem;
+      min-width: 0;
+    }
+
+    .wire-context-menu__copy strong {
+      overflow: hidden;
+      font-size: 0.82rem;
+      font-weight: 600;
+      line-height: 1.3;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .wire-context-menu__copy small {
+      overflow: hidden;
+      color: var(--wire-color-text-muted);
+      font-size: 0.7rem;
+      line-height: 1.35;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .wire-context-menu kbd {
+      padding: 0.16rem 0.38rem;
+      color: var(--wire-color-text-muted);
+      background: var(--wire-color-surface-soft);
+      border: 1px solid var(--wire-color-border);
+      border-radius: 0.36rem;
+      font-size: 0.64rem;
+      font-family: inherit;
+    }
+
+    .wire-context-menu[data-size="sm"] .wire-context-menu__item {
+      padding: 0.52rem 0.6rem;
+    }
+
+    .wire-context-menu[data-size="lg"] .wire-context-menu__item {
+      padding: 0.78rem 0.82rem;
+    }
+
+    @media (max-width: 639px) {
+      .wire-context-menu[data-placement="pointer"] .wire-context-menu__panel {
+        right: 0.75rem;
+        bottom: 0.75rem;
+        left: 0.75rem;
+        top: auto;
+        width: auto;
+        max-width: none;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .wire-context-menu__item {
+        transition: none;
+      }
+    }
+  }
 }
diff --git a/packages/ui/components/Drawer.wrn b/packages/ui/components/Drawer.wrn
index 641cef87..0cdb0f93 100644
--- a/packages/ui/components/Drawer.wrn
+++ b/packages/ui/components/Drawer.wrn
@@ -2,20 +2,450 @@ component Drawer {
   props {
     @event open = function
     @event close = function
-    size = "default"
+    @event cancel = function
+
+    open = false
+    defaultOpen = false
+    placement = "right"
+    size = "md"
     color = "primary"
+    variant = "default"
     title = "Drawer"
     description = ""
-    open = false
-    placement = "bottom"
-    closeLabel = "Close"
+    icon = ""
+    label = "Drawer"
+    closeLabel = "Close drawer"
+    showClose = true
+    closeOnBackdrop = true
+    closeOnEscape = true
+    overlay = true
+    scrollable = true
+    triggerLabel = ""
+    triggerIcon = ""
     class = ""
   }
+
+  state visible = defaultOpen
+
+  functions {
+    function isOpen() {
+      return open || visible
+    }
+
+    function showDrawer(sourceEvent) {
+      visible = true
+      $emit("open", {
+        placement: placement,
+        sourceEvent: sourceEvent
+      })
+    }
+
+    function hideDrawer(reason, sourceEvent) {
+      visible = false
+      $emit("close", {
+        reason: reason,
+        placement: placement,
+        sourceEvent: sourceEvent
+      })
+    }
+
+    function cancelDrawer(sourceEvent) {
+      $emit("cancel", {
+        placement: placement,
+        sourceEvent: sourceEvent
+      })
+      hideDrawer("cancel", sourceEvent)
+    }
+
+    function handleKeydown(sourceEvent) {
+      if (closeOnEscape && sourceEvent.key === "Escape") {
+        sourceEvent.preventDefault()
+        cancelDrawer(sourceEvent)
+      }
+    }
+  }
+
   view {
-    <div data-show="{open}" class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--drawer wire-next--placement-{placement} {class}" role="dialog" aria-modal="true" aria-label="{title}">
-      <header><strong>{title}</strong><button type="button" aria-label="{closeLabel}">×</button></header>
-      {#if description}<p>{description}</p>{/if}
-      <slot />
+    <div
+      {...attrs}
+      data-ui-component="Drawer"
+      data-open='{open || visible ? "true" : "false"}'
+      data-placement='{placement}'
+      data-size='{size}'
+      data-color='{color}'
+      data-variant='{variant}'
+      data-overlay='{overlay ? "true" : "false"}'
+      data-scrollable='{scrollable ? "true" : "false"}'
+      class='wire-drawer {class}'
+    >
+      {#if triggerLabel}
+        <button
+          type="button"
+          class="wire-drawer__trigger"
+          aria-haspopup="dialog"
+          aria-expanded='{open || visible ? "true" : "false"}'
+          @click='showDrawer(event)'
+        >
+          {#if triggerIcon}
+            <span class='{triggerIcon}' aria-hidden="true"></span>
+          {/if}
+          <span>{triggerLabel}</span>
+        </button>
+      {/if}
+
+      <span class="wire-drawer__trigger-slot" @click='showDrawer(event)'>
+        <slot name="trigger"></slot>
+      </span>
+
+      <div
+        class="wire-drawer__layer"
+        data-show='{open || visible}'
+        role="presentation"
+        @keydown='handleKeydown(event)'
+      >
+        {#if overlay}
+          <button
+            type="button"
+            class="wire-drawer__backdrop"
+            aria-label='{closeLabel}'
+            @click='if (closeOnBackdrop) { cancelDrawer(event) }'
+          ></button>
+        {/if}
+
+        <section
+          class="wire-drawer__panel"
+          role="dialog"
+          aria-modal="true"
+          aria-label='{label || title}'
+          tabindex="-1"
+        >
+          <div class="wire-drawer__handle" aria-hidden="true"></div>
+
+          <header class="wire-drawer__header">
+            <div class="wire-drawer__heading">
+              {#if icon}
+                <span class='wire-drawer__icon {icon}' aria-hidden="true"></span>
+              {/if}
+
+              <div class="wire-drawer__heading-copy">
+                <slot name="header"></slot>
+                {#if title}
+                  <h2>{title}</h2>
+                {/if}
+                {#if description}
+                  <p>{description}</p>
+                {/if}
+              </div>
+            </div>
+
+            {#if showClose}
+              <button
+                type="button"
+                class="wire-drawer__close"
+                aria-label='{closeLabel}'
+                @click='hideDrawer("close-button", event)'
+              >
+                <span class="icon-[lucide--x]" aria-hidden="true"></span>
+              </button>
+            {/if}
+          </header>
+
+          <div class="wire-drawer__body">
+            <slot></slot>
+          </div>
+
+          <footer class="wire-drawer__footer">
+            <slot name="footer"></slot>
+          </footer>
+        </section>
+      </div>
     </div>
   }
+
+  style {
+    .wire-drawer {
+      --drawer-accent: var(--wire-color-primary);
+      --drawer-soft: var(--wire-color-primary-soft);
+      position: relative;
+      display: inline-flex;
+    }
+
+    .wire-drawer[data-color="secondary"] {
+      --drawer-accent: var(--wire-color-secondary);
+      --drawer-soft: var(--wire-color-secondary-soft);
+    }
+
+    .wire-drawer[data-color="info"] {
+      --drawer-accent: var(--wire-color-info);
+      --drawer-soft: var(--wire-color-info-soft);
+    }
+
+    .wire-drawer[data-color="success"] {
+      --drawer-accent: var(--wire-color-success);
+      --drawer-soft: var(--wire-color-success-soft);
+    }
+
+    .wire-drawer[data-color="warning"] {
+      --drawer-accent: var(--wire-color-warning);
+      --drawer-soft: var(--wire-color-warning-soft);
+    }
+
+    .wire-drawer[data-color="danger"] {
+      --drawer-accent: var(--wire-color-danger);
+      --drawer-soft: var(--wire-color-danger-soft);
+    }
+
+    .wire-drawer__trigger,
+    .wire-drawer__trigger-slot {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.55rem;
+    }
+
+    .wire-drawer__trigger {
+      appearance: none;
+      min-height: 2.55rem;
+      padding: 0.65rem 1rem;
+      color: var(--wire-color-primary-contrast);
+      background: var(--drawer-accent);
+      border: 0;
+      border-radius: 0.8rem;
+      font: inherit;
+      font-size: 0.85rem;
+      font-weight: 650;
+      cursor: pointer;
+    }
+
+    .wire-drawer__layer {
+      position: fixed;
+      inset: 0;
+      z-index: 1200;
+      display: flex;
+      pointer-events: none;
+    }
+
+    .wire-drawer__backdrop {
+      position: absolute;
+      inset: 0;
+      z-index: 0;
+      appearance: none;
+      padding: 0;
+      background: color-mix(in srgb, black 56%, transparent);
+      border: 0;
+      backdrop-filter: blur(7px);
+      pointer-events: auto;
+    }
+
+    .wire-drawer[data-overlay="false"] .wire-drawer__backdrop {
+      display: none;
+    }
+
+    .wire-drawer__panel {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      flex-direction: column;
+      width: min(28rem, calc(100vw - 1rem));
+      max-height: 100%;
+      margin-left: auto;
+      color: var(--wire-color-text);
+      background:
+        radial-gradient(
+          circle at 100% 0%,
+          color-mix(in srgb, var(--drawer-accent) 8%, transparent),
+          transparent 34%
+        ),
+        var(--wire-color-surface-raised);
+      border-left: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wire-color-border));
+      box-shadow: -28px 0 80px color-mix(in srgb, black 28%, transparent);
+      pointer-events: auto;
+      overflow: hidden;
+    }
+
+    .wire-drawer[data-size="sm"] .wire-drawer__panel {
+      width: min(22rem, calc(100vw - 1rem));
+    }
+
+    .wire-drawer[data-size="lg"] .wire-drawer__panel {
+      width: min(38rem, calc(100vw - 1rem));
+    }
+
+    .wire-drawer[data-size="xl"] .wire-drawer__panel {
+      width: min(52rem, calc(100vw - 1rem));
+    }
+
+    .wire-drawer[data-size="full"] .wire-drawer__panel {
+      width: 100vw;
+    }
+
+    .wire-drawer[data-placement="left"] .wire-drawer__panel {
+      margin-right: auto;
+      margin-left: 0;
+      border-right: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wire-color-border));
+      border-left: 0;
+      box-shadow: 28px 0 80px color-mix(in srgb, black 28%, transparent);
+    }
+
+    .wire-drawer[data-placement="top"] .wire-drawer__layer,
+    .wire-drawer[data-placement="bottom"] .wire-drawer__layer {
+      align-items: flex-start;
+    }
+
+    .wire-drawer[data-placement="top"] .wire-drawer__panel,
+    .wire-drawer[data-placement="bottom"] .wire-drawer__panel {
+      width: 100%;
+      max-height: min(80vh, 44rem);
+      margin: 0;
+      border: 0;
+      box-shadow: 0 24px 80px color-mix(in srgb, black 28%, transparent);
+    }
+
+    .wire-drawer[data-placement="top"] .wire-drawer__panel {
+      border-bottom: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wire-color-border));
+    }
+
+    .wire-drawer[data-placement="bottom"] .wire-drawer__layer {
+      align-items: flex-end;
+    }
+
+    .wire-drawer[data-placement="bottom"] .wire-drawer__panel {
+      border-top: 1px solid color-mix(in srgb, var(--drawer-accent) 18%, var(--wire-color-border));
+      border-radius: 1.3rem 1.3rem 0 0;
+    }
+
+    .wire-drawer[data-variant="soft"] .wire-drawer__panel {
+      background:
+        linear-gradient(145deg, var(--drawer-soft), transparent 65%),
+        var(--wire-color-surface-raised);
+    }
+
+    .wire-drawer[data-variant="solid"] .wire-drawer__panel {
+      color: var(--wire-color-primary-contrast);
+      background: var(--drawer-accent);
+      border-color: color-mix(in srgb, white 18%, transparent);
+    }
+
+    .wire-drawer__handle {
+      display: none;
+      width: 2.75rem;
+      height: 0.28rem;
+      margin: 0.55rem auto 0;
+      background: color-mix(in srgb, var(--wire-color-text-muted) 48%, transparent);
+      border-radius: 999px;
+    }
+
+    .wire-drawer[data-placement="bottom"] .wire-drawer__handle {
+      display: block;
+    }
+
+    .wire-drawer__header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 1rem;
+      padding: 1.35rem 1.35rem 1.1rem;
+      border-bottom: 1px solid var(--wire-color-border);
+    }
+
+    .wire-drawer__heading {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.85rem;
+      min-width: 0;
+    }
+
+    .wire-drawer__icon {
+      flex: 0 0 auto;
+      width: 1.25rem;
+      height: 1.25rem;
+      margin-top: 0.15rem;
+      color: var(--drawer-accent);
+    }
+
+    .wire-drawer[data-variant="solid"] .wire-drawer__icon {
+      color: currentColor;
+    }
+
+    .wire-drawer__heading-copy {
+      display: grid;
+      gap: 0.3rem;
+      min-width: 0;
+    }
+
+    .wire-drawer__heading-copy h2,
+    .wire-drawer__heading-copy p {
+      margin: 0;
+    }
+
+    .wire-drawer__heading-copy h2 {
+      font-size: 1.05rem;
+      font-weight: 650;
+      line-height: 1.3;
+    }
+
+    .wire-drawer__heading-copy p {
+      color: var(--wire-color-text-muted);
+      font-size: 0.8rem;
+      line-height: 1.55;
+    }
+
+    .wire-drawer[data-variant="solid"] .wire-drawer__heading-copy p {
+      color: color-mix(in srgb, currentColor 76%, transparent);
+    }
+
+    .wire-drawer__close {
+      appearance: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: 0 0 auto;
+      width: 2.35rem;
+      height: 2.35rem;
+      color: var(--wire-color-text-muted);
+      background: var(--wire-color-surface-soft);
+      border: 1px solid var(--wire-color-border);
+      border-radius: 0.75rem;
+      cursor: pointer;
+    }
+
+    .wire-drawer__close:hover,
+    .wire-drawer__close:focus-visible {
+      color: var(--drawer-accent);
+      border-color: color-mix(in srgb, var(--drawer-accent) 34%, var(--wire-color-border));
+      outline: none;
+    }
+
+    .wire-drawer__body {
+      flex: 1 1 auto;
+      min-height: 0;
+      padding: 1.35rem;
+    }
+
+    .wire-drawer[data-scrollable="true"] .wire-drawer__body {
+      overflow: auto;
+      overscroll-behavior: contain;
+    }
+
+    .wire-drawer__footer {
+      padding: 1rem 1.35rem 1.35rem;
+      border-top: 1px solid var(--wire-color-border);
+    }
+
+    .wire-drawer__footer:empty {
+      display: none;
+    }
+
+    @media (max-width: 639px) {
+      .wire-drawer[data-placement="right"] .wire-drawer__panel,
+      .wire-drawer[data-placement="left"] .wire-drawer__panel {
+        width: min(24rem, 100vw);
+      }
+
+      .wire-drawer__header,
+      .wire-drawer__body,
+      .wire-drawer__footer {
+        padding-inline: 1rem;
+      }
+    }
+  }
 }
diff --git a/packages/ui/components/Dropdown.wrn b/packages/ui/components/Dropdown.wrn
index f73c1a6c..800adf32 100644
--- a/packages/ui/components/Dropdown.wrn
+++ b/packages/ui/components/Dropdown.wrn
@@ -4,50 +4,567 @@ component Dropdown {
     @event open = function
     @event close = function
     @event select = function
+    @event action = function
+
+    items = []
+    open = false
+    defaultOpen = false
+    label = "Open menu"
+    icon = ""
+    showChevron = true
+    menuLabel = "Dropdown menu"
+    placement = "bottom-start"
+    width = "md"
     size = "default"
     color = "primary"
-    label = "Open menu"
-    items = []
-    placement = "end"
+    variant = "raised"
+    closeOnSelect = true
+    closeOnOutside = true
+    disabled = false
+    emptyLabel = "No menu items"
     class = ""
   }
 
+  state visible = defaultOpen
+
   functions {
-    function toggleMenu(event) {
-      $emit("toggle", { open: event.currentTarget.open })
-      $emit(event.currentTarget.open ? "open" : "close", { source: "trigger" })
+    function isOpen() {
+      return open || visible
     }
 
-    function selectItem(item) {
-      $emit("select", { item: item, value: item.value || "" })
+    function showMenu(sourceEvent) {
+      if (disabled) {
+        return
+      }
+      visible = true
+      $emit("open", { sourceEvent: sourceEvent })
+      $emit("toggle", { open: true, sourceEvent: sourceEvent })
+    }
+
+    function hideMenu(reason, sourceEvent) {
+      visible = false
+      $emit("close", { reason: reason, sourceEvent: sourceEvent })
+      $emit("toggle", { open: false, reason: reason, sourceEvent: sourceEvent })
+    }
+
+    function toggleMenu(sourceEvent) {
+      if (isOpen()) {
+        hideMenu("toggle", sourceEvent)
+      } else {
+        showMenu(sourceEvent)
+      }
+    }
+
+    function chooseItem(item, itemIndex, sourceEvent) {
+      if (disabled || item.disabled || item.type === "divider" || item.type === "header") {
+        sourceEvent.preventDefault()
+        return
+      }
+      $emit("select", {
+        item: item,
+        itemIndex: itemIndex,
+        value: item.value || "",
+        sourceEvent: sourceEvent
+      })
+      if (item.action) {
+        $emit("action", {
+          item: item,
+          itemIndex: itemIndex,
+          value: item.value || "",
+          sourceEvent: sourceEvent
+        })
+      }
+      if (closeOnSelect) {
+        hideMenu("select", sourceEvent)
+      }
+    }
+
+    function moveFocus(sourceEvent, direction) {
+      const root = sourceEvent.currentTarget.closest(".wire-dropdown") || sourceEvent.currentTarget
+      const options = [...root.querySelectorAll("[data-dropdown-item]:not([disabled])")]
+      if (!options.length) {
+        return
+      }
+      const activeIndex = options.indexOf(document.activeElement)
+      const nextIndex = (activeIndex + direction + options.length) % options.length
+      options[nextIndex].focus()
+    }
+
+    function handleKeydown(sourceEvent) {
+      if (sourceEvent.key === "Escape") {
+        sourceEvent.preventDefault()
+        hideMenu("escape", sourceEvent)
+      } else if (sourceEvent.key === "ArrowDown") {
+        sourceEvent.preventDefault()
+        if (!isOpen()) {
+          showMenu(sourceEvent)
+        }
+        moveFocus(sourceEvent, 1)
+      } else if (sourceEvent.key === "ArrowUp") {
+        sourceEvent.preventDefault()
+        if (!isOpen()) {
+          showMenu(sourceEvent)
+        }
+        moveFocus(sourceEvent, -1)
+      } else if (sourceEvent.key === "Home" && isOpen()) {
+        sourceEvent.preventDefault()
+        const root = sourceEvent.currentTarget.closest(".wire-dropdown") || sourceEvent.currentTarget
+        const first = root.querySelector("[data-dropdown-item]:not([disabled])")
+        if (first) {
+          first.focus()
+        }
+      } else if (sourceEvent.key === "End" && isOpen()) {
+        sourceEvent.preventDefault()
+        const root = sourceEvent.currentTarget.closest(".wire-dropdown") || sourceEvent.currentTarget
+        const options = [...root.querySelectorAll("[data-dropdown-item]:not([disabled])")]
+        if (options.length) {
+          options[options.length - 1].focus()
+        }
+      }
     }
   }
 
   view {
-    <details class="wire-dropdown wire-dropdown--{placement} wire-next--color-{color} wire-next--size-{size} {class}" data-wrn-dropdown @toggle="toggleMenu($event)">
-      <summary aria-label="{label}">
-        <slot name="trigger" />
-        <span class="wire-dropdown__chevron icon-[lucide--chevron-down]" aria-hidden="true"></span>
-      </summary>
-      <div class="wire-dropdown__panel" role="menu" aria-label="{label}">
-        <slot name="header" />
-        {#each items as item}
-          {#if item.type === "divider"}
-            <hr />
-          {:else}
-            {#if item.type === "header"}
-              <span class="wire-dropdown__heading">{item.label}</span>
-            {:else}
-              <a class="wire-dropdown__item {item.danger ? 'wire-dropdown__item--danger' : ''}" href="{item.href || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" role="menuitem" @click="selectItem(item)">
-                {#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
-                <span><strong>{item.label}</strong>{#if item.description}<small>{item.description}</small>{/if}</span>
-                {#if item.external}<span class="icon-[lucide--arrow-up-right]" aria-hidden="true"></span>{/if}
+    <div
+      {...attrs}
+      data-ui-component="Dropdown"
+      data-open='{open || visible ? "true" : "false"}'
+      data-placement='{placement}'
+      data-width='{width}'
+      data-size='{size}'
+      data-color='{color}'
+      data-variant='{variant}'
+      class='wire-dropdown {class}'
+      @keydown='handleKeydown(event)'
+    >
+      <button
+        type="button"
+        class="wire-dropdown__trigger"
+        disabled='{disabled}'
+        aria-haspopup="menu"
+        aria-expanded='{open || visible ? "true" : "false"}'
+        @click='toggleMenu(event)'
+      >
+        <slot name="trigger"></slot>
+        {#if icon}
+          <span class='wire-dropdown__trigger-icon {icon}' aria-hidden="true"></span>
+        {/if}
+        {#if label}
+          <span class="wire-dropdown__trigger-label">{label}</span>
+        {/if}
+        {#if showChevron}
+          <span class="icon-[lucide--chevron-down] wire-dropdown__chevron" aria-hidden="true"></span>
+        {/if}
+      </button>
+
+      {#if closeOnOutside}
+        <button
+          type="button"
+          class="wire-dropdown__dismiss-layer"
+          data-show='{open || visible}'
+          aria-label="Close menu"
+          @click='hideMenu("outside", event)'
+        ></button>
+      {/if}
+
+      <div
+        class="wire-dropdown__panel"
+        data-show='{open || visible}'
+        role="menu"
+        aria-label='{menuLabel}'
+      >
+        <slot name="header"></slot>
+
+        <div class="wire-dropdown__items">
+          {#each items as item, itemIndex}
+            {#if item.type === "divider"}
+              <div class="wire-dropdown__divider" role="separator"></div>
+            {:else if item.type === "header"}
+              <div class="wire-dropdown__section-label">{item.label || item.title}</div>
+            {:else if item.href}
+              <a
+                href='{item.href}'
+                target='{item.target || ""}'
+                rel='{item.external || item.target === "_blank" ? "noopener noreferrer" : (item.rel || "")}'
+                role="menuitem"
+                data-dropdown-item
+                data-danger='{item.danger ? "true" : "false"}'
+                data-selected='{item.selected || item.checked ? "true" : "false"}'
+                aria-disabled='{item.disabled ? "true" : "false"}'
+                class="wire-dropdown__item"
+                @click='chooseItem(item, itemIndex, event)'
+              >
+                {#if item.icon}
+                  <span class='wire-dropdown__item-icon {item.icon}' aria-hidden="true"></span>
+                {/if}
+                <span class="wire-dropdown__copy">
+                  <strong>{item.label || item.title}</strong>
+                  {#if item.description}
+                    <small>{item.description}</small>
+                  {/if}
+                </span>
+                {#if item.badge}
+                  <span class="wire-dropdown__badge">{item.badge}</span>
+                {:else if item.shortcut}
+                  <kbd>{item.shortcut}</kbd>
+                {:else if item.checked || item.selected}
+                  <span class="icon-[lucide--check] wire-dropdown__status" aria-hidden="true"></span>
+                {:else if item.external}
+                  <span class="icon-[lucide--arrow-up-right] wire-dropdown__status" aria-hidden="true"></span>
+                {/if}
               </a>
+            {:else}
+              <button
+                type="button"
+                role="menuitem"
+                data-dropdown-item
+                data-danger='{item.danger ? "true" : "false"}'
+                data-selected='{item.selected || item.checked ? "true" : "false"}'
+                disabled='{item.disabled}'
+                class="wire-dropdown__item"
+                @click='chooseItem(item, itemIndex, event)'
+              >
+                {#if item.icon}
+                  <span class='wire-dropdown__item-icon {item.icon}' aria-hidden="true"></span>
+                {/if}
+                <span class="wire-dropdown__copy">
+                  <strong>{item.label || item.title}</strong>
+                  {#if item.description}
+                    <small>{item.description}</small>
+                  {/if}
+                </span>
+                {#if item.badge}
+                  <span class="wire-dropdown__badge">{item.badge}</span>
+                {:else if item.shortcut}
+                  <kbd>{item.shortcut}</kbd>
+                {:else if item.checked || item.selected}
+                  <span class="icon-[lucide--check] wire-dropdown__status" aria-hidden="true"></span>
+                {/if}
+              </button>
             {/if}
-          {/if}
-        {/each}
-        <slot name="footer" />
+          {:empty}
+            <div class="wire-dropdown__empty">{emptyLabel}</div>
+          {/each}
+        </div>
+
+        <slot></slot>
+        <slot name="footer"></slot>
       </div>
-    </details>
+    </div>
+  }
+
+  style {
+    .wire-dropdown {
+      --dropdown-accent: var(--wire-color-primary);
+      --dropdown-soft: var(--wire-color-primary-soft);
+      position: relative;
+      display: inline-flex;
+      min-width: 0;
+    }
+
+    .wire-dropdown[data-color="secondary"] {
+      --dropdown-accent: var(--wire-color-secondary);
+      --dropdown-soft: var(--wire-color-secondary-soft);
+    }
+
+    .wire-dropdown[data-color="info"] {
+      --dropdown-accent: var(--wire-color-info);
+      --dropdown-soft: var(--wire-color-info-soft);
+    }
+
+    .wire-dropdown[data-color="success"] {
+      --dropdown-accent: var(--wire-color-success);
+      --dropdown-soft: var(--wire-color-success-soft);
+    }
+
+    .wire-dropdown[data-color="warning"] {
+      --dropdown-accent: var(--wire-color-warning);
+      --dropdown-soft: var(--wire-color-warning-soft);
+    }
+
+    .wire-dropdown[data-color="danger"] {
+      --dropdown-accent: var(--wire-color-danger);
+      --dropdown-soft: var(--wire-color-danger-soft);
+    }
+
+    .wire-dropdown__trigger {
+      appearance: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.55rem;
+      min-height: 2.55rem;
+      padding: 0.65rem 0.9rem;
+      color: var(--wire-color-text);
+      background: var(--wire-color-surface-raised);
+      border: 1px solid var(--wire-color-border);
+      border-radius: 0.78rem;
+      font: inherit;
+      font-size: 0.84rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
+    }
+
+    .wire-dropdown__trigger:hover,
+    .wire-dropdown__trigger:focus-visible,
+    .wire-dropdown[data-open="true"] .wire-dropdown__trigger {
+      color: var(--dropdown-accent);
+      background: var(--dropdown-soft);
+      border-color: color-mix(in srgb, var(--dropdown-accent) 38%, var(--wire-color-border));
+      outline: none;
+    }
+
+    .wire-dropdown__trigger:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .wire-dropdown__trigger-icon,
+    .wire-dropdown__chevron {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    .wire-dropdown__chevron {
+      transition: transform 160ms ease;
+    }
+
+    .wire-dropdown[data-open="true"] .wire-dropdown__chevron {
+      transform: rotate(180deg);
+    }
+
+    .wire-dropdown[data-size="sm"] .wire-dropdown__trigger {
+      min-height: 2.2rem;
+      padding: 0.5rem 0.72rem;
+      font-size: 0.78rem;
+    }
+
+    .wire-dropdown[data-size="lg"] .wire-dropdown__trigger {
+      min-height: 2.9rem;
+      padding: 0.78rem 1.05rem;
+      font-size: 0.9rem;
+    }
+
+    .wire-dropdown__dismiss-layer {
+      position: fixed;
+      inset: 0;
+      z-index: 1100;
+      appearance: none;
+      padding: 0;
+      background: transparent;
+      border: 0;
+    }
+
+    .wire-dropdown__panel {
+      position: absolute;
+      z-index: 1101;
+      top: calc(100% + 0.55rem);
+      left: 0;
+      width: max-content;
+      min-width: 12rem;
+      max-width: min(22rem, calc(100vw - 1.5rem));
+      padding: 0.45rem;
+      color: var(--wire-color-text);
+      background:
+        linear-gradient(145deg, color-mix(in srgb, var(--dropdown-accent) 5%, transparent), transparent 60%),
+        color-mix(in srgb, var(--wire-color-surface-raised) 97%, transparent);
+      border: 1px solid color-mix(in srgb, var(--dropdown-accent) 18%, var(--wire-color-border));
+      border-radius: 1rem;
+      box-shadow:
+        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
+        0 24px 64px color-mix(in srgb, black 22%, transparent);
+      backdrop-filter: blur(18px);
+    }
+
+    .wire-dropdown[data-width="trigger"] .wire-dropdown__panel {
+      width: 100%;
+      min-width: 100%;
+    }
+
+    .wire-dropdown[data-width="sm"] .wire-dropdown__panel {
+      width: 12rem;
+    }
+
+    .wire-dropdown[data-width="md"] .wire-dropdown__panel {
+      width: 17rem;
+    }
+
+    .wire-dropdown[data-width="lg"] .wire-dropdown__panel {
+      width: 22rem;
+    }
+
+    .wire-dropdown[data-placement="bottom-end"] .wire-dropdown__panel {
+      right: 0;
+      left: auto;
+    }
+
+    .wire-dropdown[data-placement="top-start"] .wire-dropdown__panel {
+      top: auto;
+      bottom: calc(100% + 0.55rem);
+    }
+
+    .wire-dropdown[data-placement="top-end"] .wire-dropdown__panel {
+      top: auto;
+      right: 0;
+      bottom: calc(100% + 0.55rem);
+      left: auto;
+    }
+
+    .wire-dropdown[data-variant="soft"] .wire-dropdown__panel {
+      background:
+        linear-gradient(145deg, var(--dropdown-soft), transparent 70%),
+        var(--wire-color-surface-raised);
+      box-shadow: 0 18px 48px color-mix(in srgb, black 16%, transparent);
+    }
+
+    .wire-dropdown[data-variant="outline"] .wire-dropdown__panel {
+      background: var(--wire-color-surface-raised);
+      box-shadow: none;
+    }
+
+    .wire-dropdown__items {
+      display: grid;
+      gap: 0.15rem;
+    }
+
+    .wire-dropdown__section-label {
+      padding: 0.55rem 0.72rem 0.3rem;
+      color: var(--wire-color-text-muted);
+      font-size: 0.68rem;
+      font-weight: 700;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+    }
+
+    .wire-dropdown__divider {
+      height: 1px;
+      margin: 0.3rem 0.4rem;
+      background: var(--wire-color-border);
+    }
+
+    .wire-dropdown__item {
+      appearance: none;
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+      align-items: center;
+      gap: 0.7rem;
+      width: 100%;
+      min-width: 0;
+      padding: 0.68rem 0.72rem;
+      color: var(--wire-color-text);
+      background: transparent;
+      border: 0;
+      border-radius: 0.72rem;
+      font: inherit;
+      text-align: left;
+      text-decoration: none;
+      cursor: pointer;
+      transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
+    }
+
+    .wire-dropdown__item:hover,
+    .wire-dropdown__item:focus-visible,
+    .wire-dropdown__item[data-selected="true"] {
+      color: var(--dropdown-accent);
+      background: var(--dropdown-soft);
+      outline: none;
+    }
+
+    .wire-dropdown__item:active {
+      transform: scale(0.985);
+    }
+
+    .wire-dropdown__item[data-danger="true"] {
+      color: var(--wire-color-danger);
+    }
+
+    .wire-dropdown__item[data-danger="true"]:hover,
+    .wire-dropdown__item[data-danger="true"]:focus-visible {
+      background: var(--wire-color-danger-soft);
+    }
+
+    .wire-dropdown__item[disabled],
+    .wire-dropdown__item[aria-disabled="true"] {
+      opacity: 0.48;
+      pointer-events: none;
+    }
+
+    .wire-dropdown__item-icon,
+    .wire-dropdown__status {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    .wire-dropdown__copy {
+      display: grid;
+      gap: 0.12rem;
+      min-width: 0;
+    }
+
+    .wire-dropdown__copy strong {
+      overflow: hidden;
+      font-size: 0.82rem;
+      font-weight: 600;
+      line-height: 1.3;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .wire-dropdown__copy small {
+      overflow: hidden;
+      color: var(--wire-color-text-muted);
+      font-size: 0.7rem;
+      line-height: 1.35;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .wire-dropdown__badge {
+      padding: 0.18rem 0.45rem;
+      color: var(--dropdown-accent);
+      background: var(--dropdown-soft);
+      border-radius: 999px;
+      font-size: 0.64rem;
+      font-weight: 700;
+    }
+
+    .wire-dropdown kbd {
+      padding: 0.16rem 0.38rem;
+      color: var(--wire-color-text-muted);
+      background: var(--wire-color-surface-soft);
+      border: 1px solid var(--wire-color-border);
+      border-radius: 0.36rem;
+      font-size: 0.64rem;
+      font-family: inherit;
+    }
+
+    .wire-dropdown__empty {
+      padding: 1rem;
+      color: var(--wire-color-text-muted);
+      font-size: 0.8rem;
+      text-align: center;
+    }
+
+    @media (max-width: 639px) {
+      .wire-dropdown__panel {
+        position: fixed;
+        right: 0.75rem;
+        bottom: 0.75rem;
+        left: 0.75rem;
+        top: auto;
+        width: auto;
+        min-width: 0;
+        max-width: none;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .wire-dropdown__trigger,
+      .wire-dropdown__chevron,
+      .wire-dropdown__item {
+        transition: none;
+      }
+    }
   }
 }
diff --git a/packages/ui/components/FeatureCard.wrn b/packages/ui/components/FeatureCard.wrn
index 93eb1906..bde4cacf 100644
--- a/packages/ui/components/FeatureCard.wrn
+++ b/packages/ui/components/FeatureCard.wrn
@@ -1,11 +1,27 @@
 component FeatureCard {
   props {
     icon = ""
+    iconStyle = "soft"
+    iconSize = "default"
+    eyebrow = ""
     title = "Feature"
     description = ""
+
+    image = ""
+    imageAlt = ""
+    imagePosition = "top"
+    imageAspect = "wide"
+    imageLoading = "lazy"
+
     href = ""
+    target = ""
+    rel = ""
+    external = false
     actionLabel = "Learn more"
     actionIcon = ""
+    showArrow = true
+    stretchedLink = true
+
     badge = ""
     badgeColor = "primary"
     size = "default"
@@ -19,95 +35,695 @@ component FeatureCard {
 
   view {
     <article
+      {...attrs}
       data-ui-component="FeatureCard"
-      aria-disabled='{disabled}'
-      class='group relative flex h-full min-w-0 flex-col overflow-hidden rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] shadow-sm transition duration-200 {class}'
-      class:p-4='size === "sm"'
-      class:p-6='size === "default" || size === "md"'
-      class:p-8='size === "lg"'
-      class:bg-[var(--wire-color-primary-soft)]='variant === "soft" && color === "primary"'
-      class:bg-[var(--wire-color-success-soft)]='variant === "soft" && color === "success"'
-      class:bg-[var(--wire-color-warning-soft)]='variant === "soft" && color === "warning"'
-      class:bg-[var(--wire-color-danger-soft)]='variant === "soft" && color === "danger"'
-      class:bg-transparent='variant === "ghost"'
-      class:border-transparent='variant === "ghost"'
-      class:shadow-none='variant === "ghost" || variant === "outline"'
-      class:hover:-translate-y-1='hover === "lift" && !disabled'
-      class:hover:shadow-xl='(hover === "lift" || hover === "shadow") && !disabled'
-      class:hover:border-[var(--wire-color-primary)]='(hover === "lift" || hover === "border") && !disabled'
-      class:text-center='align === "center"'
-      class:items-center='align === "center"'
-      class:text-right='align === "right"'
-      class:items-end='align === "right"'
-      class:opacity-60='disabled'
-      class:pointer-events-none='disabled'
+      data-size='{size}'
+      data-color='{color}'
+      data-variant='{variant}'
+      data-hover='{hover}'
+      data-align='{align}'
+      data-icon-style='{iconStyle}'
+      data-icon-size='{iconSize}'
+      data-image-position='{imagePosition}'
+      data-image-aspect='{imageAspect}'
+      data-disabled='{disabled ? "true" : "false"}'
+      data-stretched-link='{stretchedLink ? "true" : "false"}'
+      class='wire-feature-card {class}'
+      role="listitem"
+      aria-disabled='{disabled ? "true" : "false"}'
     >
-      <div class="flex w-full items-start justify-between gap-4">
-        <div
-          class="flex size-12 shrink-0 items-center justify-center rounded-2xl bg-[var(--wire-color-primary-soft)] text-[var(--wire-color-primary)]"
-          class:bg-[var(--wire-color-success-soft)]='color === "success"'
-          class:text-[var(--wire-color-success)]='color === "success"'
-          class:bg-[var(--wire-color-warning-soft)]='color === "warning"'
-          class:text-[var(--wire-color-warning-text)]='color === "warning"'
-          class:bg-[var(--wire-color-danger-soft)]='color === "danger"'
-          class:text-[var(--wire-color-danger)]='color === "danger"'
-          class:bg-[var(--wire-color-info-soft)]='color === "info"'
-          class:text-[var(--wire-color-info)]='color === "info"'
-          class:size-10='size === "sm"'
-          class:size-14='size === "lg"'
-        >
-          <slot name="icon"></slot>
-          {#if icon}
-            <span class='{icon + " size-6"}' aria-hidden="true"></span>
+      {#if image}
+        <div class="wire-feature-card__media">
+          <img
+            src='{image}'
+            alt='{imageAlt}'
+            loading='{imageLoading}'
+            class="wire-feature-card__image"
+          />
+          <div class="wire-feature-card__media-overlay" aria-hidden="true"></div>
+        </div>
+      {/if}
+
+      <slot name="media"></slot>
+
+      <div class="wire-feature-card__body">
+        <div class="wire-feature-card__top">
+          <div class="wire-feature-card__leading">
+            <slot name="icon"></slot>
+
+            {#if icon}
+              <div class="wire-feature-card__icon" aria-hidden="true">
+                <span class='{icon}'></span>
+              </div>
+            {/if}
+          </div>
+
+          {#if badge}
+            <span class="wire-feature-card__badge" data-color='{badgeColor}'>
+              {badge}
+            </span>
           {/if}
         </div>
 
-        {#if badge}
-          <Badge
-            label='{badge}'
-            size="sm"
-            color='{badgeColor}'
-            variant="soft"
-          />
-        {/if}
+        <div class="wire-feature-card__copy">
+          {#if eyebrow}
+            <p class="wire-feature-card__eyebrow">{eyebrow}</p>
+          {/if}
+
+          <h3 class="wire-feature-card__title">{title}</h3>
+
+          {#if description}
+            <p class="wire-feature-card__description">{description}</p>
+          {/if}
+        </div>
+
+        <div class="wire-feature-card__content">
+          <slot></slot>
+        </div>
+
+        <div class="wire-feature-card__footer">
+          <div class="wire-feature-card__footer-content">
+            <slot name="footer"></slot>
+          </div>
+
+          {#if href && actionLabel && !disabled}
+            <a
+              href='{href}'
+              target='{target}'
+              rel='{external || target === "_blank" ? "noopener noreferrer" : rel}'
+              class="wire-feature-card__action"
+              aria-label='{actionLabel + ": " + title}'
+            >
+              <span>{actionLabel}</span>
+
+              {#if actionIcon}
+                <span class='wire-feature-card__action-icon {actionIcon}' aria-hidden="true"></span>
+              {:else if external}
+                <span class="wire-feature-card__action-icon icon-[lucide--external-link]" aria-hidden="true"></span>
+              {:else if showArrow}
+                <span class="wire-feature-card__action-icon icon-[lucide--arrow-right]" aria-hidden="true"></span>
+              {/if}
+            </a>
+          {:else if actionLabel}
+            <span class="wire-feature-card__action wire-feature-card__action--disabled">
+              <span>{actionLabel}</span>
+            </span>
+          {/if}
+        </div>
       </div>
-
-      <h3 class="mt-5 text-lg font-bold leading-tight text-[var(--wire-color-text)]" class:text-xl='size === "lg"'>
-        {title}
-      </h3>
-
-      {#if description}
-        <p class="mt-3 flex-1 text-sm leading-6 text-[var(--wire-color-text-muted)]" class:text-base='size === "lg"'>
-          {description}
-        </p>
-      {/if}
-
-      <slot></slot>
-
-      <div class="mt-6 flex w-full items-center justify-between gap-3">
-        <slot name="footer"></slot>
-
-        {#if href && actionLabel}
-          <TextLink
-            label='{actionLabel}'
-            href='{href}'
-            icon='{actionIcon}'
-            iconPosition="start"
-            showArrow="true"
-            size="sm"
-            color='{color}'
-            class="ml-auto"
-          />
-        {/if}
-      </div>
-
-      {#if href}
-        <a
-          href='{href}'
-          aria-label='{title}'
-          class="absolute inset-0 z-10 rounded-2xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--wire-color-focus)]"
-        ></a>
-      {/if}
     </article>
   }
+
+  style {
+    .wire-feature-card {
+      --feature-accent: var(--wire-color-primary);
+      --feature-accent-hover: var(--wire-color-primary-hover);
+      --feature-accent-soft: var(--wire-color-primary-soft);
+      --feature-accent-muted: var(--wire-color-primary-muted);
+      --feature-contrast: var(--wire-color-primary-contrast);
+      --feature-border: color-mix(in srgb, var(--feature-accent) 16%, var(--wire-color-border));
+
+      position: relative;
+      isolation: isolate;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      min-width: 0;
+      height: 100%;
+      overflow: hidden;
+      color: var(--wire-color-text);
+      background:
+        radial-gradient(
+          circle at 100% 0%,
+          color-mix(in srgb, var(--feature-accent) 7%, transparent),
+          transparent 34%
+        ),
+        var(--wire-color-surface-raised);
+      border: 1px solid var(--feature-border);
+      border-radius: 1.25rem;
+      box-shadow:
+        0 1px 0 color-mix(in srgb, white 4%, transparent) inset,
+        0 10px 30px color-mix(in srgb, black 9%, transparent);
+      transition:
+        transform 180ms ease,
+        border-color 180ms ease,
+        box-shadow 180ms ease,
+        background-color 180ms ease;
+    }
+
+    .wire-feature-card[data-color="secondary"] {
+      --feature-accent: var(--wire-color-secondary);
+      --feature-accent-hover: var(--wire-color-secondary-hover);
+      --feature-accent-soft: var(--wire-color-secondary-soft);
+      --feature-accent-muted: var(--wire-color-secondary-muted);
+      --feature-contrast: var(--wire-color-secondary-contrast);
+    }
+
+    .wire-feature-card[data-color="info"] {
+      --feature-accent: var(--wire-color-info);
+      --feature-accent-soft: var(--wire-color-info-soft);
+      --feature-accent-muted: var(--wire-color-info-muted);
+      --feature-contrast: var(--wire-color-info-contrast);
+    }
+
+    .wire-feature-card[data-color="success"] {
+      --feature-accent: var(--wire-color-success);
+      --feature-accent-soft: var(--wire-color-success-soft);
+      --feature-accent-muted: var(--wire-color-success-muted);
+      --feature-contrast: var(--wire-color-success-contrast);
+    }
+
+    .wire-feature-card[data-color="warning"] {
+      --feature-accent: var(--wire-color-warning);
+      --feature-accent-soft: var(--wire-color-warning-soft);
+      --feature-accent-muted: var(--wire-color-warning-muted);
+      --feature-contrast: var(--wire-color-warning-contrast);
+    }
+
+    .wire-feature-card[data-color="danger"] {
+      --feature-accent: var(--wire-color-danger);
+      --feature-accent-soft: var(--wire-color-danger-soft);
+      --feature-accent-muted: var(--wire-color-danger-muted);
+      --feature-contrast: var(--wire-color-danger-contrast);
+    }
+
+    .wire-feature-card::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      z-index: -1;
+      height: 3px;
+      content: "";
+      background: linear-gradient(90deg, var(--feature-accent), transparent 72%);
+      opacity: 0.8;
+    }
+
+    .wire-feature-card__media {
+      position: relative;
+      overflow: hidden;
+      background: var(--wire-color-surface-soft);
+      border-bottom: 1px solid var(--feature-border);
+    }
+
+    .wire-feature-card[data-image-aspect="square"] .wire-feature-card__media {
+      aspect-ratio: 1;
+    }
+
+    .wire-feature-card[data-image-aspect="portrait"] .wire-feature-card__media {
+      aspect-ratio: 4 / 5;
+    }
+
+    .wire-feature-card[data-image-aspect="standard"] .wire-feature-card__media {
+      aspect-ratio: 4 / 3;
+    }
+
+    .wire-feature-card[data-image-aspect="wide"] .wire-feature-card__media {
+      aspect-ratio: 16 / 9;
+    }
+
+    .wire-feature-card[data-image-aspect="cinema"] .wire-feature-card__media {
+      aspect-ratio: 21 / 9;
+    }
+
+    .wire-feature-card__image {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transition: transform 300ms ease;
+    }
+
+    .wire-feature-card__media-overlay {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      background: linear-gradient(180deg, transparent 58%, color-mix(in srgb, black 18%, transparent));
+    }
+
+    .wire-feature-card__body {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      min-width: 0;
+      padding: 1.5rem;
+    }
+
+    .wire-feature-card[data-size="sm"] .wire-feature-card__body {
+      padding: 1.1rem;
+    }
+
+    .wire-feature-card[data-size="lg"] .wire-feature-card__body {
+      padding: 1.85rem;
+    }
+
+    .wire-feature-card__top {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 1rem;
+      min-width: 0;
+    }
+
+    .wire-feature-card__leading {
+      display: flex;
+      align-items: center;
+      min-width: 0;
+    }
+
+    .wire-feature-card__icon {
+      display: inline-flex;
+      flex: 0 0 auto;
+      align-items: center;
+      justify-content: center;
+      width: 3rem;
+      height: 3rem;
+      color: var(--feature-accent);
+      background: var(--feature-accent-soft);
+      border: 1px solid color-mix(in srgb, var(--feature-accent) 18%, transparent);
+      border-radius: 0.95rem;
+      box-shadow: 0 1px 0 color-mix(in srgb, white 7%, transparent) inset;
+    }
+
+    .wire-feature-card__icon > span {
+      width: 1.35rem;
+      height: 1.35rem;
+    }
+
+    .wire-feature-card[data-icon-size="sm"] .wire-feature-card__icon {
+      width: 2.5rem;
+      height: 2.5rem;
+      border-radius: 0.8rem;
+    }
+
+    .wire-feature-card[data-icon-size="sm"] .wire-feature-card__icon > span {
+      width: 1.1rem;
+      height: 1.1rem;
+    }
+
+    .wire-feature-card[data-icon-size="lg"] .wire-feature-card__icon {
+      width: 3.6rem;
+      height: 3.6rem;
+      border-radius: 1.05rem;
+    }
+
+    .wire-feature-card[data-icon-size="lg"] .wire-feature-card__icon > span {
+      width: 1.65rem;
+      height: 1.65rem;
+    }
+
+    .wire-feature-card[data-icon-style="solid"] .wire-feature-card__icon {
+      color: var(--feature-contrast);
+      background: var(--feature-accent);
+      border-color: color-mix(in srgb, white 18%, transparent);
+      box-shadow: 0 10px 24px color-mix(in srgb, var(--feature-accent) 24%, transparent);
+    }
+
+    .wire-feature-card[data-icon-style="outline"] .wire-feature-card__icon {
+      color: var(--feature-accent);
+      background: transparent;
+      border-color: color-mix(in srgb, var(--feature-accent) 38%, var(--wire-color-border));
+      box-shadow: none;
+    }
+
+    .wire-feature-card[data-icon-style="ghost"] .wire-feature-card__icon {
+      width: auto;
+      height: auto;
+      padding: 0.25rem;
+      background: transparent;
+      border-color: transparent;
+      border-radius: 0;
+      box-shadow: none;
+    }
+
+    .wire-feature-card__badge {
+      display: inline-flex;
+      flex: 0 0 auto;
+      align-items: center;
+      min-height: 1.65rem;
+      padding: 0.25rem 0.65rem;
+      color: var(--feature-accent);
+      font-size: 0.7rem;
+      font-weight: 600;
+      line-height: 1;
+      white-space: nowrap;
+      background: var(--feature-accent-soft);
+      border: 1px solid color-mix(in srgb, var(--feature-accent) 18%, transparent);
+      border-radius: 999px;
+    }
+
+    .wire-feature-card__badge[data-color="secondary"] {
+      color: var(--wire-color-secondary);
+      background: var(--wire-color-secondary-soft);
+      border-color: color-mix(in srgb, var(--wire-color-secondary) 20%, transparent);
+    }
+
+    .wire-feature-card__badge[data-color="info"] {
+      color: var(--wire-color-info);
+      background: var(--wire-color-info-soft);
+      border-color: color-mix(in srgb, var(--wire-color-info) 20%, transparent);
+    }
+
+    .wire-feature-card__badge[data-color="success"] {
+      color: var(--wire-color-success);
+      background: var(--wire-color-success-soft);
+      border-color: color-mix(in srgb, var(--wire-color-success) 20%, transparent);
+    }
+
+    .wire-feature-card__badge[data-color="warning"] {
+      color: var(--wire-color-warning-text);
+      background: var(--wire-color-warning-soft);
+      border-color: color-mix(in srgb, var(--wire-color-warning) 22%, transparent);
+    }
+
+    .wire-feature-card__badge[data-color="danger"] {
+      color: var(--wire-color-danger);
+      background: var(--wire-color-danger-soft);
+      border-color: color-mix(in srgb, var(--wire-color-danger) 20%, transparent);
+    }
+
+    .wire-feature-card__copy {
+      min-width: 0;
+      margin-top: 1.25rem;
+    }
+
+    .wire-feature-card__eyebrow {
+      margin: 0 0 0.5rem;
+      color: var(--feature-accent);
+      font-size: 0.72rem;
+      font-weight: 600;
+      line-height: 1.3;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+    }
+
+    .wire-feature-card__title {
+      margin: 0;
+      color: var(--wire-color-text);
+      font-size: 1.1rem;
+      font-weight: 600;
+      line-height: 1.35;
+      letter-spacing: -0.015em;
+      text-wrap: balance;
+      transition: color 180ms ease;
+    }
+
+    .wire-feature-card[data-size="sm"] .wire-feature-card__title {
+      font-size: 1rem;
+    }
+
+    .wire-feature-card[data-size="lg"] .wire-feature-card__title {
+      font-size: 1.3rem;
+    }
+
+    .wire-feature-card__description {
+      margin: 0.75rem 0 0;
+      color: var(--wire-color-text-muted);
+      font-size: 0.9rem;
+      line-height: 1.65;
+      text-wrap: pretty;
+    }
+
+    .wire-feature-card[data-size="sm"] .wire-feature-card__description {
+      margin-top: 0.6rem;
+      font-size: 0.82rem;
+      line-height: 1.55;
+    }
+
+    .wire-feature-card[data-size="lg"] .wire-feature-card__description {
+      font-size: 0.98rem;
+    }
+
+    .wire-feature-card__content {
+      min-width: 0;
+      margin-top: 1rem;
+    }
+
+    .wire-feature-card__content:empty {
+      display: none;
+    }
+
+    .wire-feature-card__footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+      min-width: 0;
+      margin-top: auto;
+      padding-top: 1.35rem;
+    }
+
+    .wire-feature-card__footer-content {
+      position: relative;
+      z-index: 3;
+      min-width: 0;
+    }
+
+    .wire-feature-card__footer-content:empty {
+      display: none;
+    }
+
+    .wire-feature-card__action {
+      position: relative;
+      z-index: 2;
+      display: inline-flex;
+      flex: 0 0 auto;
+      align-items: center;
+      justify-content: center;
+      gap: 0.45rem;
+      min-height: 2.25rem;
+      margin-left: auto;
+      color: var(--feature-accent);
+      font-size: 0.84rem;
+      font-weight: 600;
+      line-height: 1.2;
+      text-decoration: none;
+      transition:
+        color 180ms ease,
+        gap 180ms ease;
+    }
+
+    .wire-feature-card__action::before {
+      position: absolute;
+      inset: -0.4rem -0.55rem;
+      content: "";
+      border-radius: 0.75rem;
+    }
+
+    .wire-feature-card[data-stretched-link="true"] .wire-feature-card__action::after {
+      position: absolute;
+      inset: auto;
+      z-index: 1;
+      content: "";
+    }
+
+    .wire-feature-card[data-stretched-link="true"] .wire-feature-card__action {
+      position: static;
+    }
+
+    .wire-feature-card[data-stretched-link="true"] .wire-feature-card__action::after {
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+    }
+
+    .wire-feature-card__action:hover {
+      color: var(--feature-accent-hover, var(--feature-accent));
+      gap: 0.65rem;
+    }
+
+    .wire-feature-card__action:focus-visible {
+      outline: 2px solid var(--wire-color-focus);
+      outline-offset: 4px;
+      border-radius: 0.55rem;
+    }
+
+    .wire-feature-card__action-icon {
+      width: 1rem;
+      height: 1rem;
+      transition: transform 180ms ease;
+    }
+
+    .wire-feature-card__action:hover .wire-feature-card__action-icon {
+      transform: translateX(0.15rem);
+    }
+
+    .wire-feature-card__action--disabled {
+      color: var(--wire-color-text-muted);
+      opacity: 0.7;
+    }
+
+    .wire-feature-card[data-align="center"] .wire-feature-card__body {
+      align-items: center;
+      text-align: center;
+    }
+
+    .wire-feature-card[data-align="center"] .wire-feature-card__top,
+    .wire-feature-card[data-align="center"] .wire-feature-card__footer {
+      width: 100%;
+      justify-content: center;
+    }
+
+    .wire-feature-card[data-align="center"] .wire-feature-card__action {
+      margin-inline: auto;
+    }
+
+    .wire-feature-card[data-align="right"] .wire-feature-card__body {
+      align-items: flex-end;
+      text-align: right;
+    }
+
+    .wire-feature-card[data-align="right"] .wire-feature-card__top,
+    .wire-feature-card[data-align="right"] .wire-feature-card__footer {
+      width: 100%;
+      justify-content: flex-end;
+    }
+
+    .wire-feature-card[data-variant="raised"] {
+      box-shadow:
+        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
+        0 20px 50px color-mix(in srgb, black 17%, transparent);
+    }
+
+    .wire-feature-card[data-variant="soft"] {
+      background:
+        linear-gradient(135deg, var(--feature-accent-soft), transparent 68%),
+        var(--wire-color-surface-raised);
+      border-color: color-mix(in srgb, var(--feature-accent) 22%, var(--wire-color-border));
+      box-shadow: none;
+    }
+
+    .wire-feature-card[data-variant="outline"] {
+      background: transparent;
+      box-shadow: none;
+    }
+
+    .wire-feature-card[data-variant="ghost"] {
+      background: transparent;
+      border-color: transparent;
+      box-shadow: none;
+    }
+
+    .wire-feature-card[data-variant="minimal"] {
+      background: transparent;
+      border-color: transparent;
+      border-radius: 0;
+      box-shadow: none;
+    }
+
+    .wire-feature-card[data-variant="solid"] {
+      color: var(--feature-contrast);
+      background:
+        linear-gradient(135deg, color-mix(in srgb, white 9%, transparent), transparent 60%),
+        var(--feature-accent);
+      border-color: color-mix(in srgb, white 20%, transparent);
+      box-shadow: 0 22px 54px color-mix(in srgb, var(--feature-accent) 28%, transparent);
+    }
+
+    .wire-feature-card[data-variant="solid"] .wire-feature-card__title,
+    .wire-feature-card[data-variant="solid"] .wire-feature-card__description,
+    .wire-feature-card[data-variant="solid"] .wire-feature-card__eyebrow,
+    .wire-feature-card[data-variant="solid"] .wire-feature-card__action {
+      color: var(--feature-contrast);
+    }
+
+    .wire-feature-card[data-variant="solid"] .wire-feature-card__description {
+      opacity: 0.8;
+    }
+
+    .wire-feature-card[data-variant="solid"] .wire-feature-card__icon,
+    .wire-feature-card[data-variant="solid"] .wire-feature-card__badge {
+      color: var(--feature-contrast);
+      background: color-mix(in srgb, white 12%, transparent);
+      border-color: color-mix(in srgb, white 20%, transparent);
+    }
+
+    .wire-feature-card[data-variant="gradient"] {
+      background:
+        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--feature-accent) 24%, transparent), transparent 44%),
+        linear-gradient(145deg, var(--wire-color-surface-raised), color-mix(in srgb, var(--feature-accent) 8%, var(--wire-color-surface-raised)));
+      border-color: color-mix(in srgb, var(--feature-accent) 26%, var(--wire-color-border));
+    }
+
+    .wire-feature-card[data-hover="lift"]:not([data-disabled="true"]):hover {
+      transform: translateY(-0.3rem);
+      border-color: color-mix(in srgb, var(--feature-accent) 48%, var(--wire-color-border));
+      box-shadow:
+        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
+        0 24px 58px color-mix(in srgb, black 20%, transparent);
+    }
+
+    .wire-feature-card[data-hover="shadow"]:not([data-disabled="true"]):hover {
+      box-shadow:
+        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
+        0 24px 58px color-mix(in srgb, black 20%, transparent);
+    }
+
+    .wire-feature-card[data-hover="border"]:not([data-disabled="true"]):hover {
+      border-color: color-mix(in srgb, var(--feature-accent) 58%, var(--wire-color-border));
+    }
+
+    .wire-feature-card[data-hover="glow"]:not([data-disabled="true"]):hover {
+      border-color: color-mix(in srgb, var(--feature-accent) 54%, var(--wire-color-border));
+      box-shadow: 0 20px 60px color-mix(in srgb, var(--feature-accent) 22%, transparent);
+    }
+
+    .wire-feature-card:not([data-disabled="true"]):hover .wire-feature-card__image {
+      transform: scale(1.035);
+    }
+
+    .wire-feature-card:not([data-disabled="true"]):hover .wire-feature-card__title {
+      color: var(--feature-accent);
+    }
+
+    .wire-feature-card[data-variant="solid"]:not([data-disabled="true"]):hover .wire-feature-card__title {
+      color: var(--feature-contrast);
+    }
+
+    .wire-feature-card[data-disabled="true"] {
+      pointer-events: none;
+      opacity: 0.55;
+      filter: saturate(0.65);
+    }
+
+    @media (min-width: 48rem) {
+      .wire-feature-card[data-image-position="left"],
+      .wire-feature-card[data-image-position="right"] {
+        display: grid;
+        grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
+      }
+
+      .wire-feature-card[data-image-position="right"] {
+        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
+      }
+
+      .wire-feature-card[data-image-position="right"] .wire-feature-card__media {
+        order: 2;
+        border-right: 0;
+        border-bottom: 0;
+        border-left: 1px solid var(--feature-border);
+      }
+
+      .wire-feature-card[data-image-position="left"] .wire-feature-card__media {
+        border-right: 1px solid var(--feature-border);
+        border-bottom: 0;
+      }
+
+      .wire-feature-card[data-image-position="left"] .wire-feature-card__media,
+      .wire-feature-card[data-image-position="right"] .wire-feature-card__media {
+        height: 100%;
+        min-height: 15rem;
+        aspect-ratio: auto;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .wire-feature-card,
+      .wire-feature-card__image,
+      .wire-feature-card__action,
+      .wire-feature-card__action-icon {
+        transition: none;
+      }
+    }
+  }
 }
diff --git a/packages/ui/components/FeatureGrid.wrn b/packages/ui/components/FeatureGrid.wrn
index cec10f97..08463b2c 100644
--- a/packages/ui/components/FeatureGrid.wrn
+++ b/packages/ui/components/FeatureGrid.wrn
@@ -1,7 +1,6 @@
 component FeatureGrid {
   props {
-    color = "primary"
-    size = "default"
+    items = []
     columns = 3
     tabletColumns = 2
     mobileColumns = 1
@@ -10,46 +9,220 @@ component FeatureGrid {
     equalHeight = true
     align = "stretch"
     maxWidth = "full"
+    variant = "default"
+    label = "Features"
     class = ""
   }
 
   view {
-    <div
+    <section
+      {...attrs}
       data-ui-component="FeatureGrid"
       data-columns='{columns}'
       data-tablet-columns='{tabletColumns}'
       data-mobile-columns='{mobileColumns}'
-      class='grid w-full {class}'
-      class:wire-feature-grid-autofit='minItemWidth !== ""'
-      class:grid-cols-1='mobileColumns === 1'
-      class:grid-cols-2='mobileColumns === 2'
-      class:sm:grid-cols-1='tabletColumns === 1'
-      class:sm:grid-cols-2='tabletColumns === 2'
-      class:sm:grid-cols-3='tabletColumns === 3'
-      class:lg:grid-cols-2='columns === 2'
-      class:lg:grid-cols-3='columns === 3'
-      class:lg:grid-cols-4='columns === 4'
-      class:lg:grid-cols-5='columns === 5'
-      class:lg:grid-cols-6='columns === 6'
-      class:gap-3='gap === "sm"'
-      class:gap-5='gap === "md"'
-      class:gap-8='gap === "lg"'
-      class:gap-10='gap === "xl"'
-      class:items-stretch='equalHeight || align === "stretch"'
-      class:items-start='align === "start"'
-      class:items-center='align === "center"'
-      class:max-w-5xl='maxWidth === "lg"'
-      class:max-w-7xl='maxWidth === "xl"'
-      class:max-w-none='maxWidth === "full"'
-      style='--wire-feature-grid-min: {minItemWidth || "16rem"};'
+      data-gap='{gap}'
+      data-autofit='{minItemWidth !== "" ? "true" : "false"}'
+      data-equal-height='{equalHeight ? "true" : "false"}'
+      data-align='{align}'
+      data-max-width='{maxWidth}'
+      data-variant='{variant}'
+      class='wire-feature-grid {class}'
+      aria-label='{label}'
+      style='--wire-feature-grid-columns: {columns}; --wire-feature-grid-tablet-columns: {tabletColumns}; --wire-feature-grid-mobile-columns: {mobileColumns}; --wire-feature-grid-min-item-width: {minItemWidth || "17rem"};'
     >
-      <slot></slot>
-    </div>
+      <div class="wire-feature-grid__inner">
+        <div class="wire-feature-grid__grid" role="list">
+          {#if items.length > 0}
+            {#each items as item, itemIndex}
+              <FeatureCard
+                icon='{item.icon || ""}'
+                iconStyle='{item.iconStyle || "soft"}'
+                iconSize='{item.iconSize || "default"}'
+                eyebrow='{item.eyebrow || ""}'
+                title='{item.title || item.label || "Feature"}'
+                description='{item.description || ""}'
+                image='{item.image || item.imageSrc || ""}'
+                imageAlt='{item.imageAlt || item.title || item.label || ""}'
+                imagePosition='{item.imagePosition || "top"}'
+                imageAspect='{item.imageAspect || "wide"}'
+                href='{item.href || ""}'
+                target='{item.target || ""}'
+                rel='{item.rel || ""}'
+                external='{item.external || false}'
+                actionLabel='{item.actionLabel || "Learn more"}'
+                actionIcon='{item.actionIcon || ""}'
+                badge='{item.badge || ""}'
+                badgeColor='{item.badgeColor || item.color || "primary"}'
+                size='{item.size || "default"}'
+                color='{item.color || "primary"}'
+                variant='{item.variant || "default"}'
+                hover='{item.hover || "lift"}'
+                align='{item.align || "left"}'
+                disabled='{item.disabled || false}'
+                stretchedLink='{item.stretchedLink !== false}'
+                showArrow='{item.showArrow !== false}'
+                class='{item.class || ""}'
+              />
+            {/each}
+          {/if}
+
+          <slot></slot>
+        </div>
+      </div>
+    </section>
   }
 
   style {
-    .wire-feature-grid-autofit {
-      grid-template-columns: repeat(auto-fit, minmax(var(--wire-feature-grid-min), 1fr));
+    .wire-feature-grid {
+      --feature-grid-gap: 1.25rem;
+
+      position: relative;
+      width: 100%;
+      min-width: 0;
+      color: var(--wire-color-text);
+    }
+
+    .wire-feature-grid[data-gap="none"] {
+      --feature-grid-gap: 0;
+    }
+
+    .wire-feature-grid[data-gap="xs"] {
+      --feature-grid-gap: 0.5rem;
+    }
+
+    .wire-feature-grid[data-gap="sm"] {
+      --feature-grid-gap: 0.75rem;
+    }
+
+    .wire-feature-grid[data-gap="md"] {
+      --feature-grid-gap: 1.25rem;
+    }
+
+    .wire-feature-grid[data-gap="lg"] {
+      --feature-grid-gap: 1.75rem;
+    }
+
+    .wire-feature-grid[data-gap="xl"] {
+      --feature-grid-gap: 2.25rem;
+    }
+
+    .wire-feature-grid__inner {
+      width: 100%;
+      margin-inline: auto;
+    }
+
+    .wire-feature-grid[data-max-width="compact"] .wire-feature-grid__inner {
+      max-width: 64rem;
+    }
+
+    .wire-feature-grid[data-max-width="lg"] .wire-feature-grid__inner {
+      max-width: 72rem;
+    }
+
+    .wire-feature-grid[data-max-width="xl"] .wire-feature-grid__inner {
+      max-width: 80rem;
+    }
+
+    .wire-feature-grid[data-max-width="wide"] .wire-feature-grid__inner {
+      max-width: 90rem;
+    }
+
+    .wire-feature-grid[data-max-width="2xl"] .wire-feature-grid__inner {
+      max-width: 96rem;
+    }
+
+    .wire-feature-grid[data-max-width="full"] .wire-feature-grid__inner {
+      max-width: none;
+    }
+
+    .wire-feature-grid__grid {
+      display: grid;
+      grid-template-columns: repeat(
+        var(--wire-feature-grid-mobile-columns),
+        minmax(0, 1fr)
+      );
+      align-items: stretch;
+      gap: var(--feature-grid-gap);
+      width: 100%;
+      min-width: 0;
+    }
+
+    .wire-feature-grid[data-align="start"] .wire-feature-grid__grid {
+      align-items: start;
+    }
+
+    .wire-feature-grid[data-align="center"] .wire-feature-grid__grid {
+      align-items: center;
+    }
+
+    .wire-feature-grid[data-align="end"] .wire-feature-grid__grid {
+      align-items: end;
+    }
+
+    .wire-feature-grid__grid > * {
+      min-width: 0;
+      max-width: 100%;
+    }
+
+    .wire-feature-grid[data-equal-height="true"] .wire-feature-grid__grid > * {
+      height: 100%;
+    }
+
+    .wire-feature-grid[data-variant="panel"] .wire-feature-grid__inner {
+      padding: 1rem;
+      background: var(--wire-color-surface-raised);
+      border: 1px solid var(--wire-color-border);
+      border-radius: 1.5rem;
+    }
+
+    .wire-feature-grid[data-variant="soft"] .wire-feature-grid__inner {
+      padding: 1rem;
+      background: color-mix(in srgb, var(--wire-color-primary) 5%, transparent);
+      border: 1px solid color-mix(in srgb, var(--wire-color-primary) 14%, var(--wire-color-border));
+      border-radius: 1.5rem;
+    }
+
+    @media (min-width: 40rem) {
+      .wire-feature-grid__grid {
+        grid-template-columns: repeat(
+          var(--wire-feature-grid-tablet-columns),
+          minmax(0, 1fr)
+        );
+      }
+
+      .wire-feature-grid[data-autofit="true"] .wire-feature-grid__grid {
+        grid-template-columns: repeat(
+          auto-fit,
+          minmax(min(100%, var(--wire-feature-grid-min-item-width)), 1fr)
+        );
+      }
+
+      .wire-feature-grid[data-variant="panel"] .wire-feature-grid__inner,
+      .wire-feature-grid[data-variant="soft"] .wire-feature-grid__inner {
+        padding: 1.25rem;
+      }
+    }
+
+    @media (min-width: 64rem) {
+      .wire-feature-grid__grid {
+        grid-template-columns: repeat(
+          var(--wire-feature-grid-columns),
+          minmax(0, 1fr)
+        );
+      }
+
+      .wire-feature-grid[data-autofit="true"] .wire-feature-grid__grid {
+        grid-template-columns: repeat(
+          auto-fit,
+          minmax(min(100%, var(--wire-feature-grid-min-item-width)), 1fr)
+        );
+      }
+
+      .wire-feature-grid[data-variant="panel"] .wire-feature-grid__inner,
+      .wire-feature-grid[data-variant="soft"] .wire-feature-grid__inner {
+        padding: 1.5rem;
+      }
     }
   }
 }
diff --git a/packages/ui/components/Hero.wrn b/packages/ui/components/Hero.wrn
index 7613a2b6..1a789f4a 100644
--- a/packages/ui/components/Hero.wrn
+++ b/packages/ui/components/Hero.wrn
@@ -1,21 +1,45 @@
 component Hero {
   props {
     eyebrow = ""
+    eyebrowIcon = ""
+    icon = ""
     title = "Build something remarkable"
     highlight = ""
     description = ""
+
     align = "left"
     size = "default"
     color = "primary"
     variant = "default"
+    layout = "split"
+    visualPosition = "right"
+    visualStyle = "plain"
+    showDecorations = true
+    fullBleed = true
+
+    visualEyebrow = ""
+    visualTitle = ""
+    visualDescription = ""
+    visualIcon = ""
+    visualImage = ""
+    visualAlt = ""
+    visualItems = []
+
     primaryLabel = ""
     primaryHref = ""
     primaryIcon = ""
+    primaryTarget = ""
+
     secondaryLabel = ""
     secondaryHref = ""
     secondaryIcon = ""
+    secondaryTarget = ""
+
     tertiaryLabel = ""
     tertiaryHref = ""
+    tertiaryIcon = ""
+    tertiaryTarget = ""
+
     badges = []
     trustItems = []
     maxWidth = "xl"
@@ -23,127 +47,982 @@ component Hero {
   }
 
   view {
-    <Section
-      spacing='{size === "compact" ? "md" : (size === "large" ? "xl" : "lg")}'
-      maxWidth='{maxWidth}'
-      variant='{variant === "solid" ? "solid" : (variant === "soft" ? "soft" : "default")}'
-      color='{color}'
-      class='overflow-hidden {class}'
+    <section
+      {...attrs}
+      data-ui-component="Hero"
+      data-size='{size}'
+      data-color='{color}'
+      data-variant='{variant}'
+      data-layout='{layout}'
+      data-align='{align}'
+      data-visual-position='{visualPosition}'
+      data-visual-style='{visualStyle}'
+      data-max-width='{maxWidth}'
+      data-full-bleed='{fullBleed}'
+      aria-label='{title}'
+      class='wire-hero {class}'
     >
-      <div
-        data-ui-component="Hero"
-        class="relative isolate"
-        class:text-center='align === "center"'
-      >
-        {#if variant === "gradient"}
-          <div
-            class="pointer-events-none absolute inset-0 -z-10 rounded-[2rem] opacity-80"
-            style="background: radial-gradient(circle at 15% 20%, var(--wire-color-primary-muted), transparent 35%), radial-gradient(circle at 85% 75%, var(--wire-color-secondary-muted), transparent 36%);"
-            aria-hidden="true"
-          ></div>
+        {#if showDecorations}
+          <div class="wire-hero__decorations" aria-hidden="true">
+            <span class="wire-hero__glow wire-hero__glow--one"></span>
+            <span class="wire-hero__glow wire-hero__glow--two"></span>
+            <span class="wire-hero__grid-pattern"></span>
+          </div>
         {/if}
 
-        <div
-          class="max-w-4xl"
-          class:mx-auto='align === "center"'
-          class:ml-auto='align === "right"'
-        >
-          <slot name="eyebrow"></slot>
+        <div class="wire-hero__inner">
+          <div class="wire-hero__layout">
+            <div class="wire-hero__content">
+              <slot name="eyebrow"></slot>
 
-          {#if eyebrow}
-            <div
-              class="mb-6 inline-flex items-center gap-2 rounded-full border border-[var(--wire-color-primary-muted)] bg-[var(--wire-color-primary-soft)] px-4 py-2 text-sm font-semibold text-[var(--wire-color-primary)]"
-            >
-              <span class="size-2 rounded-full bg-[var(--wire-color-primary)]" aria-hidden="true"></span>
-              <span>{eyebrow}</span>
+              {#if eyebrow}
+                <div class="wire-hero__eyebrow">
+                  {#if eyebrowIcon}
+                    <span class='wire-hero__eyebrow-icon {eyebrowIcon}' aria-hidden="true"></span>
+                  {:else}
+                    <span class="wire-hero__eyebrow-dot" aria-hidden="true"></span>
+                  {/if}
+                  <span>{eyebrow}</span>
+                </div>
+              {/if}
+
+              <div class="wire-hero__heading-row">
+                {#if icon}
+                  <div class="wire-hero__icon" aria-hidden="true">
+                    <span class='{icon}'></span>
+                  </div>
+                {/if}
+
+                <div class="wire-hero__heading-copy">
+                  <h1 class="wire-hero__title">
+                    <span>{title}</span>
+                    {#if highlight}
+                      <span class="wire-hero__highlight">{highlight}</span>
+                    {/if}
+                  </h1>
+
+                  {#if description}
+                    <p class="wire-hero__description">{description}</p>
+                  {/if}
+                </div>
+              </div>
+
+              {#if badges.length > 0}
+                <div class="wire-hero__badges">
+                  {#each badges as badge}
+                    <Badge
+                      label='{badge.label || badge.title || badge}'
+                      icon='{badge.icon || ""}'
+                      color='{badge.color || color}'
+                      variant='{badge.variant || "soft"}'
+                      size='{badge.size || "sm"}'
+                    />
+                  {/each}
+                </div>
+              {/if}
+
+              <div class="wire-hero__actions">
+                {#if primaryLabel}
+                  <a
+                    href='{primaryHref || "#"}'
+                    target='{primaryTarget}'
+                    rel='{primaryTarget === "_blank" ? "noopener noreferrer" : ""}'
+                    class="wire-hero__action wire-hero__action--primary"
+                  >
+                    <span>{primaryLabel}</span>
+                    {#if primaryIcon}
+                      <span class='wire-hero__action-icon {primaryIcon}' aria-hidden="true"></span>
+                    {/if}
+                  </a>
+                {/if}
+
+                {#if secondaryLabel}
+                  <a
+                    href='{secondaryHref || "#"}'
+                    target='{secondaryTarget}'
+                    rel='{secondaryTarget === "_blank" ? "noopener noreferrer" : ""}'
+                    class="wire-hero__action wire-hero__action--secondary"
+                  >
+                    {#if secondaryIcon}
+                      <span class='wire-hero__action-icon {secondaryIcon}' aria-hidden="true"></span>
+                    {/if}
+                    <span>{secondaryLabel}</span>
+                  </a>
+                {/if}
+
+                {#if tertiaryLabel}
+                  <a
+                    href='{tertiaryHref || "#"}'
+                    target='{tertiaryTarget}'
+                    rel='{tertiaryTarget === "_blank" ? "noopener noreferrer" : ""}'
+                    class="wire-hero__action wire-hero__action--tertiary"
+                  >
+                    <span>{tertiaryLabel}</span>
+                    {#if tertiaryIcon}
+                      <span class='wire-hero__action-icon {tertiaryIcon}' aria-hidden="true"></span>
+                    {/if}
+                  </a>
+                {/if}
+
+                <slot name="actions"></slot>
+              </div>
+
+              {#if trustItems.length > 0}
+                <div class="wire-hero__trust" aria-label="Highlights">
+                  {#each trustItems as item}
+                    <span class="wire-hero__trust-item">
+                      <span
+                        class='wire-hero__trust-icon {(item.icon || "icon-[lucide--check-circle-2]")}'
+                        aria-hidden="true"
+                      ></span>
+                      <span>{item.label || item.title || item}</span>
+                    </span>
+                  {/each}
+                </div>
+              {/if}
+
+              <slot name="trust"></slot>
+              <slot></slot>
             </div>
-          {/if}
 
-          <h1
-            class="font-bold leading-[1.06] tracking-[-0.04em]"
-            class:text-4xl='size === "compact"'
-            class:sm:text-5xl='size === "compact"'
-            class:text-5xl='size === "default"'
-            class:sm:text-6xl='size === "default"'
-            class:lg:text-7xl='size === "default" || size === "large"'
-            class:text-[var(--wire-color-text)]='variant !== "solid"'
-          >
-            <span>{title}</span>
-            {#if highlight}
-              <span class="block bg-gradient-to-r from-[var(--wire-color-primary)] to-[var(--wire-color-secondary)] bg-clip-text text-transparent">
-                {highlight}
-              </span>
-            {/if}
-          </h1>
+            <div class="wire-hero__visual">
+              <slot name="visual"></slot>
 
-          {#if description}
-            <p
-              class="mt-6 max-w-3xl text-base leading-8 text-[var(--wire-color-text-muted)] sm:text-lg"
-              class:mx-auto='align === "center"'
-              class:ml-auto='align === "right"'
-              class:text-[var(--wire-color-on-primary)]='variant === "solid"'
-              class:opacity-85='variant === "solid"'
-            >
-              {description}
-            </p>
-          {/if}
+              {#if visualImage || visualTitle || visualDescription || visualItems.length > 0}
+                <div class="wire-hero__visual-card">
+                  {#if visualImage}
+                    <div class="wire-hero__visual-media">
+                      <img
+                        src='{visualImage}'
+                        alt='{visualAlt || visualTitle || title}'
+                        class="wire-hero__visual-image"
+                      />
+                    </div>
+                  {/if}
 
-          {#if badges.length > 0}
-            <div class="mt-6 flex flex-wrap gap-2" class:justify-center='align === "center"' class:justify-end='align === "right"'>
-              {#each badges as badge}
-                <Badge
-                  label='{badge.label || badge.title || badge}'
-                  icon='{badge.icon || ""}'
-                  color='{badge.color || color}'
-                  variant='{badge.variant || "soft"}'
-                  size='{badge.size || "sm"}'
-                />
-              {/each}
+                  {#if visualIcon || visualEyebrow || visualTitle || visualDescription}
+                    <div class="wire-hero__visual-header">
+                      {#if visualIcon}
+                        <span class="wire-hero__visual-icon" aria-hidden="true">
+                          <span class='{visualIcon}'></span>
+                        </span>
+                      {/if}
+
+                      <div class="wire-hero__visual-copy">
+                        {#if visualEyebrow}
+                          <p class="wire-hero__visual-eyebrow">{visualEyebrow}</p>
+                        {/if}
+
+                        {#if visualTitle}
+                          <h2 class="wire-hero__visual-title">{visualTitle}</h2>
+                        {/if}
+
+                        {#if visualDescription}
+                          <p class="wire-hero__visual-description">{visualDescription}</p>
+                        {/if}
+                      </div>
+                    </div>
+                  {/if}
+
+                  {#if visualItems.length > 0}
+                    <div class="wire-hero__visual-items">
+                      {#each visualItems as item}
+                        <div class="wire-hero__visual-item">
+                          {#if item.icon}
+                            <span class='wire-hero__visual-item-icon {item.icon}' aria-hidden="true"></span>
+                          {/if}
+
+                          <div class="wire-hero__visual-item-copy">
+                            <span class="wire-hero__visual-item-label">{item.label || item.title}</span>
+                            {#if item.description}
+                              <span class="wire-hero__visual-item-description">{item.description}</span>
+                            {/if}
+                          </div>
+
+                          {#if item.value}
+                            <strong class="wire-hero__visual-item-value">{item.value}</strong>
+                          {/if}
+                        </div>
+                      {/each}
+                    </div>
+                  {/if}
+                </div>
+              {/if}
             </div>
-          {/if}
-
-          <div class="mt-8">
-            <HeroActions
-              actions='{[
-                { label: primaryLabel, href: primaryHref, icon: primaryIcon, variant: "default", color: color },
-                { label: secondaryLabel, href: secondaryHref, icon: secondaryIcon, variant: "outline", color: color },
-                { label: tertiaryLabel, href: tertiaryHref, variant: "ghost", color: color }
-              ]}'
-              align='{align}'
-              stackOnMobile="true"
-              fullWidthMobile="true"
-              size='{size === "compact" ? "default" : "lg"}'
-              color='{color}'
-            >
-              <slot name="actions"></slot>
-            </HeroActions>
           </div>
 
-          {#if trustItems.length > 0}
-            <div
-              class="mt-8 flex flex-wrap items-center gap-x-6 gap-y-3 text-sm text-[var(--wire-color-text-muted)]"
-              class:justify-center='align === "center"'
-              class:justify-end='align === "right"'
-            >
-              {#each trustItems as item}
-                <span class="inline-flex items-center gap-2">
-                  <span class='{(item.icon || "icon-[lucide--check-circle-2]") + " size-4 text-[var(--wire-color-primary)]"}' aria-hidden="true"></span>
-                  <span>{item.label || item.title || item}</span>
-                </span>
-              {/each}
-            </div>
-          {/if}
-
-          <slot name="trust"></slot>
-          <slot></slot>
-        </div>
-
-        <div class="mt-10">
-          <slot name="visual"></slot>
-        </div>
-
-        <slot name="footer"></slot>
+          <div class="wire-hero__footer">
+            <slot name="footer"></slot>
+          </div>
       </div>
-    </Section>
+    </section>
+  }
+
+  style {
+    .wire-hero {
+      --wire-hero-accent: var(--wire-color-primary);
+      --wire-hero-accent-soft: var(--wire-color-primary-soft);
+      --wire-hero-accent-muted: var(--wire-color-primary-muted);
+      --wire-hero-contrast: var(--wire-color-primary-contrast);
+
+      position: relative;
+      isolation: isolate;
+      overflow: hidden;
+      width: 100%;
+      max-width: 100%;
+      box-sizing: border-box;
+      color: var(--wire-color-text);
+      background: transparent;
+      border: 1px solid transparent;
+      border-radius: 2rem;
+    }
+
+    .wire-hero[data-full-bleed="true"] {
+      width: 100vw;
+      max-width: 100vw;
+      margin-inline: calc(50% - 50vw);
+      border-right-width: 0;
+      border-left-width: 0;
+      border-radius: 0;
+    }
+
+    @supports (width: 100dvw) {
+      .wire-hero[data-full-bleed="true"] {
+        width: 100dvw;
+        max-width: 100dvw;
+        margin-inline: calc(50% - 50dvw);
+      }
+    }
+
+    .wire-hero[data-color="secondary"] {
+      --wire-hero-accent: var(--wire-color-secondary);
+      --wire-hero-accent-soft: var(--wire-color-secondary-soft, var(--wire-color-primary-soft));
+      --wire-hero-accent-muted: var(--wire-color-secondary-muted, var(--wire-color-primary-muted));
+      --wire-hero-contrast: var(--wire-color-secondary-contrast, var(--wire-color-primary-contrast));
+    }
+
+    .wire-hero[data-color="success"] {
+      --wire-hero-accent: var(--wire-color-success);
+      --wire-hero-accent-soft: var(--wire-color-success-soft, var(--wire-color-primary-soft));
+      --wire-hero-accent-muted: var(--wire-color-success-muted, var(--wire-color-primary-muted));
+      --wire-hero-contrast: var(--wire-color-success-contrast, var(--wire-color-primary-contrast));
+    }
+
+    .wire-hero[data-color="info"] {
+      --wire-hero-accent: var(--wire-color-info);
+      --wire-hero-accent-soft: var(--wire-color-info-soft, var(--wire-color-primary-soft));
+      --wire-hero-accent-muted: var(--wire-color-info-muted, var(--wire-color-primary-muted));
+      --wire-hero-contrast: var(--wire-color-info-contrast, var(--wire-color-primary-contrast));
+    }
+
+    .wire-hero[data-color="warning"] {
+      --wire-hero-accent: var(--wire-color-warning);
+      --wire-hero-accent-soft: var(--wire-color-warning-soft, var(--wire-color-primary-soft));
+      --wire-hero-accent-muted: var(--wire-color-warning-muted, var(--wire-color-primary-muted));
+      --wire-hero-contrast: var(--wire-color-warning-contrast, var(--wire-color-primary-contrast));
+    }
+
+    .wire-hero[data-color="danger"] {
+      --wire-hero-accent: var(--wire-color-danger);
+      --wire-hero-accent-soft: var(--wire-color-danger-soft, var(--wire-color-primary-soft));
+      --wire-hero-accent-muted: var(--wire-color-danger-muted, var(--wire-color-primary-muted));
+      --wire-hero-contrast: var(--wire-color-danger-contrast, var(--wire-color-primary-contrast));
+    }
+
+    .wire-hero[data-variant="soft"] {
+      background:
+        linear-gradient(135deg, var(--wire-hero-accent-soft), transparent 58%),
+        var(--wire-color-surface-raised);
+      border-color: var(--wire-color-border);
+    }
+
+    .wire-hero[data-variant="raised"] {
+      background: var(--wire-color-surface-raised);
+      border-color: var(--wire-color-border);
+      box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.14);
+    }
+
+    .wire-hero[data-variant="outline"] {
+      background: var(--wire-color-surface);
+      border-color: color-mix(in srgb, var(--wire-hero-accent) 35%, var(--wire-color-border));
+    }
+
+    .wire-hero[data-variant="gradient"] {
+      background:
+        radial-gradient(circle at 10% 15%, var(--wire-hero-accent-muted), transparent 32%),
+        radial-gradient(circle at 90% 85%, color-mix(in srgb, var(--wire-color-secondary) 24%, transparent), transparent 34%),
+        linear-gradient(145deg, var(--wire-color-surface-raised), var(--wire-color-surface));
+      border-color: color-mix(in srgb, var(--wire-hero-accent) 24%, var(--wire-color-border));
+    }
+
+    .wire-hero[data-variant="solid"] {
+      color: var(--wire-hero-contrast);
+      background:
+        radial-gradient(circle at 85% 15%, rgb(255 255 255 / 0.16), transparent 30%),
+        linear-gradient(135deg, var(--wire-hero-accent), color-mix(in srgb, var(--wire-hero-accent) 76%, black));
+      border-color: transparent;
+    }
+
+    .wire-hero[data-variant="minimal"] {
+      border-radius: 0;
+    }
+
+    .wire-hero__decorations {
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      overflow: hidden;
+      pointer-events: none;
+    }
+
+    .wire-hero__glow {
+      position: absolute;
+      width: 22rem;
+      height: 22rem;
+      border-radius: 999px;
+      background: var(--wire-hero-accent-muted);
+      filter: blur(5rem);
+      opacity: 0.42;
+    }
+
+    .wire-hero__glow--one {
+      top: -12rem;
+      right: -8rem;
+    }
+
+    .wire-hero__glow--two {
+      bottom: -15rem;
+      left: -10rem;
+      opacity: 0.22;
+    }
+
+    .wire-hero__grid-pattern {
+      position: absolute;
+      inset: 0;
+      opacity: 0.035;
+      background-image:
+        linear-gradient(var(--wire-color-text) 1px, transparent 1px),
+        linear-gradient(90deg, var(--wire-color-text) 1px, transparent 1px);
+      background-size: 2.5rem 2.5rem;
+      mask-image: linear-gradient(to bottom, black, transparent 84%);
+    }
+
+    .wire-hero__inner {
+      width: 100%;
+      max-width: 80rem;
+      margin-inline: auto;
+      padding: 3rem 1.25rem;
+      box-sizing: border-box;
+    }
+
+    .wire-hero[data-max-width="compact"] .wire-hero__inner,
+    .wire-hero[data-max-width="sm"] .wire-hero__inner {
+      max-width: 64rem;
+    }
+
+    .wire-hero[data-max-width="default"] .wire-hero__inner,
+    .wire-hero[data-max-width="lg"] .wire-hero__inner {
+      max-width: 72rem;
+    }
+
+    .wire-hero[data-max-width="wide"] .wire-hero__inner,
+    .wire-hero[data-max-width="xl"] .wire-hero__inner {
+      max-width: 80rem;
+    }
+
+    .wire-hero[data-max-width="2xl"] .wire-hero__inner {
+      max-width: 90rem;
+    }
+
+    .wire-hero[data-max-width="full"] .wire-hero__inner {
+      max-width: none;
+    }
+
+    .wire-hero[data-size="compact"] .wire-hero__inner,
+    .wire-hero[data-size="sm"] .wire-hero__inner {
+      padding-block: 2rem;
+    }
+
+    .wire-hero[data-size="lg"] .wire-hero__inner,
+    .wire-hero[data-size="large"] .wire-hero__inner {
+      padding-block: 4rem;
+    }
+
+    .wire-hero[data-size="xl"] .wire-hero__inner {
+      padding-block: 5rem;
+    }
+
+    .wire-hero__layout {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      align-items: center;
+      gap: 2.5rem;
+    }
+
+    .wire-hero__content {
+      min-width: 0;
+      max-width: 46rem;
+    }
+
+    .wire-hero[data-align="center"] .wire-hero__content {
+      margin-inline: auto;
+      text-align: center;
+    }
+
+    .wire-hero[data-align="right"] .wire-hero__content {
+      margin-left: auto;
+      text-align: right;
+    }
+
+    .wire-hero__eyebrow {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.6rem;
+      width: fit-content;
+      margin-bottom: 1.4rem;
+      padding: 0.55rem 0.9rem;
+      color: var(--wire-hero-accent);
+      font-size: 0.75rem;
+      font-weight: 600;
+      line-height: 1;
+      letter-spacing: 0.04em;
+      background: var(--wire-hero-accent-soft);
+      border: 1px solid color-mix(in srgb, var(--wire-hero-accent) 24%, transparent);
+      border-radius: 999px;
+    }
+
+    .wire-hero[data-align="center"] .wire-hero__eyebrow {
+      margin-inline: auto;
+    }
+
+    .wire-hero[data-align="right"] .wire-hero__eyebrow {
+      margin-left: auto;
+    }
+
+    .wire-hero__eyebrow-dot {
+      width: 0.45rem;
+      height: 0.45rem;
+      flex: 0 0 auto;
+      background: currentColor;
+      border-radius: 999px;
+      box-shadow: 0 0 0 0.25rem color-mix(in srgb, currentColor 12%, transparent);
+    }
+
+    .wire-hero__eyebrow-icon {
+      width: 0.9rem;
+      height: 0.9rem;
+      flex: 0 0 auto;
+    }
+
+    .wire-hero__heading-row {
+      display: flex;
+      align-items: flex-start;
+      gap: 1.25rem;
+    }
+
+    .wire-hero[data-align="center"] .wire-hero__heading-row {
+      justify-content: center;
+    }
+
+    .wire-hero[data-align="right"] .wire-hero__heading-row {
+      justify-content: flex-end;
+    }
+
+    .wire-hero__heading-copy {
+      min-width: 0;
+    }
+
+    .wire-hero__icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 3.5rem;
+      height: 3.5rem;
+      flex: 0 0 auto;
+      color: var(--wire-hero-accent);
+      font-size: 1.5rem;
+      background: var(--wire-hero-accent-soft);
+      border-radius: 1.1rem;
+    }
+
+    .wire-hero__title {
+      max-width: 18ch;
+      margin: 0;
+      color: var(--wire-color-text);
+      font-size: clamp(2.35rem, 6vw, 4.8rem);
+      font-weight: 650;
+      line-height: 1.02;
+      letter-spacing: -0.045em;
+      text-wrap: balance;
+    }
+
+    .wire-hero[data-size="compact"] .wire-hero__title,
+    .wire-hero[data-size="sm"] .wire-hero__title {
+      font-size: clamp(2rem, 5vw, 3.4rem);
+    }
+
+    .wire-hero[data-size="lg"] .wire-hero__title,
+    .wire-hero[data-size="large"] .wire-hero__title {
+      font-size: clamp(2.8rem, 7vw, 5.6rem);
+    }
+
+    .wire-hero[data-size="xl"] .wire-hero__title {
+      font-size: clamp(3.1rem, 8vw, 6.4rem);
+    }
+
+    .wire-hero[data-variant="solid"] .wire-hero__title,
+    .wire-hero[data-variant="solid"] .wire-hero__description,
+    .wire-hero[data-variant="solid"] .wire-hero__trust {
+      color: var(--wire-hero-contrast);
+    }
+
+    .wire-hero__highlight {
+      display: block;
+      color: var(--wire-hero-accent);
+      background: linear-gradient(90deg, var(--wire-hero-accent), var(--wire-color-secondary));
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    .wire-hero[data-variant="solid"] .wire-hero__highlight {
+      color: inherit;
+      background: none;
+      -webkit-text-fill-color: currentColor;
+      opacity: 0.9;
+    }
+
+    .wire-hero__description {
+      max-width: 42rem;
+      margin: 1.5rem 0 0;
+      color: var(--wire-color-text-muted);
+      font-size: 1.05rem;
+      line-height: 1.8;
+      text-wrap: pretty;
+    }
+
+    .wire-hero[data-align="center"] .wire-hero__title,
+    .wire-hero[data-align="center"] .wire-hero__description {
+      margin-inline: auto;
+    }
+
+    .wire-hero[data-align="right"] .wire-hero__title,
+    .wire-hero[data-align="right"] .wire-hero__description {
+      margin-left: auto;
+    }
+
+    .wire-hero__badges,
+    .wire-hero__actions,
+    .wire-hero__trust {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+
+    .wire-hero__badges {
+      gap: 0.5rem;
+      margin-top: 1.5rem;
+    }
+
+    .wire-hero__actions {
+      gap: 0.75rem;
+      margin-top: 2rem;
+    }
+
+    .wire-hero__actions:empty {
+      display: none;
+    }
+
+    .wire-hero__action {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.6rem;
+      min-height: 3rem;
+      padding: 0.75rem 1.15rem;
+      font-size: 0.9rem;
+      font-weight: 650;
+      line-height: 1.2;
+      text-decoration: none;
+      border: 1px solid transparent;
+      border-radius: 0.85rem;
+      transition:
+        transform 160ms ease,
+        background-color 160ms ease,
+        border-color 160ms ease,
+        color 160ms ease,
+        box-shadow 160ms ease;
+    }
+
+    .wire-hero__action:hover {
+      transform: translateY(-2px);
+    }
+
+    .wire-hero__action:focus-visible {
+      outline: 3px solid color-mix(in srgb, var(--wire-hero-accent) 30%, transparent);
+      outline-offset: 3px;
+    }
+
+    .wire-hero__action--primary {
+      color: var(--wire-hero-contrast);
+      background: var(--wire-hero-accent);
+      box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--wire-hero-accent) 24%, transparent);
+    }
+
+    .wire-hero__action--primary:hover {
+      box-shadow: 0 1rem 2.4rem color-mix(in srgb, var(--wire-hero-accent) 34%, transparent);
+    }
+
+    .wire-hero__action--secondary {
+      color: var(--wire-hero-accent);
+      background: color-mix(in srgb, var(--wire-color-surface-raised) 76%, transparent);
+      border-color: color-mix(in srgb, var(--wire-hero-accent) 45%, var(--wire-color-border));
+    }
+
+    .wire-hero__action--secondary:hover {
+      background: var(--wire-hero-accent-soft);
+    }
+
+    .wire-hero__action--tertiary {
+      color: var(--wire-color-text-muted);
+      background: transparent;
+    }
+
+    .wire-hero__action--tertiary:hover {
+      color: var(--wire-hero-accent);
+      background: var(--wire-hero-accent-soft);
+    }
+
+    .wire-hero__action-icon {
+      width: 1rem;
+      height: 1rem;
+      flex: 0 0 auto;
+    }
+
+    .wire-hero__trust {
+      gap: 0.75rem 1.25rem;
+      margin-top: 1.75rem;
+      color: var(--wire-color-text-muted);
+      font-size: 0.82rem;
+      line-height: 1.5;
+    }
+
+    .wire-hero__trust-item {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.45rem;
+    }
+
+    .wire-hero__trust-icon {
+      width: 1rem;
+      height: 1rem;
+      flex: 0 0 auto;
+      color: var(--wire-hero-accent);
+    }
+
+    .wire-hero[data-align="center"] .wire-hero__badges,
+    .wire-hero[data-align="center"] .wire-hero__actions,
+    .wire-hero[data-align="center"] .wire-hero__trust {
+      justify-content: center;
+    }
+
+    .wire-hero[data-align="right"] .wire-hero__badges,
+    .wire-hero[data-align="right"] .wire-hero__actions,
+    .wire-hero[data-align="right"] .wire-hero__trust {
+      justify-content: flex-end;
+    }
+
+    .wire-hero__visual {
+      position: relative;
+      min-width: 0;
+      width: 100%;
+    }
+
+    .wire-hero__visual:not(:has(> *)) {
+      display: none;
+    }
+
+    .wire-hero__layout:not(:has(.wire-hero__visual > *)) {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .wire-hero[data-visual-style="card"] .wire-hero__visual {
+      padding: 0.75rem;
+      background: color-mix(in srgb, var(--wire-color-surface-raised) 88%, transparent);
+      border: 1px solid var(--wire-color-border);
+      border-radius: 1.75rem;
+      box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.14);
+    }
+
+    .wire-hero[data-visual-style="soft"] .wire-hero__visual {
+      padding: 1.25rem;
+      background: var(--wire-hero-accent-soft);
+      border-radius: 1.75rem;
+    }
+
+    .wire-hero__visual > * {
+      width: 100%;
+      max-width: 100%;
+    }
+
+    .wire-hero__visual-card {
+      width: 100%;
+      overflow: hidden;
+      padding: 1.25rem;
+      color: var(--wire-color-text);
+      background: color-mix(in srgb, var(--wire-color-surface-raised) 92%, transparent);
+      border: 1px solid color-mix(in srgb, var(--wire-hero-accent) 18%, var(--wire-color-border));
+      border-radius: 1.75rem;
+      box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.14);
+      backdrop-filter: blur(1rem);
+    }
+
+    .wire-hero__visual-media {
+      overflow: hidden;
+      margin: -0.5rem -0.5rem 1.25rem;
+      border-radius: 1.25rem;
+    }
+
+    .wire-hero__visual-image {
+      display: block;
+      width: 100%;
+      aspect-ratio: 16 / 10;
+      object-fit: cover;
+    }
+
+    .wire-hero__visual-header {
+      display: flex;
+      align-items: flex-start;
+      gap: 1rem;
+    }
+
+    .wire-hero__visual-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 3rem;
+      height: 3rem;
+      flex: 0 0 auto;
+      color: var(--wire-hero-accent);
+      background: var(--wire-hero-accent-soft);
+      border-radius: 1rem;
+    }
+
+    .wire-hero__visual-icon > span {
+      width: 1.35rem;
+      height: 1.35rem;
+    }
+
+    .wire-hero__visual-copy {
+      min-width: 0;
+    }
+
+    .wire-hero__visual-eyebrow {
+      margin: 0 0 0.35rem;
+      color: var(--wire-hero-accent);
+      font-size: 0.72rem;
+      font-weight: 600;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+    }
+
+    .wire-hero__visual-title {
+      margin: 0;
+      color: var(--wire-color-text);
+      font-size: 1.35rem;
+      font-weight: 650;
+      line-height: 1.25;
+    }
+
+    .wire-hero__visual-description {
+      margin: 0.55rem 0 0;
+      color: var(--wire-color-text-muted);
+      font-size: 0.9rem;
+      line-height: 1.65;
+    }
+
+    .wire-hero__visual-items {
+      display: grid;
+      gap: 0.75rem;
+      margin-top: 1.25rem;
+    }
+
+    .wire-hero__visual-item {
+      display: flex;
+      align-items: center;
+      gap: 0.8rem;
+      min-width: 0;
+      padding: 0.9rem 1rem;
+      background: color-mix(in srgb, var(--wire-color-surface) 82%, transparent);
+      border: 1px solid var(--wire-color-border);
+      border-radius: 1rem;
+    }
+
+    .wire-hero__visual-item-icon {
+      width: 1.1rem;
+      height: 1.1rem;
+      flex: 0 0 auto;
+      color: var(--wire-hero-accent);
+    }
+
+    .wire-hero__visual-item-copy {
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+      min-width: 0;
+    }
+
+    .wire-hero__visual-item-label {
+      color: var(--wire-color-text);
+      font-size: 0.88rem;
+      font-weight: 600;
+      line-height: 1.35;
+    }
+
+    .wire-hero__visual-item-description {
+      margin-top: 0.15rem;
+      color: var(--wire-color-text-muted);
+      font-size: 0.76rem;
+      line-height: 1.4;
+    }
+
+    .wire-hero__visual-item-value {
+      flex: 0 0 auto;
+      color: var(--wire-hero-accent);
+      font-size: 0.9rem;
+      font-weight: 700;
+    }
+
+    .wire-hero[data-variant="solid"] .wire-hero__visual-card,
+    .wire-hero[data-variant="solid"] .wire-hero__visual-title,
+    .wire-hero[data-variant="solid"] .wire-hero__visual-item-label {
+      color: var(--wire-hero-contrast);
+    }
+
+    .wire-hero[data-variant="solid"] .wire-hero__visual-description,
+    .wire-hero[data-variant="solid"] .wire-hero__visual-item-description {
+      color: color-mix(in srgb, var(--wire-hero-contrast) 74%, transparent);
+    }
+
+    .wire-hero__footer:not(:has(> *)) {
+      display: none;
+    }
+
+    .wire-hero__footer {
+      margin-top: 2rem;
+      padding-top: 1.5rem;
+      border-top: 1px solid var(--wire-color-border);
+    }
+
+    @media (min-width: 640px) {
+      .wire-hero__inner {
+        padding-inline: 2rem;
+      }
+    }
+
+    @media (min-width: 768px) {
+      .wire-hero__actions {
+        gap: 0.9rem;
+      }
+
+      .wire-hero__action {
+        padding-inline: 1.35rem;
+      }
+    }
+
+    @media (min-width: 1024px) {
+      .wire-hero__inner {
+        padding-inline: 3rem;
+      }
+
+      .wire-hero[data-layout="split"] .wire-hero__layout {
+        grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.92fr);
+        gap: 4rem;
+      }
+
+      .wire-hero[data-layout="stacked"] .wire-hero__layout,
+      .wire-hero[data-layout="content"] .wire-hero__layout {
+        grid-template-columns: minmax(0, 1fr);
+      }
+
+      .wire-hero[data-layout="stacked"] .wire-hero__content {
+        max-width: 58rem;
+      }
+
+      .wire-hero[data-layout="stacked"] .wire-hero__visual {
+        max-width: 68rem;
+      }
+
+      .wire-hero[data-layout="content"] .wire-hero__visual {
+        display: none;
+      }
+
+      .wire-hero[data-visual-position="left"] .wire-hero__visual {
+        grid-column: 1;
+        grid-row: 1;
+      }
+
+      .wire-hero[data-visual-position="left"] .wire-hero__content {
+        grid-column: 2;
+        grid-row: 1;
+      }
+
+      .wire-hero[data-layout="stacked"][data-visual-position="left"] .wire-hero__visual,
+      .wire-hero[data-layout="stacked"][data-visual-position="left"] .wire-hero__content {
+        grid-column: 1;
+      }
+
+      .wire-hero[data-layout="stacked"][data-visual-position="left"] .wire-hero__visual {
+        grid-row: 1;
+      }
+
+      .wire-hero[data-layout="stacked"][data-visual-position="left"] .wire-hero__content {
+        grid-row: 2;
+      }
+    }
+
+    @media (max-width: 639px) {
+      .wire-hero:not([data-full-bleed="true"]) {
+        border-radius: 1.25rem;
+      }
+
+      .wire-hero__inner {
+        padding: 2.25rem 1rem;
+      }
+
+      .wire-hero__heading-row {
+        gap: 0.85rem;
+      }
+
+      .wire-hero__icon {
+        width: 2.75rem;
+        height: 2.75rem;
+        font-size: 1.2rem;
+        border-radius: 0.85rem;
+      }
+
+      .wire-hero__description {
+        font-size: 0.95rem;
+        line-height: 1.7;
+      }
+
+      .wire-hero__actions {
+        align-items: stretch;
+      }
+
+      .wire-hero__action {
+        width: 100%;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .wire-hero__action {
+        transition: none;
+      }
+
+      .wire-hero__action:hover {
+        transform: none;
+      }
+    }
   }
 }
diff --git a/packages/ui/components/MetricCard.wrn b/packages/ui/components/MetricCard.wrn
index efc63fc4..a17ca8f8 100644
--- a/packages/ui/components/MetricCard.wrn
+++ b/packages/ui/components/MetricCard.wrn
@@ -1,107 +1,669 @@
 component MetricCard {
   props {
+    @event select = function
+    @event action = function
+
     label = "Metric"
     value = "0"
     description = ""
     icon = ""
+    iconStyle = "soft"
     prefix = ""
     suffix = ""
+    badge = ""
     trend = ""
     trendLabel = ""
     trendDirection = "neutral"
+    progress = -1
+    progressLabel = ""
     href = ""
+    target = ""
+    rel = ""
+    external = false
     actionLabel = ""
+    actionIcon = ""
+    showArrow = true
+    selectable = false
+    disabled = false
     size = "default"
     color = "primary"
     variant = "default"
+    hover = "lift"
     align = "left"
     class = ""
   }
 
+  functions {
+    function selectCard(sourceEvent) {
+      if (disabled || !selectable) {
+        return
+      }
+      if (sourceEvent.target.closest(".wire-metric-card__action")) {
+        return
+      }
+      $emit("select", {
+        label: label,
+        value: value,
+        href: href,
+        sourceEvent: sourceEvent
+      })
+    }
+
+    function activateAction(sourceEvent) {
+      if (disabled) {
+        sourceEvent.preventDefault()
+        return
+      }
+      $emit("action", {
+        label: label,
+        value: value,
+        href: href,
+        sourceEvent: sourceEvent
+      })
+    }
+  }
+
   view {
     <article
+      {...attrs}
       data-ui-component="MetricCard"
-      class='group relative flex h-full flex-col rounded-2xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-5 shadow-sm transition {class}'
-      class:p-4='size === "sm"'
-      class:p-6='size === "lg"'
-      class:bg-[var(--wire-color-primary-soft)]='variant === "soft" && color === "primary"'
-      class:bg-[var(--wire-color-success-soft)]='variant === "soft" && color === "success"'
-      class:bg-[var(--wire-color-warning-soft)]='variant === "soft" && color === "warning"'
-      class:bg-[var(--wire-color-danger-soft)]='variant === "soft" && color === "danger"'
-      class:bg-transparent='variant === "minimal"'
-      class:border-transparent='variant === "minimal"'
-      class:shadow-none='variant === "minimal"'
-      class:text-center='align === "center"'
-      class:items-center='align === "center"'
-      class:text-right='align === "right"'
-      class:items-end='align === "right"'
-      class:hover:border-[var(--wire-color-primary)]='href !== ""'
-      class:hover:shadow-lg='href !== ""'
+      data-size='{size}'
+      data-color='{color}'
+      data-variant='{variant}'
+      data-hover='{hover}'
+      data-align='{align}'
+      data-icon-style='{iconStyle}'
+      data-disabled='{disabled ? "true" : "false"}'
+      data-selectable='{selectable ? "true" : "false"}'
+      class='wire-metric-card {class}'
+      role='{selectable ? "button" : ""}'
+      tabindex='{selectable && !disabled ? "0" : "-1"}'
+      @click='selectCard(event)'
+      @keydown='if (selectable && (event.key === "Enter" || event.key === " ")) { event.preventDefault(); selectCard(event) }'
+      style='--wire-metric-progress: {progress}%;'
     >
-      <div class="flex w-full items-start justify-between gap-4">
-        <div>
-          <p class="text-sm font-semibold text-[var(--wire-color-text-muted)]">{label}</p>
-          <p class="mt-2 text-3xl font-bold tracking-tight text-[var(--wire-color-text)]" class:text-4xl='size === "lg"'>
-            <span>{prefix}</span><span>{value}</span><span>{suffix}</span>
-          </p>
+      <div class="wire-metric-card__top">
+        <div class="wire-metric-card__heading">
+          {#if label}
+            <p class="wire-metric-card__label">{label}</p>
+          {/if}
+
+          {#if badge}
+            <span class="wire-metric-card__badge">{badge}</span>
+          {/if}
         </div>
 
         {#if icon}
-          <span
-            class="flex size-11 shrink-0 items-center justify-center rounded-2xl bg-[var(--wire-color-primary-soft)] text-[var(--wire-color-primary)]"
-            class:bg-[var(--wire-color-success-soft)]='color === "success"'
-            class:text-[var(--wire-color-success)]='color === "success"'
-            class:bg-[var(--wire-color-warning-soft)]='color === "warning"'
-            class:text-[var(--wire-color-warning-text)]='color === "warning"'
-            class:bg-[var(--wire-color-danger-soft)]='color === "danger"'
-            class:text-[var(--wire-color-danger)]='color === "danger"'
-            class:bg-[var(--wire-color-info-soft)]='color === "info"'
-            class:text-[var(--wire-color-info)]='color === "info"'
-          >
-            <span class='{icon + " size-5"}' aria-hidden="true"></span>
-          </span>
+          <div class="wire-metric-card__icon" aria-hidden="true">
+            <span class='{icon}'></span>
+          </div>
+        {/if}
+      </div>
+
+      <div class="wire-metric-card__value-row">
+        {#if prefix}
+          <span class="wire-metric-card__prefix">{prefix}</span>
+        {/if}
+
+        <strong class="wire-metric-card__value">{value}</strong>
+
+        {#if suffix}
+          <span class="wire-metric-card__suffix">{suffix}</span>
         {/if}
       </div>
 
       {#if description}
-        <p class="mt-3 text-sm leading-6 text-[var(--wire-color-text-muted)]">{description}</p>
+        <p class="wire-metric-card__description">{description}</p>
+      {/if}
+
+      <slot></slot>
+
+      {#if progress >= 0}
+        <div class="wire-metric-card__progress-block">
+          <div class="wire-metric-card__progress-meta">
+            <span>{progressLabel || "Progress"}</span>
+            <strong>{progress}%</strong>
+          </div>
+          <div
+            class="wire-metric-card__progress-track"
+            role="progressbar"
+            aria-label='{progressLabel || label}'
+            aria-valuemin="0"
+            aria-valuemax="100"
+            aria-valuenow='{progress}'
+          >
+            <span class="wire-metric-card__progress-value"></span>
+          </div>
+        </div>
       {/if}
 
       {#if trend || trendLabel}
-        <div class="mt-4 inline-flex items-center gap-2 text-sm font-semibold">
-          <span
-            class="inline-flex items-center gap-1 rounded-full px-2.5 py-1"
-            class:bg-[var(--wire-color-success-soft)]='trendDirection === "up" || trendDirection === "positive"'
-            class:text-[var(--wire-color-success)]='trendDirection === "up" || trendDirection === "positive"'
-            class:bg-[var(--wire-color-danger-soft)]='trendDirection === "down" || trendDirection === "negative"'
-            class:text-[var(--wire-color-danger)]='trendDirection === "down" || trendDirection === "negative"'
-            class:bg-[var(--wire-color-surface-soft)]='trendDirection === "neutral"'
-            class:text-[var(--wire-color-text-muted)]='trendDirection === "neutral"'
-          >
-            {#if trendDirection === "up" || trendDirection === "positive"}
-              <span class="icon-[lucide--trending-up] size-4" aria-hidden="true"></span>
-            {:else if trendDirection === "down" || trendDirection === "negative"}
-              <span class="icon-[lucide--trending-down] size-4" aria-hidden="true"></span>
-            {:else}
-              <span class="icon-[lucide--minus] size-4" aria-hidden="true"></span>
-            {/if}
-            <span>{trend}</span>
-          </span>
+        <div
+          class="wire-metric-card__trend"
+          data-direction='{trendDirection}'
+        >
+          {#if trendDirection === "up" || trendDirection === "positive"}
+            <span class="icon-[lucide--trending-up] wire-metric-card__trend-icon" aria-hidden="true"></span>
+          {:else if trendDirection === "down" || trendDirection === "negative"}
+            <span class="icon-[lucide--trending-down] wire-metric-card__trend-icon" aria-hidden="true"></span>
+          {:else}
+            <span class="icon-[lucide--minus] wire-metric-card__trend-icon" aria-hidden="true"></span>
+          {/if}
+
+          {#if trend}
+            <strong class="wire-metric-card__trend-value">{trend}</strong>
+          {/if}
+
           {#if trendLabel}
-            <span class="text-[var(--wire-color-text-muted)]">{trendLabel}</span>
+            <span class="wire-metric-card__trend-label">{trendLabel}</span>
           {/if}
         </div>
       {/if}
 
-      {#if href}
-        <TextLink
-          label='{actionLabel || "View details"}'
-          href='{href}'
-          color='{color}'
-          size="sm"
-          class="mt-5"
-        />
-      {/if}
+      <div class="wire-metric-card__footer">
+        <slot name="footer"></slot>
+
+        {#if href}
+          <a
+            href='{href}'
+            target='{target}'
+            rel='{external || target === "_blank" ? "noopener noreferrer" : rel}'
+            class="wire-metric-card__action"
+            aria-disabled='{disabled ? "true" : "false"}'
+            @click='activateAction(event)'
+          >
+            <span>{actionLabel || "View details"}</span>
+
+            {#if actionIcon}
+              <span class='wire-metric-card__action-icon {actionIcon}' aria-hidden="true"></span>
+            {:else if external}
+              <span class="wire-metric-card__action-icon icon-[lucide--external-link]" aria-hidden="true"></span>
+            {:else if showArrow}
+              <span class="wire-metric-card__action-icon icon-[lucide--arrow-right]" aria-hidden="true"></span>
+            {/if}
+          </a>
+        {:else if actionLabel}
+          <button
+            type="button"
+            class="wire-metric-card__action"
+            disabled='{disabled}'
+            @click='activateAction(event)'
+          >
+            <span>{actionLabel}</span>
+            {#if actionIcon}
+              <span class='wire-metric-card__action-icon {actionIcon}' aria-hidden="true"></span>
+            {:else if showArrow}
+              <span class="wire-metric-card__action-icon icon-[lucide--arrow-right]" aria-hidden="true"></span>
+            {/if}
+          </button>
+        {/if}
+      </div>
     </article>
   }
+
+  style {
+    .wire-metric-card {
+      --metric-accent: var(--wire-color-primary);
+      --metric-accent-hover: var(--wire-color-primary-hover);
+      --metric-accent-soft: var(--wire-color-primary-soft);
+      --metric-accent-muted: var(--wire-color-primary-muted);
+      --metric-contrast: var(--wire-color-primary-contrast);
+      --metric-border: color-mix(in srgb, var(--metric-accent) 16%, var(--wire-color-border));
+
+      position: relative;
+      isolation: isolate;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      min-width: 0;
+      height: 100%;
+      padding: 1.5rem;
+      color: var(--wire-color-text);
+      background:
+        radial-gradient(
+          circle at 100% 0%,
+          color-mix(in srgb, var(--metric-accent) 8%, transparent),
+          transparent 36%
+        ),
+        var(--wire-color-surface-raised);
+      border: 1px solid var(--metric-border);
+      border-radius: 1.25rem;
+      box-shadow:
+        0 1px 0 color-mix(in srgb, white 4%, transparent) inset,
+        0 14px 36px color-mix(in srgb, black 10%, transparent);
+      overflow: hidden;
+      transition:
+        transform 180ms ease,
+        border-color 180ms ease,
+        box-shadow 180ms ease,
+        background-color 180ms ease;
+    }
+
+    .wire-metric-card[data-color="secondary"] {
+      --metric-accent: var(--wire-color-secondary);
+      --metric-accent-hover: var(--wire-color-secondary-hover);
+      --metric-accent-soft: var(--wire-color-secondary-soft);
+      --metric-accent-muted: var(--wire-color-secondary-muted);
+      --metric-contrast: var(--wire-color-secondary-contrast);
+    }
+
+    .wire-metric-card[data-color="info"] {
+      --metric-accent: var(--wire-color-info);
+      --metric-accent-hover: var(--wire-color-info-hover);
+      --metric-accent-soft: var(--wire-color-info-soft);
+      --metric-accent-muted: var(--wire-color-info-muted);
+      --metric-contrast: var(--wire-color-info-contrast);
+    }
+
+    .wire-metric-card[data-color="success"] {
+      --metric-accent: var(--wire-color-success);
+      --metric-accent-hover: var(--wire-color-success-hover);
+      --metric-accent-soft: var(--wire-color-success-soft);
+      --metric-accent-muted: var(--wire-color-success-muted);
+      --metric-contrast: var(--wire-color-success-contrast);
+    }
+
+    .wire-metric-card[data-color="warning"] {
+      --metric-accent: var(--wire-color-warning);
+      --metric-accent-hover: var(--wire-color-warning-hover);
+      --metric-accent-soft: var(--wire-color-warning-soft);
+      --metric-accent-muted: var(--wire-color-warning-muted);
+      --metric-contrast: var(--wire-color-warning-contrast);
+    }
+
+    .wire-metric-card[data-color="danger"] {
+      --metric-accent: var(--wire-color-danger);
+      --metric-accent-hover: var(--wire-color-danger-hover);
+      --metric-accent-soft: var(--wire-color-danger-soft);
+      --metric-accent-muted: var(--wire-color-danger-muted);
+      --metric-contrast: var(--wire-color-danger-contrast);
+    }
+
+    .wire-metric-card[data-size="sm"] {
+      padding: 1.1rem;
+      border-radius: 1rem;
+    }
+
+    .wire-metric-card[data-size="lg"] {
+      padding: 1.9rem;
+      border-radius: 1.5rem;
+    }
+
+    .wire-metric-card[data-variant="soft"] {
+      background:
+        linear-gradient(135deg, var(--metric-accent-soft), transparent 68%),
+        var(--wire-color-surface-raised);
+      box-shadow: none;
+    }
+
+    .wire-metric-card[data-variant="raised"] {
+      box-shadow:
+        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
+        0 24px 64px color-mix(in srgb, black 16%, transparent);
+    }
+
+    .wire-metric-card[data-variant="outline"] {
+      background: transparent;
+      box-shadow: none;
+    }
+
+    .wire-metric-card[data-variant="minimal"] {
+      padding-inline: 0;
+      background: transparent;
+      border-color: transparent;
+      border-radius: 0;
+      box-shadow: none;
+    }
+
+    .wire-metric-card[data-variant="solid"] {
+      color: var(--metric-contrast);
+      background:
+        linear-gradient(135deg, color-mix(in srgb, white 10%, transparent), transparent 58%),
+        var(--metric-accent);
+      border-color: color-mix(in srgb, white 22%, transparent);
+      box-shadow: 0 20px 52px color-mix(in srgb, var(--metric-accent) 28%, transparent);
+    }
+
+    .wire-metric-card[data-variant="gradient"] {
+      background:
+        linear-gradient(
+          145deg,
+          color-mix(in srgb, var(--metric-accent) 20%, var(--wire-color-surface-raised)),
+          var(--wire-color-surface-raised) 58%
+        );
+    }
+
+    .wire-metric-card[data-disabled="true"] {
+      cursor: not-allowed;
+      opacity: 0.58;
+      pointer-events: none;
+    }
+
+    .wire-metric-card[data-selectable="true"]:not([data-disabled="true"]) {
+      cursor: pointer;
+    }
+
+    .wire-metric-card[data-hover="lift"]:hover {
+      transform: translateY(-4px);
+      border-color: color-mix(in srgb, var(--metric-accent) 42%, var(--wire-color-border));
+      box-shadow: 0 24px 56px color-mix(in srgb, black 16%, transparent);
+    }
+
+    .wire-metric-card[data-hover="border"]:hover {
+      border-color: var(--metric-accent);
+    }
+
+    .wire-metric-card[data-hover="glow"]:hover {
+      border-color: color-mix(in srgb, var(--metric-accent) 52%, var(--wire-color-border));
+      box-shadow: 0 22px 58px color-mix(in srgb, var(--metric-accent) 18%, transparent);
+    }
+
+    .wire-metric-card[data-align="center"] {
+      align-items: center;
+      text-align: center;
+    }
+
+    .wire-metric-card[data-align="right"] {
+      align-items: flex-end;
+      text-align: right;
+    }
+
+    .wire-metric-card__top {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 1rem;
+      width: 100%;
+    }
+
+    .wire-metric-card__heading {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.55rem;
+      min-width: 0;
+    }
+
+    .wire-metric-card__label {
+      margin: 0;
+      color: var(--wire-color-text-muted);
+      font-size: 0.84rem;
+      font-weight: 600;
+      line-height: 1.4;
+    }
+
+    .wire-metric-card__badge {
+      display: inline-flex;
+      align-items: center;
+      min-height: 1.45rem;
+      padding: 0.2rem 0.55rem;
+      color: var(--metric-accent);
+      background: var(--metric-accent-soft);
+      border: 1px solid color-mix(in srgb, var(--metric-accent) 24%, transparent);
+      border-radius: 999px;
+      font-size: 0.69rem;
+      font-weight: 700;
+      line-height: 1;
+    }
+
+    .wire-metric-card[data-variant="solid"] .wire-metric-card__label,
+    .wire-metric-card[data-variant="solid"] .wire-metric-card__description,
+    .wire-metric-card[data-variant="solid"] .wire-metric-card__trend-label,
+    .wire-metric-card[data-variant="solid"] .wire-metric-card__progress-meta {
+      color: color-mix(in srgb, currentColor 78%, transparent);
+    }
+
+    .wire-metric-card[data-variant="solid"] .wire-metric-card__badge {
+      color: currentColor;
+      background: color-mix(in srgb, white 14%, transparent);
+      border-color: color-mix(in srgb, white 22%, transparent);
+    }
+
+    .wire-metric-card__icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: 0 0 auto;
+      width: 2.75rem;
+      height: 2.75rem;
+      color: var(--metric-accent);
+      background: var(--metric-accent-soft);
+      border: 1px solid color-mix(in srgb, var(--metric-accent) 18%, transparent);
+      border-radius: 0.9rem;
+      font-size: 1.25rem;
+    }
+
+    .wire-metric-card[data-icon-style="ghost"] .wire-metric-card__icon {
+      background: transparent;
+      border-color: transparent;
+    }
+
+    .wire-metric-card[data-icon-style="outline"] .wire-metric-card__icon {
+      background: transparent;
+      border-color: color-mix(in srgb, var(--metric-accent) 34%, var(--wire-color-border));
+    }
+
+    .wire-metric-card[data-icon-style="solid"] .wire-metric-card__icon,
+    .wire-metric-card[data-variant="solid"] .wire-metric-card__icon {
+      color: var(--metric-contrast);
+      background: var(--metric-accent);
+      border-color: transparent;
+    }
+
+    .wire-metric-card[data-variant="solid"] .wire-metric-card__icon {
+      color: currentColor;
+      background: color-mix(in srgb, white 14%, transparent);
+      border-color: color-mix(in srgb, white 20%, transparent);
+    }
+
+    .wire-metric-card__value-row {
+      display: flex;
+      align-items: baseline;
+      gap: 0.2rem;
+      width: 100%;
+      margin-top: 1.15rem;
+    }
+
+    .wire-metric-card[data-align="center"] .wire-metric-card__value-row {
+      justify-content: center;
+    }
+
+    .wire-metric-card[data-align="right"] .wire-metric-card__value-row {
+      justify-content: flex-end;
+    }
+
+    .wire-metric-card__value {
+      color: var(--wire-color-text);
+      font-size: clamp(2rem, 5vw, 2.8rem);
+      font-weight: 700;
+      line-height: 0.98;
+      letter-spacing: -0.045em;
+      white-space: nowrap;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .wire-metric-card[data-size="sm"] .wire-metric-card__value {
+      font-size: clamp(1.65rem, 4vw, 2.15rem);
+    }
+
+    .wire-metric-card[data-size="lg"] .wire-metric-card__value {
+      font-size: clamp(2.45rem, 6vw, 3.5rem);
+    }
+
+    .wire-metric-card[data-variant="solid"] .wire-metric-card__value {
+      color: currentColor;
+    }
+
+    .wire-metric-card__prefix,
+    .wire-metric-card__suffix {
+      color: var(--metric-accent);
+      font-size: 1rem;
+      font-weight: 700;
+    }
+
+    .wire-metric-card[data-variant="solid"] .wire-metric-card__prefix,
+    .wire-metric-card[data-variant="solid"] .wire-metric-card__suffix {
+      color: currentColor;
+    }
+
+    .wire-metric-card__description {
+      max-width: 38rem;
+      margin: 0.8rem 0 0;
+      color: var(--wire-color-text-muted);
+      font-size: 0.86rem;
+      line-height: 1.7;
+    }
+
+    .wire-metric-card__progress-block {
+      width: 100%;
+      margin-top: 1.25rem;
+    }
+
+    .wire-metric-card__progress-meta {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+      margin-bottom: 0.45rem;
+      color: var(--wire-color-text-muted);
+      font-size: 0.75rem;
+    }
+
+    .wire-metric-card__progress-track {
+      width: 100%;
+      height: 0.42rem;
+      overflow: hidden;
+      background: color-mix(in srgb, var(--wire-color-border) 72%, transparent);
+      border-radius: 999px;
+    }
+
+    .wire-metric-card__progress-value {
+      display: block;
+      width: clamp(0%, var(--wire-metric-progress), 100%);
+      height: 100%;
+      background: var(--metric-accent);
+      border-radius: inherit;
+    }
+
+    .wire-metric-card[data-variant="solid"] .wire-metric-card__progress-track {
+      background: color-mix(in srgb, white 20%, transparent);
+    }
+
+    .wire-metric-card[data-variant="solid"] .wire-metric-card__progress-value {
+      background: currentColor;
+    }
+
+    .wire-metric-card__trend {
+      display: inline-flex;
+      align-items: center;
+      align-self: flex-start;
+      gap: 0.42rem;
+      margin-top: 1.15rem;
+      color: var(--wire-color-text-muted);
+      font-size: 0.76rem;
+      line-height: 1.4;
+    }
+
+    .wire-metric-card[data-align="center"] .wire-metric-card__trend {
+      align-self: center;
+    }
+
+    .wire-metric-card[data-align="right"] .wire-metric-card__trend {
+      align-self: flex-end;
+    }
+
+    .wire-metric-card__trend[data-direction="up"],
+    .wire-metric-card__trend[data-direction="positive"] {
+      color: var(--wire-color-success);
+    }
+
+    .wire-metric-card__trend[data-direction="down"],
+    .wire-metric-card__trend[data-direction="negative"] {
+      color: var(--wire-color-danger);
+    }
+
+    .wire-metric-card__trend-icon {
+      width: 0.95rem;
+      height: 0.95rem;
+    }
+
+    .wire-metric-card__trend-label {
+      color: var(--wire-color-text-muted);
+      font-weight: 500;
+    }
+
+    .wire-metric-card__footer {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.8rem;
+      width: 100%;
+      margin-top: auto;
+      padding-top: 1.35rem;
+    }
+
+    .wire-metric-card__action {
+      appearance: none;
+      padding: 0;
+      background: transparent;
+      border: 0;
+      font: inherit;
+      cursor: pointer;
+      position: relative;
+      z-index: 1;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.45rem;
+      color: var(--metric-accent);
+      font-size: 0.82rem;
+      font-weight: 700;
+      line-height: 1.3;
+      text-decoration: none;
+      transition:
+        color 160ms ease,
+        gap 160ms ease;
+    }
+
+    .wire-metric-card__action:hover {
+      gap: 0.62rem;
+      color: var(--metric-accent-hover);
+    }
+
+    .wire-metric-card[data-variant="solid"] .wire-metric-card__action {
+      color: currentColor;
+    }
+
+    .wire-metric-card__action-icon {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    .wire-metric-card__action:focus-visible {
+      outline: 2px solid var(--wire-color-focus);
+      outline-offset: 4px;
+      border-radius: 0.35rem;
+    }
+
+    @media (max-width: 639px) {
+      .wire-metric-card {
+        padding: 1.2rem;
+      }
+
+      .wire-metric-card__value {
+        font-size: 2.05rem;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .wire-metric-card,
+      .wire-metric-card__action {
+        transition: none;
+      }
+
+      .wire-metric-card[data-hover="lift"]:hover {
+        transform: none;
+      }
+    }
+  }
 }
diff --git a/packages/ui/components/MetricGrid.wrn b/packages/ui/components/MetricGrid.wrn
index 5e353cff..b4f76775 100644
--- a/packages/ui/components/MetricGrid.wrn
+++ b/packages/ui/components/MetricGrid.wrn
@@ -1,5 +1,8 @@
 component MetricGrid {
   props {
+    @event select = function
+    @event action = function
+
     items = []
     columns = 4
     tabletColumns = 2
@@ -10,51 +13,217 @@ component MetricGrid {
     size = "default"
     color = "primary"
     variant = "default"
+    maxWidth = "full"
+    minItemWidth = ""
     class = ""
   }
 
+  functions {
+    function forwardSelect(item, itemIndex, sourceEvent) {
+      $emit("select", {
+        item: item,
+        itemIndex: itemIndex,
+        sourceEvent: sourceEvent
+      })
+    }
+
+    function forwardAction(item, itemIndex, sourceEvent) {
+      $emit("action", {
+        item: item,
+        itemIndex: itemIndex,
+        sourceEvent: sourceEvent
+      })
+    }
+  }
+
   view {
-    <div
+    <section
+      {...attrs}
       data-ui-component="MetricGrid"
-      class='grid w-full grid-cols-1 {class}'
-      class:grid-cols-2='mobileColumns === 2'
-      class:sm:grid-cols-2='tabletColumns === 2'
-      class:sm:grid-cols-3='tabletColumns === 3'
-      class:lg:grid-cols-2='columns === 2'
-      class:lg:grid-cols-3='columns === 3'
-      class:lg:grid-cols-4='columns === 4'
-      class:lg:grid-cols-5='columns === 5'
-      class:lg:grid-cols-6='columns === 6'
-      class:gap-3='gap === "sm"'
-      class:gap-5='gap === "md"'
-      class:gap-8='gap === "lg"'
-      class:divide-y='dividers'
-      class:sm:divide-y-0='dividers'
-      class:sm:divide-x='dividers'
-      class:divide-[var(--wire-color-border)]='dividers'
+      data-gap='{gap}'
+      data-equal-height='{equalHeight ? "true" : "false"}'
+      data-dividers='{dividers ? "true" : "false"}'
+      data-size='{size}'
+      data-color='{color}'
+      data-variant='{variant}'
+      data-max-width='{maxWidth}'
+      data-auto-fit='{minItemWidth ? "true" : "false"}'
+      class='wire-metric-grid {class}'
+      style='display:block;width:100%;min-width:0;--wire-metric-columns:{columns};--wire-metric-tablet-columns:{tabletColumns};--wire-metric-mobile-columns:{mobileColumns};--wire-metric-min-item-width:{minItemWidth || "18rem"};'
     >
-      {#each items as item}
-        <MetricCard
-          label='{item.label || item.title}'
-          value='{item.value}'
-          description='{item.description || ""}'
-          icon='{item.icon || ""}'
-          prefix='{item.prefix || ""}'
-          suffix='{item.suffix || ""}'
-          trend='{item.trend || ""}'
-          trendLabel='{item.trendLabel || ""}'
-          trendDirection='{item.trendDirection || "neutral"}'
-          href='{item.href || ""}'
-          actionLabel='{item.actionLabel || ""}'
-          size='{item.size || size}'
-          color='{item.color || color}'
-          variant='{dividers ? "minimal" : (item.variant || variant)}'
-          align='{item.align || "left"}'
-          class="h-full"
-        />
-      {:empty}
-        <slot></slot>
-      {/each}
-    </div>
+      <div class="wire-metric-grid__frame">
+        <div class="wire-metric-grid__surface">
+          {#each items as item, itemIndex}
+            <MetricCard
+              label='{item.label || item.title || "Metric"}'
+              value='{item.value}'
+              description='{item.description || ""}'
+              icon='{item.icon || ""}'
+              iconStyle='{item.iconStyle || "soft"}'
+              prefix='{item.prefix || ""}'
+              suffix='{item.suffix || ""}'
+              badge='{item.badge || ""}'
+              trend='{item.trend || ""}'
+              trendLabel='{item.trendLabel || ""}'
+              trendDirection='{item.trendDirection || "neutral"}'
+              progress='{item.progress === undefined ? -1 : item.progress}'
+              progressLabel='{item.progressLabel || ""}'
+              href='{item.href || ""}'
+              target='{item.target || ""}'
+              rel='{item.rel || ""}'
+              external='{item.external || false}'
+              actionLabel='{item.actionLabel || ""}'
+              actionIcon='{item.actionIcon || ""}'
+              showArrow='{item.showArrow === undefined ? true : item.showArrow}'
+              selectable='{item.selectable || false}'
+              disabled='{item.disabled || false}'
+              size='{item.size || size}'
+              color='{item.color || color}'
+              variant='{dividers ? "minimal" : (item.variant || variant)}'
+              hover='{item.hover || (dividers ? "none" : "lift")}'
+              align='{item.align || "left"}'
+              class="wire-metric-grid__card"
+              @select='forwardSelect(item, itemIndex, event)'
+              @action='forwardAction(item, itemIndex, event)'
+            />
+          {:empty}
+            <slot></slot>
+          {/each}
+        </div>
+      </div>
+    </section>
+  }
+
+  style {
+    .wire-metric-grid__frame {
+      width: 100%;
+      min-width: 0;
+      margin-inline: auto;
+    }
+
+    .wire-metric-grid[data-max-width="compact"] .wire-metric-grid__frame {
+      max-width: 64rem;
+    }
+
+    .wire-metric-grid[data-max-width="lg"] .wire-metric-grid__frame {
+      max-width: 72rem;
+    }
+
+    .wire-metric-grid[data-max-width="xl"] .wire-metric-grid__frame {
+      max-width: 80rem;
+    }
+
+    .wire-metric-grid[data-max-width="wide"] .wire-metric-grid__frame,
+    .wire-metric-grid[data-max-width="2xl"] .wire-metric-grid__frame {
+      max-width: 90rem;
+    }
+
+    .wire-metric-grid[data-max-width="full"] .wire-metric-grid__frame {
+      max-width: none;
+    }
+
+    .wire-metric-grid__surface {
+      display: grid;
+      grid-template-columns: repeat(var(--wire-metric-mobile-columns), minmax(0, 1fr));
+      gap: 1.25rem;
+      width: 100%;
+      min-width: 0;
+      align-items: stretch;
+    }
+
+    .wire-metric-grid[data-auto-fit="true"] .wire-metric-grid__surface {
+      grid-template-columns: repeat(
+        auto-fit,
+        minmax(min(100%, var(--wire-metric-min-item-width)), 1fr)
+      );
+    }
+
+    .wire-metric-grid[data-gap="none"] .wire-metric-grid__surface {
+      gap: 0;
+    }
+
+    .wire-metric-grid[data-gap="sm"] .wire-metric-grid__surface {
+      gap: 0.75rem;
+    }
+
+    .wire-metric-grid[data-gap="lg"] .wire-metric-grid__surface {
+      gap: 1.75rem;
+    }
+
+    .wire-metric-grid[data-gap="xl"] .wire-metric-grid__surface {
+      gap: 2.25rem;
+    }
+
+    .wire-metric-grid[data-equal-height="true"] .wire-metric-grid__surface > * {
+      min-width: 0;
+      height: 100%;
+    }
+
+    .wire-metric-grid[data-variant="panel"] .wire-metric-grid__surface,
+    .wire-metric-grid[data-variant="soft"] .wire-metric-grid__surface,
+    .wire-metric-grid[data-dividers="true"] .wire-metric-grid__surface {
+      overflow: hidden;
+      padding: 0.75rem;
+      background: var(--wire-color-surface-raised);
+      border: 1px solid var(--wire-color-border);
+      border-radius: 1.4rem;
+    }
+
+    .wire-metric-grid[data-variant="soft"] .wire-metric-grid__surface {
+      background:
+        linear-gradient(
+          135deg,
+          color-mix(in srgb, var(--wire-color-primary) 8%, transparent),
+          transparent 62%
+        ),
+        var(--wire-color-surface-raised);
+    }
+
+    .wire-metric-grid[data-dividers="true"] .wire-metric-grid__surface {
+      gap: 0;
+      padding: 0;
+    }
+
+    .wire-metric-grid[data-dividers="true"] .wire-metric-grid__card {
+      border-radius: 0;
+    }
+
+    @media (min-width: 640px) {
+      .wire-metric-grid[data-auto-fit="false"] .wire-metric-grid__surface {
+        grid-template-columns: repeat(var(--wire-metric-tablet-columns), minmax(0, 1fr));
+      }
+    }
+
+    @media (min-width: 1024px) {
+      .wire-metric-grid[data-auto-fit="false"] .wire-metric-grid__surface {
+        grid-template-columns: repeat(var(--wire-metric-columns), minmax(0, 1fr));
+      }
+    }
+
+    @media (max-width: 639px) {
+      .wire-metric-grid[data-dividers="true"] .wire-metric-grid__surface > * + * {
+        border-top: 1px solid var(--wire-color-border);
+      }
+    }
+
+    @media (min-width: 640px) and (max-width: 1023px) {
+      .wire-metric-grid[data-dividers="true"] .wire-metric-grid__surface > * {
+        border-top: 1px solid var(--wire-color-border);
+      }
+
+      .wire-metric-grid[data-dividers="true"] .wire-metric-grid__surface > *:nth-child(-n + 2) {
+        border-top: 0;
+      }
+
+      .wire-metric-grid[data-dividers="true"] .wire-metric-grid__surface > *:nth-child(2n) {
+        border-left: 1px solid var(--wire-color-border);
+      }
+    }
+
+    @media (min-width: 1024px) {
+      .wire-metric-grid[data-dividers="true"] .wire-metric-grid__surface > * + * {
+        border-left: 1px solid var(--wire-color-border);
+      }
+    }
   }
 }
diff --git a/packages/ui/components/Modal.wrn b/packages/ui/components/Modal.wrn
index 2366e70f..509fea64 100644
--- a/packages/ui/components/Modal.wrn
+++ b/packages/ui/components/Modal.wrn
@@ -4,20 +4,602 @@ component Modal {
     @event close = function
     @event cancel = function
     @event confirm = function
-    size = "default"
-    color = "primary"
+
+    isOpen = false
+    defaultOpen = false
     title = "Modal"
     description = ""
-    open = false
-    placement = "bottom"
-    closeLabel = "Close"
+    icon = ""
+    label = "Modal dialog"
+    size = "md"
+    placement = "center"
+    color = "primary"
+    variant = "default"
+    showClose = true
+    closeLabel = "Close modal"
+    closeOnBackdrop = true
+    closeOnEscape = true
+    closeOnCancel = true
+    closeOnConfirm = false
+    showFooter = true
+    cancelLabel = "Cancel"
+    cancelIcon = ""
+    confirmLabel = "Confirm"
+    confirmIcon = ""
+    confirmDisabled = false
+    confirmLoading = false
+    destructive = false
+    triggerLabel = ""
+    triggerIcon = ""
+    scrollable = true
     class = ""
   }
+
+  state visible = defaultOpen
+
+  functions {
+    function isOpen() {
+      return open || visible
+    }
+
+    function showModal(sourceEvent) {
+      visible = true
+      $emit("open", { sourceEvent: sourceEvent })
+    }
+
+    function hideModal(reason, sourceEvent) {
+      visible = false
+      $emit("close", {
+        reason: reason,
+        sourceEvent: sourceEvent
+      })
+    }
+
+    function cancelModal(sourceEvent) {
+      $emit("cancel", { sourceEvent: sourceEvent })
+      if (closeOnCancel) {
+        hideModal("cancel", sourceEvent)
+      }
+    }
+
+    function confirmModal(sourceEvent) {
+      if (confirmDisabled || confirmLoading) {
+        return
+      }
+      $emit("confirm", { sourceEvent: sourceEvent })
+      if (closeOnConfirm) {
+        hideModal("confirm", sourceEvent)
+      }
+    }
+
+    function handleKeydown(sourceEvent) {
+      if (closeOnEscape && sourceEvent.key === "Escape") {
+        sourceEvent.preventDefault()
+        cancelModal(sourceEvent)
+      }
+    }
+  }
+
   view {
-    <div data-show="{open}" class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--modal wire-next--placement-{placement} {class}" role="dialog" aria-modal="true" aria-label="{title}">
-      <header><strong>{title}</strong><button type="button" aria-label="{closeLabel}">×</button></header>
-      {#if description}<p>{description}</p>{/if}
-      <slot />
+    <div
+      {...attrs}
+      data-ui-component="Modal"
+      data-open='{open || visible ? "true" : "false"}'
+      data-size='{size}'
+      data-placement='{placement}'
+      data-color='{color}'
+      data-variant='{variant}'
+      data-scrollable='{scrollable ? "true" : "false"}'
+      data-destructive='{destructive ? "true" : "false"}'
+      class='wire-modal {class}'
+    >
+      {#if triggerLabel}
+        <button
+          type="button"
+          class="wire-modal__trigger"
+          aria-haspopup="dialog"
+          aria-expanded='{open || visible ? "true" : "false"}'
+          @click='showModal(event)'
+        >
+          {#if triggerIcon}
+            <span
+              class='{triggerIcon}'
+              aria-hidden="true"
+            >
+            </span>
+          {/if}
+          <span>{triggerLabel}</span>
+        </button>
+      {/if}
+
+      <span
+        class="wire-modal__trigger-slot"
+        @click='showModal(event)'
+      >
+        <slot
+          name="trigger"
+        >
+        </slot>
+      </span>
+
+      <div
+        class="wire-modal__layer"
+        data-show='{open || visible}'
+        role="presentation"
+        @keydown='handleKeydown(event)'
+      >
+        <button
+          type="button"
+          class="wire-modal__backdrop"
+          aria-label='{closeLabel}'
+          @click='if (closeOnBackdrop) { cancelModal(event) }'
+        >
+        </button>
+
+        <section
+          class="wire-modal__panel"
+          role="dialog"
+          aria-modal="true"
+          aria-label='{label || title}'
+          tabindex="-1"
+        >
+          <header
+            class="wire-modal__header"
+          >
+            <div
+              class="wire-modal__heading"
+            >
+              {#if icon}
+                <span
+                  class='wire-modal__icon {icon}'
+                  aria-hidden="true"
+                >
+                </span>
+              {/if}
+
+              <div
+                class="wire-modal__heading-copy"
+              >
+                <slot
+                  name="header"
+                >
+                </slot>
+                {#if title}
+                  <h2>{title}</h2>
+                {/if}
+                {#if description}
+                  <p>{description}</p>
+                {/if}
+              </div>
+            </div>
+
+            {#if showClose}
+              <button
+                type="button"
+                class="wire-modal__close"
+                aria-label='{closeLabel}'
+                @click='hideModal("close-button", event)'
+              >
+                <span
+                  class="icon-[lucide--x]"
+                  aria-hidden="true"
+                >
+                </span>
+              </button>
+            {/if}
+          </header>
+
+          <div
+            class="wire-modal__body"
+          >
+            <slot></slot>
+          </div>
+
+          {#if showFooter}
+            <footer
+              class="wire-modal__footer"
+            >
+              <div
+                class="wire-modal__custom-footer"
+              >
+                <slot
+                  name="footer"
+                >
+                </slot>
+              </div>
+
+              <div
+                class="wire-modal__actions"
+              >
+                {#if cancelLabel}
+                  <button
+                    type="button"
+                    class="wire-modal__button wire-modal__button--secondary"
+                    @click='cancelModal(event)'
+                  >
+                    {#if cancelIcon}
+                      <span
+                        class='{cancelIcon}'
+                        aria-hidden="true"
+                      >
+                      </span>
+                    {/if}
+                    <span>{cancelLabel}</span>
+                  </button>
+                {/if}
+
+                {#if confirmLabel}
+                  <button
+                    type="button"
+                    class="wire-modal__button wire-modal__button--primary"
+                    disabled='{confirmDisabled || confirmLoading}'
+                    @click='confirmModal(event)'
+                  >
+                    {#if confirmLoading}
+                      <span
+                        class="wire-modal__spinner"
+                        aria-hidden="true"
+                      >
+                      </span>
+                    {:else if confirmIcon}
+                      <span
+                        class='{confirmIcon}'
+                        aria-hidden="true"
+                      >
+                      </span>
+                    {/if}
+                    <span>{confirmLabel}</span>
+                  </button>
+                {/if}
+              </div>
+            </footer>
+          {/if}
+        </section>
+      </div>
     </div>
   }
+
+  style {
+    .wire-modal {
+      --modal-accent: var(--wire-color-primary);
+      --modal-soft: var(--wire-color-primary-soft);
+      --modal-contrast: var(--wire-color-primary-contrast);
+      position: relative;
+      display: inline-flex;
+    }
+
+    .wire-modal[data-color="secondary"] {
+      --modal-accent: var(--wire-color-secondary);
+      --modal-soft: var(--wire-color-secondary-soft);
+      --modal-contrast: var(--wire-color-secondary-contrast);
+    }
+
+    .wire-modal[data-color="info"] {
+      --modal-accent: var(--wire-color-info);
+      --modal-soft: var(--wire-color-info-soft);
+      --modal-contrast: var(--wire-color-info-contrast);
+    }
+
+    .wire-modal[data-color="success"] {
+      --modal-accent: var(--wire-color-success);
+      --modal-soft: var(--wire-color-success-soft);
+      --modal-contrast: var(--wire-color-success-contrast);
+    }
+
+    .wire-modal[data-color="warning"] {
+      --modal-accent: var(--wire-color-warning);
+      --modal-soft: var(--wire-color-warning-soft);
+      --modal-contrast: var(--wire-color-warning-text);
+    }
+
+    .wire-modal[data-color="danger"],
+    .wire-modal[data-destructive="true"] {
+      --modal-accent: var(--wire-color-danger);
+      --modal-soft: var(--wire-color-danger-soft);
+      --modal-contrast: var(--wire-color-on-danger);
+    }
+
+    .wire-modal__trigger,
+    .wire-modal__trigger-slot {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.55rem;
+    }
+
+    .wire-modal__trigger {
+      appearance: none;
+      min-height: 2.55rem;
+      padding: 0.65rem 1rem;
+      color: var(--modal-contrast);
+      background: var(--modal-accent);
+      border: 0;
+      border-radius: 0.8rem;
+      font: inherit;
+      font-size: 0.85rem;
+      font-weight: 650;
+      cursor: pointer;
+    }
+
+    .wire-modal__layer {
+      position: fixed;
+      inset: 0;
+      z-index: 1250;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 1rem;
+    }
+
+    .wire-modal[data-placement="top"] .wire-modal__layer {
+      align-items: flex-start;
+      padding-top: clamp(1rem, 8vh, 5rem);
+    }
+
+    .wire-modal__backdrop {
+      position: absolute;
+      inset: 0;
+      z-index: 0;
+      appearance: none;
+      padding: 0;
+      background: color-mix(in srgb, black 62%, transparent);
+      border: 0;
+      backdrop-filter: blur(9px);
+    }
+
+    .wire-modal__panel {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      flex-direction: column;
+      width: min(32rem, calc(100vw - 2rem));
+      max-height: min(88vh, 52rem);
+      color: var(--wire-color-text);
+      background:
+      radial-gradient(
+      circle at 100% 0%,
+      color-mix(in srgb, var(--modal-accent) 9%, transparent),
+      transparent 34%
+      ),
+      var(--wire-color-surface-raised);
+      border: 1px solid color-mix(in srgb, var(--modal-accent) 18%, var(--wire-color-border));
+      border-radius: 1.35rem;
+      box-shadow:
+      0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
+      0 40px 110px color-mix(in srgb, black 38%, transparent);
+      overflow: hidden;
+    }
+
+    .wire-modal[data-size="sm"] .wire-modal__panel {
+      width: min(25rem, calc(100vw - 2rem));
+    }
+
+    .wire-modal[data-size="lg"] .wire-modal__panel {
+      width: min(44rem, calc(100vw - 2rem));
+    }
+
+    .wire-modal[data-size="xl"] .wire-modal__panel {
+      width: min(64rem, calc(100vw - 2rem));
+    }
+
+    .wire-modal[data-size="full"] .wire-modal__panel {
+      width: calc(100vw - 2rem);
+      height: calc(100vh - 2rem);
+      max-height: none;
+    }
+
+    .wire-modal[data-variant="soft"] .wire-modal__panel {
+      background:
+      linear-gradient(145deg, var(--modal-soft), transparent 68%),
+      var(--wire-color-surface-raised);
+    }
+
+    .wire-modal[data-variant="outline"] .wire-modal__panel {
+      background: var(--wire-color-surface-raised);
+      box-shadow: 0 24px 72px color-mix(in srgb, black 24%, transparent);
+    }
+
+    .wire-modal[data-variant="solid"] .wire-modal__panel {
+      color: var(--modal-contrast);
+      background: var(--modal-accent);
+      border-color: color-mix(in srgb, white 20%, transparent);
+    }
+
+    .wire-modal__header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 1rem;
+      padding: 1.4rem 1.4rem 1.15rem;
+      border-bottom: 1px solid var(--wire-color-border);
+    }
+
+    .wire-modal__heading {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.9rem;
+      min-width: 0;
+    }
+
+    .wire-modal__icon {
+      flex: 0 0 auto;
+      width: 1.3rem;
+      height: 1.3rem;
+      margin-top: 0.15rem;
+      color: var(--modal-accent);
+    }
+
+    .wire-modal[data-variant="solid"] .wire-modal__icon {
+      color: currentColor;
+    }
+
+    .wire-modal__heading-copy {
+      display: grid;
+      gap: 0.3rem;
+      min-width: 0;
+    }
+
+    .wire-modal__heading-copy h2,
+    .wire-modal__heading-copy p {
+      margin: 0;
+    }
+
+    .wire-modal__heading-copy h2 {
+      font-size: 1.08rem;
+      font-weight: 650;
+      line-height: 1.3;
+    }
+
+    .wire-modal__heading-copy p {
+      color: var(--wire-color-text-muted);
+      font-size: 0.8rem;
+      line-height: 1.55;
+    }
+
+    .wire-modal[data-variant="solid"] .wire-modal__heading-copy p {
+      color: color-mix(in srgb, currentColor 76%, transparent);
+    }
+
+    .wire-modal__close {
+      appearance: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: 0 0 auto;
+      width: 2.35rem;
+      height: 2.35rem;
+      color: var(--wire-color-text-muted);
+      background: var(--wire-color-surface-soft);
+      border: 1px solid var(--wire-color-border);
+      border-radius: 0.75rem;
+      cursor: pointer;
+    }
+
+    .wire-modal__close:hover,
+    .wire-modal__close:focus-visible {
+      color: var(--modal-accent);
+      border-color: color-mix(in srgb, var(--modal-accent) 34%, var(--wire-color-border));
+      outline: none;
+    }
+
+    .wire-modal__body {
+      flex: 1 1 auto;
+      min-height: 0;
+      padding: 1.4rem;
+    }
+
+    .wire-modal[data-scrollable="true"] .wire-modal__body {
+      overflow: auto;
+      overscroll-behavior: contain;
+    }
+
+    .wire-modal__footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+      padding: 1rem 1.4rem 1.4rem;
+      border-top: 1px solid var(--wire-color-border);
+    }
+
+    .wire-modal__custom-footer:empty {
+      display: none;
+    }
+
+    .wire-modal__actions {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 0.65rem;
+      margin-left: auto;
+    }
+
+    .wire-modal__button {
+      appearance: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+      min-height: 2.55rem;
+      padding: 0.65rem 1rem;
+      border-radius: 0.78rem;
+      font: inherit;
+      font-size: 0.83rem;
+      font-weight: 650;
+      cursor: pointer;
+      transition: transform 150ms ease, opacity 150ms ease, border-color 150ms ease;
+    }
+
+    .wire-modal__button:active {
+      transform: scale(0.985);
+    }
+
+    .wire-modal__button--secondary {
+      color: var(--wire-color-text);
+      background: transparent;
+      border: 1px solid var(--wire-color-border);
+    }
+
+    .wire-modal__button--primary {
+      color: var(--modal-contrast);
+      background: var(--modal-accent);
+      border: 1px solid transparent;
+    }
+
+    .wire-modal__button:disabled {
+      opacity: 0.55;
+      cursor: not-allowed;
+    }
+
+    .wire-modal__spinner {
+      width: 0.95rem;
+      height: 0.95rem;
+      border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
+      border-top-color: currentColor;
+      border-radius: 50%;
+      animation: wire-modal-spin 750ms linear infinite;
+    }
+
+    @keyframes wire-modal-spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    @media (max-width: 639px) {
+      .wire-modal__layer {
+        align-items: flex-end;
+        padding: 0;
+      }
+
+      .wire-modal__panel,
+      .wire-modal[data-size="sm"] .wire-modal__panel,
+      .wire-modal[data-size="lg"] .wire-modal__panel,
+      .wire-modal[data-size="xl"] .wire-modal__panel {
+        width: 100%;
+        max-height: 92vh;
+        border-radius: 1.25rem 1.25rem 0 0;
+      }
+
+      .wire-modal__footer {
+        align-items: stretch;
+        flex-direction: column;
+      }
+
+      .wire-modal__actions {
+        width: 100%;
+      }
+
+      .wire-modal__button {
+        flex: 1 1 0;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .wire-modal__button,
+      .wire-modal__spinner {
+        animation: none;
+        transition: none;
+      }
+    }
+  }
 }
diff --git a/packages/ui/components/PageHeader.wrn b/packages/ui/components/PageHeader.wrn
index 42132045..e6c95904 100644
--- a/packages/ui/components/PageHeader.wrn
+++ b/packages/ui/components/PageHeader.wrn
@@ -4,11 +4,17 @@ component PageHeader {
     title = ""
     description = ""
     icon = ""
+    id = "page-title"
     align = "left"
-    size = "default"
+    centered = false
     compact = false
+    size = "default"
+    maxWidth = "xl"
     showBreadcrumbs = false
     breadcrumbs = []
+    breadcrumbParent = ""
+    breadcrumbParentHref = ""
+    breadcrumbCurrent = ""
     primaryLabel = ""
     primaryHref = ""
     primaryIcon = ""
@@ -17,89 +23,665 @@ component PageHeader {
     secondaryIcon = ""
     color = "primary"
     variant = "default"
+    borderBottom = true
     class = ""
   }
 
   view {
-    <div
+    <section
       {...attrs}
       data-ui-component="PageHeader"
       data-size='{size}'
+      data-align='{centered ? "center" : align}'
       data-color='{color}'
-      class='{class}'
+      data-variant='{variant}'
+      data-compact='{compact ? "true" : "false"}'
+      data-max-width='{maxWidth}'
+      data-border-bottom='{borderBottom ? "true" : "false"}'
+      aria-labelledby='{id}'
+      class='wire-page-header {class}'
     >
-      <Section
-        spacing='{compact || size === "compact" ? "md" : "lg"}'
-        variant='{variant}'
-        color='{color}'
-        borderBottom="true"
+      <div
+        class="wire-page-header__decoration"
+        aria-hidden="true"
+      >
+        <span
+          class="wire-page-header__glow wire-page-header__glow--one"
+        >
+        </span>
+        <span
+          class="wire-page-header__glow wire-page-header__glow--two"
+        >
+        </span>
+        <span
+          class="wire-page-header__grid-pattern"
+        >
+        </span>
+      </div>
+
+      <div
+        class="wire-page-header__inner"
       >
         {#if showBreadcrumbs && breadcrumbs.length > 0}
-          <Breadcrumb
-            label="Breadcrumb"
-            items='{breadcrumbs}'
-            active='{breadcrumbs[breadcrumbs.length - 1]?.value || breadcrumbs[breadcrumbs.length - 1]?.label || ""}'
-            color='{color}'
-            class="mb-6"
-          />
+          <div
+            class="wire-page-header__breadcrumb"
+          >
+            <Breadcrumb
+              label="Breadcrumb"
+              items='{breadcrumbs}'
+              active='{breadcrumbs[breadcrumbs.length - 1]?.value || breadcrumbs[breadcrumbs.length - 1]?.label || breadcrumbs[breadcrumbs.length - 1]?.title || ""}'
+              color='{color}'
+              size='{compact ? "sm" : "default"}'
+              variant='{variant === "solid" ? "contrast" : "minimal"}'
+            />
+          </div>
+        {:else if showBreadcrumbs && breadcrumbParent}
+          <div
+            class="wire-page-header__breadcrumb"
+          >
+            <Breadcrumb
+              label="Breadcrumb"
+              items='{[
+{
+label: breadcrumbParent,
+href: breadcrumbParentHref,
+value: breadcrumbParent
+},
+{
+label: breadcrumbCurrent || title,
+value: breadcrumbCurrent || title,
+current: true
+}
+]}'
+              active='{breadcrumbCurrent || title}'
+              color='{color}'
+              size='{compact ? "sm" : "default"}'
+              variant='{variant === "solid" ? "contrast" : "minimal"}'
+            />
+          </div>
+        {:else if showBreadcrumbs && (breadcrumbCurrent || title)}
+          <div
+            class="wire-page-header__breadcrumb"
+          >
+            <Breadcrumb
+              label="Breadcrumb"
+              items='{[
+{
+label: breadcrumbCurrent || title,
+value: breadcrumbCurrent || title,
+current: true
+}
+]}'
+              active='{breadcrumbCurrent || title}'
+              color='{color}'
+              size='{compact ? "sm" : "default"}'
+              variant='{variant === "solid" ? "contrast" : "minimal"}'
+            />
+          </div>
         {/if}
 
         <div
-          class="flex flex-col gap-6"
-          class:items-center='align === "center"'
-          class:text-center='align === "center"'
-          class:lg:flex-row='align !== "center"'
-          class:lg:items-end='align !== "center"'
-          class:lg:justify-between='align !== "center"'
+          class="wire-page-header__layout"
         >
-          <div class="max-w-4xl">
-            {#if icon}
-              <span class="mb-5 inline-flex size-12 items-center justify-center rounded-2xl bg-[var(--wire-color-primary-soft)] text-[var(--wire-color-primary)]">
-                <span class='{icon + " size-6"}' aria-hidden="true"></span>
-              </span>
-            {/if}
-
-            <SectionHeader
-              eyebrow='{eyebrow}'
-              title='{title}'
-              description='{description}'
-              align='{align === "center" ? "center" : "left"}'
-              size='{compact || size === "compact" ? "sm" : "lg"}'
-              color='{color}'
-              headingLevel="1"
-              maxWidth="4xl"
+          <div
+            class="wire-page-header__content"
+          >
+            <div
+              class="wire-page-header__intro"
             >
-              <slot name="meta"></slot>
-            </SectionHeader>
+              {#if icon}
+                <span
+                  class="wire-page-header__icon-wrap"
+                >
+                  {#if icon === "sparkles"}
+                    <span
+                      class="icon-[lucide--sparkles] wire-page-header__icon"
+                      aria-hidden="true"
+                    >
+                    </span>
+                  {:else if icon === "component"}
+                    <span
+                      class="icon-[lucide--component] wire-page-header__icon"
+                      aria-hidden="true"
+                    >
+                    </span>
+                  {:else}
+                    <span
+                      class='{icon} wire-page-header__icon'
+                      aria-hidden="true"
+                    >
+                    </span>
+                  {/if}
+                </span>
+              {/if}
+
+              <div
+                class="wire-page-header__copy"
+              >
+                {#if eyebrow}
+                  <div
+                    class="wire-page-header__eyebrow-row"
+                  >
+                    <span
+                      class="wire-page-header__eyebrow-mark"
+                      aria-hidden="true"
+                    >
+                    </span>
+                    <p
+                      class="wire-page-header__eyebrow"
+                    >
+                      {eyebrow}
+                    </p>
+                  </div>
+                {/if}
+
+                {#if title}
+                  <h1
+                    id='{id}'
+                    class="wire-page-header__title"
+                  >
+                    {title}
+                  </h1>
+                {/if}
+
+                {#if description}
+                  <p
+                    class="wire-page-header__description"
+                  >
+                    {description}
+                  </p>
+                {/if}
+
+                <div
+                  class="wire-page-header__meta"
+                >
+                  <slot
+                    name="meta"
+                  >
+                  </slot>
+                </div>
+              </div>
+            </div>
           </div>
 
-          <div class="flex flex-wrap items-center gap-3" class:justify-center='align === "center"'>
-            {#if secondaryLabel}
-              <Button
-                label='{secondaryLabel}'
-                href='{secondaryHref}'
-                icon='{secondaryIcon}'
-                variant="outline"
-                color='{color}'
-              />
-            {/if}
+          {#if primaryLabel || secondaryLabel}
+            <div
+              class="wire-page-header__actions"
+            >
+              {#if secondaryLabel}
+                <Button
+                  label='{secondaryLabel}'
+                  href='{secondaryHref || "#"}'
+                  icon='{secondaryIcon}'
+                  size='{compact ? "sm" : "default"}'
+                  variant="outline"
+                  color='{color}'
+                  class="wire-page-header__action wire-page-header__action--secondary"
+                />
+              {/if}
 
-            {#if primaryLabel}
-              <Button
-                label='{primaryLabel}'
-                href='{primaryHref}'
-                icon='{primaryIcon}'
-                variant="default"
-                color='{color}'
-              />
-            {/if}
+              {#if primaryLabel}
+                <Button
+                  label='{primaryLabel}'
+                  href='{primaryHref || "#"}'
+                  icon='{primaryIcon}'
+                  size='{compact ? "sm" : "default"}'
+                  variant="default"
+                  color='{color}'
+                  class="wire-page-header__action wire-page-header__action--primary"
+                />
+              {/if}
 
-            <slot name="actions"></slot>
-          </div>
+              <slot
+                name="actions"
+              >
+              </slot>
+            </div>
+          {:else}
+            <div
+              class="wire-page-header__actions wire-page-header__actions--slot-only"
+            >
+              <slot
+                name="actions"
+              >
+              </slot>
+            </div>
+          {/if}
         </div>
 
-        <slot></slot>
-      </Section>
-    </div>
+        <div
+          class="wire-page-header__body"
+        >
+          <slot></slot>
+        </div>
+      </div>
+    </section>
+  }
+
+  style {
+    .wire-page-header {
+      --page-header-accent: var(--wire-color-primary);
+      --page-header-soft: var(--wire-color-primary-soft);
+      --page-header-muted: var(--wire-color-primary-muted);
+      --page-header-accent-text: var(--wire-color-primary-text);
+
+      position: relative;
+      isolation: isolate;
+      width: 100%;
+      overflow: hidden;
+      color: var(--wire-color-text);
+      background: var(--wire-color-background);
+    }
+
+    .wire-page-header[data-color="secondary"] {
+      --page-header-accent: var(--wire-color-secondary);
+      --page-header-soft: var(--wire-color-secondary-soft);
+      --page-header-muted: var(--wire-color-secondary-muted);
+      --page-header-accent-text: var(--wire-color-secondary-text);
+    }
+
+    .wire-page-header[data-color="info"] {
+      --page-header-accent: var(--wire-color-info);
+      --page-header-soft: var(--wire-color-info-soft);
+      --page-header-muted: var(--wire-color-info-muted);
+      --page-header-accent-text: var(--wire-color-info-text);
+    }
+
+    .wire-page-header[data-color="success"] {
+      --page-header-accent: var(--wire-color-success);
+      --page-header-soft: var(--wire-color-success-soft);
+      --page-header-muted: var(--wire-color-success-muted);
+      --page-header-accent-text: var(--wire-color-success-text);
+    }
+
+    .wire-page-header[data-color="warning"] {
+      --page-header-accent: var(--wire-color-warning);
+      --page-header-soft: var(--wire-color-warning-soft);
+      --page-header-muted: var(--wire-color-warning-muted);
+      --page-header-accent-text: var(--wire-color-warning-text);
+    }
+
+    .wire-page-header[data-color="danger"] {
+      --page-header-accent: var(--wire-color-danger);
+      --page-header-soft: var(--wire-color-danger-soft);
+      --page-header-muted: var(--wire-color-danger-muted);
+      --page-header-accent-text: var(--wire-color-danger-text);
+    }
+
+    .wire-page-header[data-variant="soft"] {
+      background: var(--wire-color-surface);
+    }
+
+    .wire-page-header[data-variant="raised"] {
+      background: var(--wire-color-surface-raised);
+      box-shadow: var(--wire-shadow-sm);
+    }
+
+    .wire-page-header[data-variant="tinted"] {
+      background:
+      linear-gradient(135deg, var(--page-header-soft), transparent 72%),
+      var(--wire-color-background);
+    }
+
+    .wire-page-header[data-variant="solid"] {
+      color: #ffffff;
+      background: var(--page-header-accent);
+    }
+
+    .wire-page-header[data-variant="minimal"] {
+      background: transparent;
+    }
+
+    .wire-page-header[data-border-bottom="true"] {
+      border-bottom: 1px solid var(--wire-color-border);
+    }
+
+    .wire-page-header[data-variant="solid"][data-border-bottom="true"] {
+      border-bottom-color: rgba(255, 255, 255, 0.18);
+    }
+
+    .wire-page-header__decoration {
+      position: absolute;
+      inset: 0;
+      z-index: -1;
+      overflow: hidden;
+      pointer-events: none;
+    }
+
+    .wire-page-header__glow {
+      position: absolute;
+      display: block;
+      border-radius: 999px;
+      filter: blur(60px);
+      opacity: 0.17;
+    }
+
+    .wire-page-header__glow--one {
+      top: -9rem;
+      right: -5rem;
+      width: 24rem;
+      height: 24rem;
+      background: var(--page-header-accent);
+    }
+
+    .wire-page-header__glow--two {
+      bottom: -10rem;
+      left: 18%;
+      width: 18rem;
+      height: 18rem;
+      background: var(--page-header-muted);
+      opacity: 0.13;
+    }
+
+    .wire-page-header__grid-pattern {
+      position: absolute;
+      inset: 0;
+      opacity: 0.2;
+      background-image:
+      linear-gradient(to right, var(--wire-color-border) 1px, transparent 1px),
+      linear-gradient(to bottom, var(--wire-color-border) 1px, transparent 1px);
+      background-size: 32px 32px;
+      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent 78%);
+    }
+
+    .wire-page-header[data-variant="minimal"] .wire-page-header__decoration,
+    .wire-page-header[data-compact="true"] .wire-page-header__grid-pattern {
+      display: none;
+    }
+
+    .wire-page-header[data-variant="solid"] .wire-page-header__grid-pattern {
+      opacity: 0.1;
+      background-image:
+      linear-gradient(to right, rgba(255, 255, 255, 0.28) 1px, transparent 1px),
+      linear-gradient(to bottom, rgba(255, 255, 255, 0.28) 1px, transparent 1px);
+    }
+
+    .wire-page-header__inner {
+      position: relative;
+      width: 100%;
+      max-width: 80rem;
+      margin-inline: auto;
+      padding: 1.25rem 1rem 2.75rem;
+    }
+
+    .wire-page-header[data-max-width="compact"] .wire-page-header__inner,
+    .wire-page-header[data-max-width="lg"] .wire-page-header__inner {
+      max-width: 64rem;
+    }
+
+    .wire-page-header[data-max-width="wide"] .wire-page-header__inner,
+    .wire-page-header[data-max-width="2xl"] .wire-page-header__inner {
+      max-width: 90rem;
+    }
+
+    .wire-page-header[data-max-width="full"] .wire-page-header__inner {
+      max-width: none;
+    }
+
+    .wire-page-header[data-compact="true"] .wire-page-header__inner {
+      padding-top: 1rem;
+      padding-bottom: 1.75rem;
+    }
+
+    .wire-page-header[data-size="lg"] .wire-page-header__inner {
+      padding-bottom: 3.5rem;
+    }
+
+    .wire-page-header__breadcrumb {
+      display: flex;
+      align-items: center;
+      min-width: 0;
+      margin-bottom: 1.75rem;
+      padding-bottom: 0.9rem;
+      border-bottom: 1px solid var(--wire-color-border);
+    }
+
+    .wire-page-header[data-variant="solid"] .wire-page-header__breadcrumb {
+      border-bottom-color: rgba(255, 255, 255, 0.18);
+    }
+
+    .wire-page-header[data-compact="true"] .wire-page-header__breadcrumb {
+      margin-bottom: 1.25rem;
+      padding-bottom: 0.7rem;
+    }
+
+    .wire-page-header__layout {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      gap: 1.75rem;
+      align-items: start;
+    }
+
+    .wire-page-header__content,
+    .wire-page-header__copy {
+      min-width: 0;
+    }
+
+    .wire-page-header__intro {
+      display: flex;
+      align-items: flex-start;
+      gap: 1rem;
+      min-width: 0;
+    }
+
+    .wire-page-header__icon-wrap {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: 0 0 auto;
+      width: 3.25rem;
+      height: 3.25rem;
+      margin-top: 0.15rem;
+      color: var(--page-header-accent);
+      background: var(--page-header-soft);
+      border: 1px solid var(--page-header-muted);
+      border-radius: 1rem;
+      box-shadow: var(--wire-shadow-sm);
+    }
+
+    .wire-page-header[data-compact="true"] .wire-page-header__icon-wrap {
+      width: 2.75rem;
+      height: 2.75rem;
+      border-radius: 0.8rem;
+    }
+
+    .wire-page-header[data-variant="solid"] .wire-page-header__icon-wrap {
+      color: #ffffff;
+      background: rgba(255, 255, 255, 0.12);
+      border-color: rgba(255, 255, 255, 0.22);
+    }
+
+    .wire-page-header__icon {
+      width: 1.35rem;
+      height: 1.35rem;
+    }
+
+    .wire-page-header__eyebrow-row {
+      display: flex;
+      align-items: center;
+      gap: 0.65rem;
+      margin-bottom: 0.65rem;
+    }
+
+    .wire-page-header__eyebrow-mark {
+      width: 1.75rem;
+      height: 2px;
+      flex: 0 0 auto;
+      background: var(--page-header-accent);
+      border-radius: 999px;
+    }
+
+    .wire-page-header__eyebrow {
+      margin: 0;
+      color: var(--page-header-accent-text);
+      font-size: 0.72rem;
+      font-weight: 800;
+      line-height: 1.3;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .wire-page-header[data-variant="solid"] .wire-page-header__eyebrow,
+    .wire-page-header[data-variant="solid"] .wire-page-header__title,
+    .wire-page-header[data-variant="solid"] .wire-page-header__description {
+      color: #ffffff;
+    }
+
+    .wire-page-header[data-variant="solid"] .wire-page-header__eyebrow-mark {
+      background: rgba(255, 255, 255, 0.8);
+    }
+
+    .wire-page-header__title {
+      max-width: 54rem;
+      margin: 0;
+      color: var(--wire-color-text);
+      font-size: clamp(2rem, 4vw, 3.75rem);
+      font-weight: 800;
+      line-height: 1.08;
+      letter-spacing: -0.035em;
+      text-wrap: balance;
+    }
+
+    .wire-page-header[data-compact="true"] .wire-page-header__title {
+      font-size: clamp(1.75rem, 3vw, 2.65rem);
+    }
+
+    .wire-page-header[data-size="lg"] .wire-page-header__title {
+      font-size: clamp(2.35rem, 5vw, 4.5rem);
+    }
+
+    .wire-page-header__description {
+      max-width: 48rem;
+      margin: 0.9rem 0 0;
+      color: var(--wire-color-text-muted);
+      font-size: 1rem;
+      line-height: 1.75;
+      text-wrap: pretty;
+    }
+
+    .wire-page-header[data-size="lg"] .wire-page-header__description {
+      font-size: 1.075rem;
+    }
+
+    .wire-page-header[data-variant="solid"] .wire-page-header__description {
+      opacity: 0.82;
+    }
+
+    .wire-page-header__meta:empty,
+    .wire-page-header__body:empty,
+    .wire-page-header__actions--slot-only:empty {
+      display: none;
+    }
+
+    .wire-page-header__meta {
+      margin-top: 1.1rem;
+    }
+
+    .wire-page-header__actions {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.75rem;
+      min-width: 0;
+    }
+
+    .wire-page-header__body {
+      margin-top: 1.75rem;
+    }
+
+    .wire-page-header[data-align="center"] .wire-page-header__layout {
+      justify-items: center;
+      text-align: center;
+    }
+
+    .wire-page-header[data-align="center"] .wire-page-header__intro {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .wire-page-header[data-align="center"] .wire-page-header__eyebrow-row,
+    .wire-page-header[data-align="center"] .wire-page-header__actions {
+      justify-content: center;
+    }
+
+    .wire-page-header[data-align="center"] .wire-page-header__title,
+    .wire-page-header[data-align="center"] .wire-page-header__description {
+      margin-inline: auto;
+    }
+
+    .wire-page-header[data-align="right"] .wire-page-header__layout {
+      justify-items: end;
+      text-align: right;
+    }
+
+    .wire-page-header[data-align="right"] .wire-page-header__intro {
+      flex-direction: row-reverse;
+    }
+
+    .wire-page-header[data-align="right"] .wire-page-header__eyebrow-row,
+    .wire-page-header[data-align="right"] .wire-page-header__actions {
+      justify-content: flex-end;
+    }
+
+    .wire-page-header[data-align="right"] .wire-page-header__title,
+    .wire-page-header[data-align="right"] .wire-page-header__description {
+      margin-left: auto;
+    }
+
+    @media (min-width: 640px) {
+      .wire-page-header__inner {
+        padding-inline: 1.5rem;
+      }
+
+      .wire-page-header__intro {
+        gap: 1.25rem;
+      }
+    }
+
+    @media (min-width: 1024px) {
+      .wire-page-header__inner {
+        padding-inline: 2rem;
+      }
+
+      .wire-page-header__layout {
+        grid-template-columns: minmax(0, 1fr) auto;
+        align-items: start;
+        gap: 2.5rem;
+      }
+
+      .wire-page-header[data-align="center"] .wire-page-header__layout,
+      .wire-page-header[data-align="right"] .wire-page-header__layout {
+        grid-template-columns: minmax(0, 1fr);
+      }
+
+      .wire-page-header__actions {
+        align-self: start;
+        justify-self: end;
+        justify-content: flex-end;
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+    }
+
+    @media (max-width: 639px) {
+      .wire-page-header__intro {
+        flex-direction: column;
+      }
+
+      .wire-page-header__actions {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+      }
+
+      .wire-page-header__action {
+        width: 100%;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .wire-page-header__glow {
+        filter: blur(52px);
+      }
+    }
   }
 }
diff --git a/packages/ui/components/Popover.wrn b/packages/ui/components/Popover.wrn
index 2b196a00..1484726d 100644
--- a/packages/ui/components/Popover.wrn
+++ b/packages/ui/components/Popover.wrn
@@ -1,21 +1,533 @@
 component Popover {
   props {
+    @event toggle = function
     @event open = function
     @event close = function
+    @event action = function
+
+    open = false
+    defaultOpen = false
+    triggerLabel = "Open popover"
+    triggerIcon = ""
+    title = ""
+    description = ""
+    icon = ""
+    placement = "bottom-start"
+    width = "md"
     size = "default"
     color = "primary"
-    title = "Popover"
-    description = ""
-    open = false
-    placement = "bottom"
-    closeLabel = "Close"
+    variant = "raised"
+    showArrow = true
+    showClose = false
+    closeLabel = "Close popover"
+    closeOnOutside = true
+    closeOnEscape = true
+    actionLabel = ""
+    actionHref = ""
+    actionIcon = ""
+    closeOnAction = true
+    disabled = false
     class = ""
   }
+
+  state visible = defaultOpen
+
+  functions {
+    function isOpen() {
+      return open || visible
+    }
+
+    function showPopover(sourceEvent) {
+      if (disabled) {
+        return
+      }
+      visible = true
+      $emit("open", { sourceEvent: sourceEvent })
+      $emit("toggle", { open: true, sourceEvent: sourceEvent })
+    }
+
+    function hidePopover(reason, sourceEvent) {
+      visible = false
+      $emit("close", { reason: reason, sourceEvent: sourceEvent })
+      $emit("toggle", { open: false, reason: reason, sourceEvent: sourceEvent })
+    }
+
+    function togglePopover(sourceEvent) {
+      if (isOpen()) {
+        hidePopover("toggle", sourceEvent)
+      } else {
+        showPopover(sourceEvent)
+      }
+    }
+
+    function activateAction(sourceEvent) {
+      $emit("action", {
+        href: actionHref,
+        sourceEvent: sourceEvent
+      })
+      if (closeOnAction) {
+        hidePopover("action", sourceEvent)
+      }
+    }
+
+    function handleKeydown(sourceEvent) {
+      if (closeOnEscape && sourceEvent.key === "Escape") {
+        sourceEvent.preventDefault()
+        hidePopover("escape", sourceEvent)
+      }
+    }
+  }
+
   view {
-    <div data-show="{open}" class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--popover wire-next--placement-{placement} {class}" role="region" aria-modal="false" aria-label="{title}">
-      <header><strong>{title}</strong><button type="button" aria-label="{closeLabel}">×</button></header>
-      {#if description}<p>{description}</p>{/if}
-      <slot />
+    <div
+      {...attrs}
+      data-ui-component="Popover"
+      data-open='{open || visible ? "true" : "false"}'
+      data-placement='{placement}'
+      data-width='{width}'
+      data-size='{size}'
+      data-color='{color}'
+      data-variant='{variant}'
+      class='wire-popover {class}'
+      @keydown='handleKeydown(event)'
+    >
+      <button
+        type="button"
+        class="wire-popover__trigger"
+        disabled='{disabled}'
+        aria-haspopup="dialog"
+        aria-expanded='{open || visible ? "true" : "false"}'
+        @click='togglePopover(event)'
+      >
+        <slot name="trigger"></slot>
+        {#if triggerIcon}
+          <span class='{triggerIcon}' aria-hidden="true"></span>
+        {/if}
+        {#if triggerLabel}
+          <span>{triggerLabel}</span>
+        {/if}
+      </button>
+
+      {#if closeOnOutside}
+        <button
+          type="button"
+          class="wire-popover__dismiss-layer"
+          data-show='{open || visible}'
+          aria-label='{closeLabel}'
+          @click='hidePopover("outside", event)'
+        ></button>
+      {/if}
+
+      <section
+        class="wire-popover__panel"
+        data-show='{open || visible}'
+        role="dialog"
+        aria-label='{title || triggerLabel}'
+      >
+        {#if showArrow}
+          <span class="wire-popover__arrow" aria-hidden="true"></span>
+        {/if}
+
+        {#if title || description || icon || showClose}
+          <header class="wire-popover__header">
+            <div class="wire-popover__heading">
+              {#if icon}
+                <span class='wire-popover__icon {icon}' aria-hidden="true"></span>
+              {/if}
+              <div class="wire-popover__heading-copy">
+                <slot name="header"></slot>
+                {#if title}
+                  <h3>{title}</h3>
+                {/if}
+                {#if description}
+                  <p>{description}</p>
+                {/if}
+              </div>
+            </div>
+
+            {#if showClose}
+              <button
+                type="button"
+                class="wire-popover__close"
+                aria-label='{closeLabel}'
+                @click='hidePopover("close-button", event)'
+              >
+                <span class="icon-[lucide--x]" aria-hidden="true"></span>
+              </button>
+            {/if}
+          </header>
+        {/if}
+
+        <div class="wire-popover__body">
+          <slot></slot>
+        </div>
+
+        {#if actionLabel}
+          <footer class="wire-popover__footer">
+            {#if actionHref}
+              <a
+                href='{actionHref}'
+                class="wire-popover__action"
+                @click='activateAction(event)'
+              >
+                <span>{actionLabel}</span>
+                {#if actionIcon}
+                  <span class='{actionIcon}' aria-hidden="true"></span>
+                {:else}
+                  <span class="icon-[lucide--arrow-right]" aria-hidden="true"></span>
+                {/if}
+              </a>
+            {:else}
+              <button
+                type="button"
+                class="wire-popover__action"
+                @click='activateAction(event)'
+              >
+                <span>{actionLabel}</span>
+                {#if actionIcon}
+                  <span class='{actionIcon}' aria-hidden="true"></span>
+                {:else}
+                  <span class="icon-[lucide--arrow-right]" aria-hidden="true"></span>
+                {/if}
+              </button>
+            {/if}
+          </footer>
+        {/if}
+
+        <slot name="footer"></slot>
+      </section>
     </div>
   }
+
+  style {
+    .wire-popover {
+      --popover-accent: var(--wire-color-primary);
+      --popover-soft: var(--wire-color-primary-soft);
+      --popover-contrast: var(--wire-color-primary-contrast);
+      position: relative;
+      display: inline-flex;
+    }
+
+    .wire-popover[data-color="secondary"] {
+      --popover-accent: var(--wire-color-secondary);
+      --popover-soft: var(--wire-color-secondary-soft);
+      --popover-contrast: var(--wire-color-secondary-contrast);
+    }
+
+    .wire-popover[data-color="info"] {
+      --popover-accent: var(--wire-color-info);
+      --popover-soft: var(--wire-color-info-soft);
+      --popover-contrast: var(--wire-color-info-contrast);
+    }
+
+    .wire-popover[data-color="success"] {
+      --popover-accent: var(--wire-color-success);
+      --popover-soft: var(--wire-color-success-soft);
+      --popover-contrast: var(--wire-color-success-contrast);
+    }
+
+    .wire-popover[data-color="warning"] {
+      --popover-accent: var(--wire-color-warning);
+      --popover-soft: var(--wire-color-warning-soft);
+      --popover-contrast: var(--wire-color-warning-text);
+    }
+
+    .wire-popover[data-color="danger"] {
+      --popover-accent: var(--wire-color-danger);
+      --popover-soft: var(--wire-color-danger-soft);
+      --popover-contrast: var(--wire-color-on-danger);
+    }
+
+    .wire-popover__trigger {
+      appearance: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.55rem;
+      min-height: 2.55rem;
+      padding: 0.65rem 0.9rem;
+      color: var(--wire-color-text);
+      background: var(--wire-color-surface-raised);
+      border: 1px solid var(--wire-color-border);
+      border-radius: 0.78rem;
+      font: inherit;
+      font-size: 0.84rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
+    }
+
+    .wire-popover__trigger:hover,
+    .wire-popover__trigger:focus-visible,
+    .wire-popover[data-open="true"] .wire-popover__trigger {
+      color: var(--popover-accent);
+      background: var(--popover-soft);
+      border-color: color-mix(in srgb, var(--popover-accent) 38%, var(--wire-color-border));
+      outline: none;
+    }
+
+    .wire-popover__trigger:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .wire-popover[data-size="sm"] .wire-popover__trigger {
+      min-height: 2.2rem;
+      padding: 0.5rem 0.72rem;
+      font-size: 0.78rem;
+    }
+
+    .wire-popover[data-size="lg"] .wire-popover__trigger {
+      min-height: 2.9rem;
+      padding: 0.78rem 1.05rem;
+      font-size: 0.9rem;
+    }
+
+    .wire-popover__dismiss-layer {
+      position: fixed;
+      inset: 0;
+      z-index: 1120;
+      appearance: none;
+      padding: 0;
+      background: transparent;
+      border: 0;
+    }
+
+    .wire-popover__panel {
+      position: absolute;
+      z-index: 1121;
+      top: calc(100% + 0.72rem);
+      left: 0;
+      width: 18rem;
+      max-width: calc(100vw - 1.5rem);
+      color: var(--wire-color-text);
+      background:
+        linear-gradient(145deg, color-mix(in srgb, var(--popover-accent) 5%, transparent), transparent 62%),
+        color-mix(in srgb, var(--wire-color-surface-raised) 97%, transparent);
+      border: 1px solid color-mix(in srgb, var(--popover-accent) 18%, var(--wire-color-border));
+      border-radius: 1rem;
+      box-shadow:
+        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
+        0 24px 64px color-mix(in srgb, black 22%, transparent);
+      backdrop-filter: blur(18px);
+    }
+
+    .wire-popover[data-width="sm"] .wire-popover__panel {
+      width: 14rem;
+    }
+
+    .wire-popover[data-width="lg"] .wire-popover__panel {
+      width: 24rem;
+    }
+
+    .wire-popover[data-width="xl"] .wire-popover__panel {
+      width: 32rem;
+    }
+
+    .wire-popover[data-width="trigger"] .wire-popover__panel {
+      width: 100%;
+      min-width: 100%;
+    }
+
+    .wire-popover[data-placement="bottom-end"] .wire-popover__panel {
+      right: 0;
+      left: auto;
+    }
+
+    .wire-popover[data-placement="top-start"] .wire-popover__panel {
+      top: auto;
+      bottom: calc(100% + 0.72rem);
+    }
+
+    .wire-popover[data-placement="top-end"] .wire-popover__panel {
+      top: auto;
+      right: 0;
+      bottom: calc(100% + 0.72rem);
+      left: auto;
+    }
+
+    .wire-popover[data-placement="left"] .wire-popover__panel {
+      top: 50%;
+      right: calc(100% + 0.72rem);
+      left: auto;
+      transform: translateY(-50%);
+    }
+
+    .wire-popover[data-placement="right"] .wire-popover__panel {
+      top: 50%;
+      left: calc(100% + 0.72rem);
+      transform: translateY(-50%);
+    }
+
+    .wire-popover[data-variant="soft"] .wire-popover__panel {
+      background:
+        linear-gradient(145deg, var(--popover-soft), transparent 70%),
+        var(--wire-color-surface-raised);
+      box-shadow: 0 18px 48px color-mix(in srgb, black 16%, transparent);
+    }
+
+    .wire-popover[data-variant="outline"] .wire-popover__panel {
+      background: var(--wire-color-surface-raised);
+      box-shadow: none;
+    }
+
+    .wire-popover[data-variant="solid"] .wire-popover__panel {
+      color: var(--popover-contrast);
+      background: var(--popover-accent);
+      border-color: color-mix(in srgb, white 20%, transparent);
+    }
+
+    .wire-popover__arrow {
+      position: absolute;
+      top: -0.35rem;
+      left: 1.25rem;
+      width: 0.7rem;
+      height: 0.7rem;
+      background: inherit;
+      border-top: 1px solid color-mix(in srgb, var(--popover-accent) 18%, var(--wire-color-border));
+      border-left: 1px solid color-mix(in srgb, var(--popover-accent) 18%, var(--wire-color-border));
+      transform: rotate(45deg);
+    }
+
+    .wire-popover[data-placement="bottom-end"] .wire-popover__arrow {
+      right: 1.25rem;
+      left: auto;
+    }
+
+    .wire-popover[data-placement="top-start"] .wire-popover__arrow,
+    .wire-popover[data-placement="top-end"] .wire-popover__arrow {
+      top: auto;
+      bottom: -0.35rem;
+      transform: rotate(225deg);
+    }
+
+    .wire-popover[data-placement="left"] .wire-popover__arrow {
+      top: 50%;
+      right: -0.35rem;
+      left: auto;
+      transform: translateY(-50%) rotate(135deg);
+    }
+
+    .wire-popover[data-placement="right"] .wire-popover__arrow {
+      top: 50%;
+      left: -0.35rem;
+      transform: translateY(-50%) rotate(-45deg);
+    }
+
+    .wire-popover__header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 0.8rem;
+      padding: 1rem 1rem 0.8rem;
+      border-bottom: 1px solid var(--wire-color-border);
+    }
+
+    .wire-popover__heading {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.7rem;
+      min-width: 0;
+    }
+
+    .wire-popover__icon {
+      flex: 0 0 auto;
+      width: 1.05rem;
+      height: 1.05rem;
+      margin-top: 0.15rem;
+      color: var(--popover-accent);
+    }
+
+    .wire-popover[data-variant="solid"] .wire-popover__icon {
+      color: currentColor;
+    }
+
+    .wire-popover__heading-copy {
+      display: grid;
+      gap: 0.2rem;
+      min-width: 0;
+    }
+
+    .wire-popover__heading-copy h3,
+    .wire-popover__heading-copy p {
+      margin: 0;
+    }
+
+    .wire-popover__heading-copy h3 {
+      font-size: 0.9rem;
+      font-weight: 650;
+    }
+
+    .wire-popover__heading-copy p {
+      color: var(--wire-color-text-muted);
+      font-size: 0.74rem;
+      line-height: 1.5;
+    }
+
+    .wire-popover[data-variant="solid"] .wire-popover__heading-copy p {
+      color: color-mix(in srgb, currentColor 76%, transparent);
+    }
+
+    .wire-popover__close {
+      appearance: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: 0 0 auto;
+      width: 2rem;
+      height: 2rem;
+      color: var(--wire-color-text-muted);
+      background: var(--wire-color-surface-soft);
+      border: 1px solid var(--wire-color-border);
+      border-radius: 0.65rem;
+      cursor: pointer;
+    }
+
+    .wire-popover__body {
+      padding: 1rem;
+      color: var(--wire-color-text-muted);
+      font-size: 0.8rem;
+      line-height: 1.6;
+    }
+
+    .wire-popover__footer {
+      padding: 0 1rem 1rem;
+    }
+
+    .wire-popover__action {
+      appearance: none;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.45rem;
+      min-height: 2.35rem;
+      padding: 0.58rem 0.8rem;
+      color: var(--popover-contrast);
+      background: var(--popover-accent);
+      border: 0;
+      border-radius: 0.7rem;
+      font: inherit;
+      font-size: 0.78rem;
+      font-weight: 650;
+      text-decoration: none;
+      cursor: pointer;
+    }
+
+    @media (max-width: 639px) {
+      .wire-popover__panel {
+        position: fixed;
+        right: 0.75rem;
+        bottom: 0.75rem;
+        left: 0.75rem;
+        top: auto;
+        width: auto;
+        max-width: none;
+        transform: none;
+      }
+
+      .wire-popover__arrow {
+        display: none;
+      }
+    }
+  }
 }
diff --git a/packages/ui/components/SplitHero.wrn b/packages/ui/components/SplitHero.wrn
index cd523eb1..5a1f0094 100644
--- a/packages/ui/components/SplitHero.wrn
+++ b/packages/ui/components/SplitHero.wrn
@@ -1,6 +1,7 @@
 component SplitHero {
   props {
     eyebrow = ""
+    eyebrowIcon = "icon-[lucide--sparkles]"
     title = "A better digital experience"
     highlight = ""
     description = ""
@@ -13,86 +14,804 @@ component SplitHero {
     visualPosition = "right"
     reverse = false
     ratio = "balanced"
+    align = "left"
     size = "default"
     color = "primary"
     variant = "default"
+    maxWidth = "xl"
+    fullBleed = true
+    backgroundImage = ""
+    visualImage = ""
+    visualAlt = ""
+    visualIcon = ""
+    visualEyebrow = ""
+    visualTitle = ""
+    visualDescription = ""
+    visualItems = []
+    visualStyle = "panel"
     trustItems = []
     class = ""
   }
 
   view {
-    <Section
-      spacing='{size === "compact" ? "md" : "xl"}'
-      variant='{variant === "soft" ? "soft" : "default"}'
-      color='{color}'
-      class='overflow-hidden {class}'
+    <section
+      {...attrs}
+      data-ui-component="SplitHero"
+      data-position='{reverse || visualPosition === "left" ? "left" : "right"}'
+      data-ratio='{ratio}'
+      data-align='{align}'
+      data-size='{size}'
+      data-color='{color}'
+      data-variant='{variant}'
+      data-max-width='{maxWidth}'
+      data-full-bleed='{fullBleed ? "true" : "false"}'
+      data-visual-style='{visualStyle}'
+      class='wire-split-hero {class}'
     >
-      <div
-        data-ui-component="SplitHero"
-        class="grid items-center gap-10 lg:grid-cols-2 lg:gap-16"
-        class:lg:grid-cols-[1.15fr_0.85fr]='ratio === "content"'
-        class:lg:grid-cols-[0.85fr_1.15fr]='ratio === "visual"'
-      >
-        <div
-          class="max-w-3xl"
-          class:lg:order-2='reverse || visualPosition === "left"'
-        >
-          {#if eyebrow}
-            <div class="mb-6 inline-flex items-center gap-2 rounded-full border border-[var(--wire-color-primary-muted)] bg-[var(--wire-color-primary-soft)] px-4 py-2 text-sm font-semibold text-[var(--wire-color-primary)]">
-              <span class="icon-[lucide--sparkles] size-4" aria-hidden="true"></span>
-              <span>{eyebrow}</span>
-            </div>
-          {/if}
+      {#if backgroundImage}
+        <img
+          src='{backgroundImage}'
+          alt=""
+          aria-hidden="true"
+          class="wire-split-hero__background-image"
+        />
+      {/if}
 
-          <h1 class="text-4xl font-bold leading-[1.08] tracking-[-0.035em] text-[var(--wire-color-text)] sm:text-5xl lg:text-6xl">
-            <span>{title}</span>
-            {#if highlight}
-              <span class="block text-[var(--wire-color-primary)]">{highlight}</span>
+      <div class="wire-split-hero__glow wire-split-hero__glow--one" aria-hidden="true"></div>
+      <div class="wire-split-hero__glow wire-split-hero__glow--two" aria-hidden="true"></div>
+
+      <div class="wire-split-hero__inner">
+        <div class="wire-split-hero__layout">
+          <div class="wire-split-hero__content">
+            {#if eyebrow}
+              <div class="wire-split-hero__eyebrow">
+                {#if eyebrowIcon}
+                  <span class='wire-split-hero__eyebrow-icon {eyebrowIcon}' aria-hidden="true"></span>
+                {/if}
+                <span>{eyebrow}</span>
+              </div>
             {/if}
-          </h1>
 
-          {#if description}
-            <p class="mt-6 text-base leading-8 text-[var(--wire-color-text-muted)] sm:text-lg">{description}</p>
-          {/if}
+            <h1 class="wire-split-hero__title">
+              <span>{title}</span>
+              {#if highlight}
+                <span class="wire-split-hero__highlight">{highlight}</span>
+              {/if}
+            </h1>
 
-          <HeroActions
-            actions='{[
-              { label: primaryLabel, href: primaryHref, icon: primaryIcon, variant: "default", color: color },
-              { label: secondaryLabel, href: secondaryHref, icon: secondaryIcon, variant: "outline", color: color }
-            ]}'
-            align="left"
-            stackOnMobile="true"
-            fullWidthMobile="true"
-            size="lg"
-            color='{color}'
-            class="mt-8"
-          >
-            <slot name="actions"></slot>
-          </HeroActions>
+            {#if description}
+              <p class="wire-split-hero__description">{description}</p>
+            {/if}
 
-          {#if trustItems.length > 0}
-            <div class="mt-8 flex flex-wrap gap-x-6 gap-y-3 text-sm text-[var(--wire-color-text-muted)]">
-              {#each trustItems as item}
-                <span class="inline-flex items-center gap-2">
-                  <span class='{(item.icon || "icon-[lucide--check-circle-2]") + " size-4 text-[var(--wire-color-primary)]"}' aria-hidden="true"></span>
-                  <span>{item.label || item.title || item}</span>
-                </span>
-              {/each}
-            </div>
-          {/if}
+            <slot></slot>
 
-          <slot name="trust"></slot>
-          <slot></slot>
-        </div>
+            {#if primaryLabel || secondaryLabel}
+              <div class="wire-split-hero__actions">
+                {#if primaryLabel}
+                  <a href='{primaryHref || "#"}' class="wire-split-hero__action wire-split-hero__action--primary">
+                    {#if primaryIcon}
+                      <span class='wire-split-hero__action-icon {primaryIcon}' aria-hidden="true"></span>
+                    {/if}
+                    <span>{primaryLabel}</span>
+                  </a>
+                {/if}
 
-        <div
-          class="relative min-w-0"
-          class:lg:order-1='reverse || visualPosition === "left"'
-        >
-          <div class="absolute -inset-8 -z-10 rounded-[2.5rem] bg-[var(--wire-color-primary-soft)] blur-2xl" aria-hidden="true"></div>
-          <slot name="visual"></slot>
+                {#if secondaryLabel}
+                  <a href='{secondaryHref || "#"}' class="wire-split-hero__action wire-split-hero__action--secondary">
+                    {#if secondaryIcon}
+                      <span class='wire-split-hero__action-icon {secondaryIcon}' aria-hidden="true"></span>
+                    {/if}
+                    <span>{secondaryLabel}</span>
+                  </a>
+                {/if}
+
+                <slot name="actions"></slot>
+              </div>
+            {:else}
+              <div class="wire-split-hero__actions wire-split-hero__actions--slot">
+                <slot name="actions"></slot>
+              </div>
+            {/if}
+
+            {#if trustItems.length > 0}
+              <div class="wire-split-hero__trust">
+                {#each trustItems as item}
+                  <span class="wire-split-hero__trust-item">
+                    <span class='{item.icon || "icon-[lucide--check-circle-2]"}' aria-hidden="true"></span>
+                    <span>{item.label || item.title || item}</span>
+                  </span>
+                {/each}
+              </div>
+            {/if}
+
+            <slot name="trust"></slot>
+          </div>
+
+          <div class="wire-split-hero__visual-column">
+            <slot name="visual"></slot>
+
+            {#if visualImage || visualIcon || visualEyebrow || visualTitle || visualDescription || visualItems.length > 0}
+              <div class="wire-split-hero__visual">
+                {#if visualImage}
+                  <div class="wire-split-hero__visual-media">
+                    <img src='{visualImage}' alt='{visualAlt}' class="wire-split-hero__visual-image" />
+                  </div>
+                {/if}
+
+                {#if visualIcon || visualEyebrow || visualTitle || visualDescription}
+                  <div class="wire-split-hero__visual-header">
+                    {#if visualIcon}
+                      <div class="wire-split-hero__visual-icon" aria-hidden="true">
+                        <span class='{visualIcon}'></span>
+                      </div>
+                    {/if}
+
+                    <div class="wire-split-hero__visual-copy">
+                      {#if visualEyebrow}
+                        <p class="wire-split-hero__visual-eyebrow">{visualEyebrow}</p>
+                      {/if}
+
+                      {#if visualTitle}
+                        <h2 class="wire-split-hero__visual-title">{visualTitle}</h2>
+                      {/if}
+
+                      {#if visualDescription}
+                        <p class="wire-split-hero__visual-description">{visualDescription}</p>
+                      {/if}
+                    </div>
+                  </div>
+                {/if}
+
+                {#if visualItems.length > 0}
+                  <div class="wire-split-hero__visual-list">
+                    {#each visualItems as item}
+                      <div class="wire-split-hero__visual-item">
+                        {#if item.icon}
+                          <div class="wire-split-hero__visual-item-icon" aria-hidden="true">
+                            <span class='{item.icon}'></span>
+                          </div>
+                        {/if}
+
+                        <div class="wire-split-hero__visual-item-copy">
+                          <div class="wire-split-hero__visual-item-heading">
+                            <strong>{item.label || item.title}</strong>
+                            {#if item.value}
+                              <span>{item.value}</span>
+                            {/if}
+                          </div>
+
+                          {#if item.description}
+                            <p>{item.description}</p>
+                          {/if}
+                        </div>
+                      </div>
+                    {/each}
+                  </div>
+                {/if}
+              </div>
+            {/if}
+          </div>
         </div>
       </div>
-    </Section>
+    </section>
+  }
+
+  style {
+    .wire-split-hero {
+      --split-accent: var(--wire-color-primary);
+      --split-accent-hover: var(--wire-color-primary-hover);
+      --split-accent-soft: var(--wire-color-primary-soft);
+      --split-accent-muted: var(--wire-color-primary-muted);
+      --split-contrast: var(--wire-color-primary-contrast);
+      --split-border: color-mix(in srgb, var(--split-accent) 14%, var(--wire-color-border));
+
+      position: relative;
+      isolation: isolate;
+      width: 100%;
+      overflow: hidden;
+      color: var(--wire-color-text);
+      background:
+        radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--split-accent) 11%, transparent), transparent 28%),
+        var(--wire-color-background);
+    }
+
+    .wire-split-hero[data-color="secondary"] {
+      --split-accent: var(--wire-color-secondary);
+      --split-accent-hover: var(--wire-color-secondary-hover);
+      --split-accent-soft: var(--wire-color-secondary-soft);
+      --split-accent-muted: var(--wire-color-secondary-muted);
+      --split-contrast: var(--wire-color-secondary-contrast);
+    }
+
+    .wire-split-hero[data-color="info"] {
+      --split-accent: var(--wire-color-info);
+      --split-accent-hover: var(--wire-color-info-hover);
+      --split-accent-soft: var(--wire-color-info-soft);
+      --split-accent-muted: var(--wire-color-info-muted);
+      --split-contrast: var(--wire-color-info-contrast);
+    }
+
+    .wire-split-hero[data-color="success"] {
+      --split-accent: var(--wire-color-success);
+      --split-accent-hover: var(--wire-color-success-hover);
+      --split-accent-soft: var(--wire-color-success-soft);
+      --split-accent-muted: var(--wire-color-success-muted);
+      --split-contrast: var(--wire-color-success-contrast);
+    }
+
+    .wire-split-hero[data-color="warning"] {
+      --split-accent: var(--wire-color-warning);
+      --split-accent-hover: var(--wire-color-warning-hover);
+      --split-accent-soft: var(--wire-color-warning-soft);
+      --split-accent-muted: var(--wire-color-warning-muted);
+      --split-contrast: var(--wire-color-warning-contrast);
+    }
+
+    .wire-split-hero[data-color="danger"] {
+      --split-accent: var(--wire-color-danger);
+      --split-accent-hover: var(--wire-color-danger-hover);
+      --split-accent-soft: var(--wire-color-danger-soft);
+      --split-accent-muted: var(--wire-color-danger-muted);
+      --split-contrast: var(--wire-color-danger-contrast);
+    }
+
+    .wire-split-hero[data-variant="soft"] {
+      background:
+        radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--split-accent) 16%, transparent), transparent 30%),
+        linear-gradient(135deg, var(--split-accent-soft), transparent 64%),
+        var(--wire-color-background);
+    }
+
+    .wire-split-hero[data-variant="raised"] {
+      background: var(--wire-color-surface-raised);
+      border-block: 1px solid var(--split-border);
+      box-shadow: 0 22px 70px color-mix(in srgb, black 14%, transparent);
+    }
+
+    .wire-split-hero[data-variant="outline"] {
+      background: transparent;
+      border-block: 1px solid var(--split-border);
+    }
+
+    .wire-split-hero[data-variant="gradient"] {
+      background:
+        radial-gradient(circle at 82% 16%, color-mix(in srgb, var(--split-accent) 28%, transparent), transparent 32%),
+        linear-gradient(135deg, color-mix(in srgb, var(--split-accent) 13%, var(--wire-color-background)), var(--wire-color-background) 58%);
+    }
+
+    .wire-split-hero[data-variant="solid"] {
+      color: var(--split-contrast);
+      background:
+        radial-gradient(circle at 82% 16%, color-mix(in srgb, white 14%, transparent), transparent 32%),
+        var(--split-accent);
+    }
+
+    .wire-split-hero[data-full-bleed="false"] {
+      width: min(calc(100% - 2rem), 90rem);
+      margin-inline: auto;
+      border: 1px solid var(--split-border);
+      border-radius: 1.75rem;
+    }
+
+    .wire-split-hero__background-image {
+      position: absolute;
+      inset: 0;
+      z-index: -3;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      opacity: 0.12;
+    }
+
+    .wire-split-hero__glow {
+      position: absolute;
+      z-index: -2;
+      width: 24rem;
+      height: 24rem;
+      pointer-events: none;
+      background: var(--split-accent);
+      border-radius: 999px;
+      filter: blur(110px);
+      opacity: 0.08;
+    }
+
+    .wire-split-hero__glow--one {
+      top: -11rem;
+      right: -6rem;
+    }
+
+    .wire-split-hero__glow--two {
+      bottom: -14rem;
+      left: -7rem;
+      opacity: 0.05;
+    }
+
+    .wire-split-hero__inner {
+      width: min(calc(100% - 2rem), 80rem);
+      margin-inline: auto;
+      padding-block: 5rem;
+    }
+
+    .wire-split-hero[data-max-width="compact"] .wire-split-hero__inner {
+      width: min(calc(100% - 2rem), 64rem);
+    }
+
+    .wire-split-hero[data-max-width="lg"] .wire-split-hero__inner {
+      width: min(calc(100% - 2rem), 72rem);
+    }
+
+    .wire-split-hero[data-max-width="wide"] .wire-split-hero__inner,
+    .wire-split-hero[data-max-width="2xl"] .wire-split-hero__inner {
+      width: min(calc(100% - 2rem), 90rem);
+    }
+
+    .wire-split-hero[data-max-width="full"] .wire-split-hero__inner {
+      width: 100%;
+      max-width: none;
+      padding-inline: 2rem;
+    }
+
+    .wire-split-hero[data-size="compact"] .wire-split-hero__inner,
+    .wire-split-hero[data-size="sm"] .wire-split-hero__inner {
+      padding-block: 3rem;
+    }
+
+    .wire-split-hero[data-size="lg"] .wire-split-hero__inner {
+      padding-block: 6rem;
+    }
+
+    .wire-split-hero__layout {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      align-items: center;
+      gap: 3rem;
+    }
+
+    .wire-split-hero__content,
+    .wire-split-hero__visual-column {
+      min-width: 0;
+    }
+
+    .wire-split-hero__content {
+      max-width: 45rem;
+    }
+
+    .wire-split-hero[data-align="center"] .wire-split-hero__content {
+      margin-inline: auto;
+      text-align: center;
+    }
+
+    .wire-split-hero[data-align="right"] .wire-split-hero__content {
+      margin-left: auto;
+      text-align: right;
+    }
+
+    .wire-split-hero__eyebrow {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      min-height: 2.25rem;
+      padding: 0.45rem 0.8rem;
+      color: var(--split-accent);
+      background: var(--split-accent-soft);
+      border: 1px solid color-mix(in srgb, var(--split-accent) 22%, transparent);
+      border-radius: 999px;
+      font-size: 0.76rem;
+      font-weight: 600;
+      line-height: 1;
+    }
+
+    .wire-split-hero[data-variant="solid"] .wire-split-hero__eyebrow {
+      color: currentColor;
+      background: color-mix(in srgb, white 14%, transparent);
+      border-color: color-mix(in srgb, white 22%, transparent);
+    }
+
+    .wire-split-hero__eyebrow-icon {
+      width: 0.95rem;
+      height: 0.95rem;
+    }
+
+    .wire-split-hero__title {
+      max-width: 15ch;
+      margin: 1.45rem 0 0;
+      color: var(--wire-color-text);
+      font-size: clamp(2.35rem, 6vw, 4.8rem);
+      font-weight: 650;
+      line-height: 1.02;
+      letter-spacing: -0.05em;
+    }
+
+    .wire-split-hero[data-size="compact"] .wire-split-hero__title,
+    .wire-split-hero[data-size="sm"] .wire-split-hero__title {
+      font-size: clamp(2rem, 5vw, 3.4rem);
+    }
+
+    .wire-split-hero[data-size="lg"] .wire-split-hero__title {
+      font-size: clamp(2.75rem, 7vw, 5.5rem);
+    }
+
+    .wire-split-hero[data-align="center"] .wire-split-hero__title,
+    .wire-split-hero[data-align="right"] .wire-split-hero__title {
+      margin-inline: auto;
+    }
+
+    .wire-split-hero[data-align="right"] .wire-split-hero__title {
+      margin-right: 0;
+    }
+
+    .wire-split-hero[data-variant="solid"] .wire-split-hero__title {
+      color: currentColor;
+    }
+
+    .wire-split-hero__highlight {
+      display: block;
+      color: var(--split-accent);
+    }
+
+    .wire-split-hero[data-variant="solid"] .wire-split-hero__highlight {
+      color: currentColor;
+      opacity: 0.82;
+    }
+
+    .wire-split-hero__description {
+      max-width: 42rem;
+      margin: 1.4rem 0 0;
+      color: var(--wire-color-text-muted);
+      font-size: clamp(0.96rem, 1.8vw, 1.1rem);
+      line-height: 1.8;
+    }
+
+    .wire-split-hero[data-align="center"] .wire-split-hero__description,
+    .wire-split-hero[data-align="right"] .wire-split-hero__description {
+      margin-inline: auto;
+    }
+
+    .wire-split-hero[data-align="right"] .wire-split-hero__description {
+      margin-right: 0;
+    }
+
+    .wire-split-hero[data-variant="solid"] .wire-split-hero__description {
+      color: color-mix(in srgb, currentColor 82%, transparent);
+    }
+
+    .wire-split-hero__actions {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.75rem;
+      margin-top: 2rem;
+    }
+
+    .wire-split-hero__actions--slot:empty {
+      display: none;
+    }
+
+    .wire-split-hero[data-align="center"] .wire-split-hero__actions {
+      justify-content: center;
+    }
+
+    .wire-split-hero[data-align="right"] .wire-split-hero__actions {
+      justify-content: flex-end;
+    }
+
+    .wire-split-hero__action {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.55rem;
+      min-height: 2.85rem;
+      padding: 0.78rem 1.1rem;
+      border-radius: 0.75rem;
+      font-size: 0.84rem;
+      font-weight: 700;
+      line-height: 1;
+      text-decoration: none;
+      transition:
+        transform 160ms ease,
+        background-color 160ms ease,
+        border-color 160ms ease,
+        color 160ms ease,
+        box-shadow 160ms ease;
+    }
+
+    .wire-split-hero__action:hover {
+      transform: translateY(-2px);
+    }
+
+    .wire-split-hero__action--primary {
+      color: var(--split-contrast);
+      background: var(--split-accent);
+      border: 1px solid transparent;
+      box-shadow: 0 10px 26px color-mix(in srgb, var(--split-accent) 22%, transparent);
+    }
+
+    .wire-split-hero__action--primary:hover {
+      background: var(--split-accent-hover);
+    }
+
+    .wire-split-hero__action--secondary {
+      color: var(--split-accent);
+      background: transparent;
+      border: 1px solid color-mix(in srgb, var(--split-accent) 42%, var(--wire-color-border));
+    }
+
+    .wire-split-hero__action--secondary:hover {
+      background: var(--split-accent-soft);
+      border-color: var(--split-accent);
+    }
+
+    .wire-split-hero[data-variant="solid"] .wire-split-hero__action--primary {
+      color: var(--split-accent);
+      background: var(--split-contrast);
+      box-shadow: none;
+    }
+
+    .wire-split-hero[data-variant="solid"] .wire-split-hero__action--secondary {
+      color: currentColor;
+      border-color: color-mix(in srgb, white 46%, transparent);
+    }
+
+    .wire-split-hero[data-variant="solid"] .wire-split-hero__action--secondary:hover {
+      background: color-mix(in srgb, white 12%, transparent);
+      border-color: color-mix(in srgb, white 68%, transparent);
+    }
+
+    .wire-split-hero__action-icon {
+      width: 1rem;
+      height: 1rem;
+    }
+
+    .wire-split-hero__action:focus-visible {
+      outline: 2px solid var(--wire-color-focus);
+      outline-offset: 3px;
+    }
+
+    .wire-split-hero__trust {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.75rem 1.2rem;
+      margin-top: 1.7rem;
+      color: var(--wire-color-text-muted);
+      font-size: 0.78rem;
+    }
+
+    .wire-split-hero[data-align="center"] .wire-split-hero__trust {
+      justify-content: center;
+    }
+
+    .wire-split-hero[data-align="right"] .wire-split-hero__trust {
+      justify-content: flex-end;
+    }
+
+    .wire-split-hero[data-variant="solid"] .wire-split-hero__trust {
+      color: color-mix(in srgb, currentColor 80%, transparent);
+    }
+
+    .wire-split-hero__trust-item {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.42rem;
+    }
+
+    .wire-split-hero__trust-item > span:first-child {
+      width: 0.95rem;
+      height: 0.95rem;
+      color: var(--split-accent);
+    }
+
+    .wire-split-hero[data-variant="solid"] .wire-split-hero__trust-item > span:first-child {
+      color: currentColor;
+    }
+
+    .wire-split-hero__visual-column {
+      position: relative;
+    }
+
+    .wire-split-hero__visual-column::before {
+      content: "";
+      position: absolute;
+      inset: 8% -5% -4% 8%;
+      z-index: -1;
+      background: var(--split-accent-soft);
+      border-radius: 2rem;
+      filter: blur(2px);
+      transform: rotate(2deg);
+    }
+
+    .wire-split-hero__visual {
+      overflow: hidden;
+      background:
+        linear-gradient(145deg, color-mix(in srgb, var(--split-accent) 7%, transparent), transparent 58%),
+        var(--wire-color-surface-raised);
+      border: 1px solid var(--split-border);
+      border-radius: 1.5rem;
+      box-shadow:
+        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
+        0 30px 76px color-mix(in srgb, black 18%, transparent);
+    }
+
+    .wire-split-hero[data-visual-style="plain"] .wire-split-hero__visual {
+      overflow: visible;
+      background: transparent;
+      border-color: transparent;
+      border-radius: 0;
+      box-shadow: none;
+    }
+
+    .wire-split-hero[data-visual-style="soft"] .wire-split-hero__visual {
+      background:
+        linear-gradient(145deg, var(--split-accent-soft), transparent 72%),
+        var(--wire-color-surface-raised);
+      box-shadow: none;
+    }
+
+    .wire-split-hero[data-variant="solid"] .wire-split-hero__visual {
+      color: var(--wire-color-text);
+      background: var(--wire-color-surface-raised);
+      border-color: color-mix(in srgb, white 24%, transparent);
+    }
+
+    .wire-split-hero__visual-media {
+      position: relative;
+      aspect-ratio: 16 / 10;
+      overflow: hidden;
+      background: var(--wire-color-surface-soft);
+    }
+
+    .wire-split-hero__visual-image {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .wire-split-hero__visual-header {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      gap: 1rem;
+      padding: 1.5rem;
+    }
+
+    .wire-split-hero__visual-icon,
+    .wire-split-hero__visual-item-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: 0 0 auto;
+      width: 2.8rem;
+      height: 2.8rem;
+      color: var(--split-accent);
+      background: var(--split-accent-soft);
+      border: 1px solid color-mix(in srgb, var(--split-accent) 20%, transparent);
+      border-radius: 0.9rem;
+      font-size: 1.2rem;
+    }
+
+    .wire-split-hero__visual-copy,
+    .wire-split-hero__visual-item-copy {
+      min-width: 0;
+    }
+
+    .wire-split-hero__visual-eyebrow {
+      margin: 0 0 0.35rem;
+      color: var(--split-accent);
+      font-size: 0.69rem;
+      font-weight: 700;
+      letter-spacing: 0.11em;
+      text-transform: uppercase;
+    }
+
+    .wire-split-hero__visual-title {
+      margin: 0;
+      color: var(--wire-color-text);
+      font-size: 1.15rem;
+      font-weight: 650;
+      line-height: 1.35;
+    }
+
+    .wire-split-hero__visual-description {
+      margin: 0.5rem 0 0;
+      color: var(--wire-color-text-muted);
+      font-size: 0.82rem;
+      line-height: 1.65;
+    }
+
+    .wire-split-hero__visual-list {
+      display: grid;
+      gap: 0;
+      border-top: 1px solid var(--wire-color-border);
+    }
+
+    .wire-split-hero__visual-item {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      gap: 0.85rem;
+      padding: 1.1rem 1.5rem;
+    }
+
+    .wire-split-hero__visual-item + .wire-split-hero__visual-item {
+      border-top: 1px solid var(--wire-color-border);
+    }
+
+    .wire-split-hero__visual-item-icon {
+      width: 2.25rem;
+      height: 2.25rem;
+      border-radius: 0.72rem;
+      font-size: 1rem;
+    }
+
+    .wire-split-hero__visual-item-heading {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+      color: var(--wire-color-text);
+      font-size: 0.82rem;
+    }
+
+    .wire-split-hero__visual-item-heading > span {
+      color: var(--split-accent);
+      font-weight: 700;
+    }
+
+    .wire-split-hero__visual-item p {
+      margin: 0.35rem 0 0;
+      color: var(--wire-color-text-muted);
+      font-size: 0.75rem;
+      line-height: 1.55;
+    }
+
+    @media (min-width: 960px) {
+      .wire-split-hero__layout {
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+        gap: 4.5rem;
+      }
+
+      .wire-split-hero[data-ratio="content"] .wire-split-hero__layout {
+        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
+      }
+
+      .wire-split-hero[data-ratio="visual"] .wire-split-hero__layout {
+        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
+      }
+
+      .wire-split-hero[data-position="left"] .wire-split-hero__content {
+        order: 2;
+      }
+
+      .wire-split-hero[data-position="left"] .wire-split-hero__visual-column {
+        order: 1;
+      }
+    }
+
+    @media (max-width: 639px) {
+      .wire-split-hero__inner {
+        padding-block: 3.25rem;
+      }
+
+      .wire-split-hero__actions {
+        align-items: stretch;
+      }
+
+      .wire-split-hero__action {
+        width: 100%;
+      }
+
+      .wire-split-hero__visual-header,
+      .wire-split-hero__visual-item {
+        padding-inline: 1.15rem;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .wire-split-hero__action {
+        transition: none;
+      }
+
+      .wire-split-hero__action:hover {
+        transform: none;
+      }
+    }
   }
 }
diff --git a/packages/ui/components/StatsBar.wrn b/packages/ui/components/StatsBar.wrn
index 46cb04e9..23f5fd06 100644
--- a/packages/ui/components/StatsBar.wrn
+++ b/packages/ui/components/StatsBar.wrn
@@ -13,28 +13,472 @@ component StatsBar {
   }
 
   view {
-    <Section
-      spacing='{compact ? "sm" : "md"}'
-      variant='{variant}'
-      color='{color}'
-      maxWidth='{maxWidth}'
-      borderTop="true"
-      borderBottom="true"
-      class='{class}'
+    <section
+      {...attrs}
+      data-ui-component="StatsBar"
+      data-columns='{columns}'
+      data-compact='{compact ? "true" : "false"}'
+      data-dividers='{dividers ? "true" : "false"}'
+      data-icons='{icons ? "true" : "false"}'
+      data-size='{size}'
+      data-color='{color}'
+      data-variant='{variant}'
+      data-max-width='{maxWidth}'
+      class='wire-stats-bar {class}'
+      aria-label="Key statistics"
     >
-      <div data-ui-component="StatsBar">
-        <MetricGrid
-          items='{items.map((item) => ({ ...item, icon: icons ? item.icon : "", variant: "minimal", size: compact ? "sm" : size }))}'
-          columns='{columns}'
-          tabletColumns="2"
-          mobileColumns="1"
-          gap='{compact ? "sm" : "md"}'
-          dividers='{dividers}'
-          size='{compact ? "sm" : size}'
-          color='{color}'
-          variant="minimal"
-        />
+      <div class="wire-stats-bar__inner">
+        <div class="wire-stats-bar__surface">
+          {#each items as item, itemIndex}
+            <article
+              class="wire-stats-bar__item"
+              data-color='{item.color || color}'
+              data-index='{itemIndex}'
+            >
+              <div class="wire-stats-bar__content">
+                {#if item.label}
+                  <p class="wire-stats-bar__label">{item.label}</p>
+                {/if}
+
+                <div class="wire-stats-bar__value-row">
+                  <strong class="wire-stats-bar__value">{item.value}</strong>
+
+                  {#if item.suffix}
+                    <span class="wire-stats-bar__suffix">{item.suffix}</span>
+                  {/if}
+                </div>
+
+                {#if item.description}
+                  <p class="wire-stats-bar__description">{item.description}</p>
+                {/if}
+
+                {#if item.trend || item.trendLabel}
+                  <div
+                    class="wire-stats-bar__trend"
+                    data-direction='{item.trendDirection || "neutral"}'
+                  >
+                    {#if item.trendDirection === "up"}
+                      <span
+                        class="icon-[lucide--trending-up] wire-stats-bar__trend-icon"
+                        aria-hidden="true"
+                      ></span>
+                    {:else if item.trendDirection === "down"}
+                      <span
+                        class="icon-[lucide--trending-down] wire-stats-bar__trend-icon"
+                        aria-hidden="true"
+                      ></span>
+                    {:else}
+                      <span
+                        class="icon-[lucide--minus] wire-stats-bar__trend-icon"
+                        aria-hidden="true"
+                      ></span>
+                    {/if}
+
+                    {#if item.trend}
+                      <span class="wire-stats-bar__trend-value">{item.trend}</span>
+                    {/if}
+
+                    {#if item.trendLabel}
+                      <span class="wire-stats-bar__trend-label">{item.trendLabel}</span>
+                    {/if}
+                  </div>
+                {/if}
+              </div>
+
+              {#if icons && item.icon}
+                <div class="wire-stats-bar__icon" aria-hidden="true">
+                  <span class='{item.icon}'></span>
+                </div>
+              {/if}
+            </article>
+          {/each}
+        </div>
       </div>
-    </Section>
+    </section>
+  }
+
+  style {
+    .wire-stats-bar {
+      --stats-accent: var(--wire-color-primary);
+      --stats-contrast: var(--wire-color-primary-contrast);
+      --stats-soft: color-mix(in srgb, var(--stats-accent) 12%, transparent);
+      --stats-border: color-mix(in srgb, var(--stats-accent) 22%, var(--wire-color-border));
+
+      position: relative;
+      width: 100%;
+      color: var(--wire-color-text);
+    }
+
+    .wire-stats-bar[data-color="secondary"] {
+      --stats-accent: var(--wire-color-secondary);
+      --stats-contrast: var(--wire-color-secondary-contrast);
+    }
+
+    .wire-stats-bar[data-color="info"] {
+      --stats-accent: var(--wire-color-info);
+      --stats-contrast: var(--wire-color-info-contrast);
+    }
+
+    .wire-stats-bar[data-color="success"] {
+      --stats-accent: var(--wire-color-success);
+      --stats-contrast: var(--wire-color-success-contrast);
+    }
+
+    .wire-stats-bar[data-color="warning"] {
+      --stats-accent: var(--wire-color-warning);
+      --stats-contrast: var(--wire-color-warning-contrast);
+    }
+
+    .wire-stats-bar[data-color="danger"] {
+      --stats-accent: var(--wire-color-danger);
+      --stats-contrast: var(--wire-color-danger-contrast);
+    }
+
+    .wire-stats-bar__inner {
+      width: min(calc(100% - 2rem), 80rem);
+      margin-inline: auto;
+    }
+
+    .wire-stats-bar[data-max-width="compact"] .wire-stats-bar__inner {
+      width: min(calc(100% - 2rem), 64rem);
+    }
+
+    .wire-stats-bar[data-max-width="lg"] .wire-stats-bar__inner {
+      width: min(calc(100% - 2rem), 72rem);
+    }
+
+    .wire-stats-bar[data-max-width="wide"] .wire-stats-bar__inner,
+    .wire-stats-bar[data-max-width="2xl"] .wire-stats-bar__inner {
+      width: min(calc(100% - 2rem), 90rem);
+    }
+
+    .wire-stats-bar[data-max-width="full"] .wire-stats-bar__inner {
+      width: 100%;
+      max-width: none;
+    }
+
+    .wire-stats-bar__surface {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      overflow: hidden;
+      background:
+        linear-gradient(
+          135deg,
+          color-mix(in srgb, var(--stats-accent) 7%, transparent),
+          transparent 42%
+        ),
+        var(--wire-color-surface-raised);
+      border: 1px solid var(--stats-border);
+      border-radius: 1.25rem;
+      box-shadow:
+        0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
+        0 18px 48px color-mix(in srgb, black 16%, transparent);
+    }
+
+    .wire-stats-bar[data-variant="default"] .wire-stats-bar__surface {
+      background: var(--wire-color-surface);
+      box-shadow: none;
+    }
+
+    .wire-stats-bar[data-variant="soft"] .wire-stats-bar__surface {
+      background:
+        linear-gradient(135deg, var(--stats-soft), transparent 58%),
+        var(--wire-color-surface-raised);
+      box-shadow: none;
+    }
+
+    .wire-stats-bar[data-variant="outline"] .wire-stats-bar__surface {
+      background: transparent;
+      box-shadow: none;
+    }
+
+    .wire-stats-bar[data-variant="minimal"] .wire-stats-bar__surface {
+      background: transparent;
+      border-color: transparent;
+      border-radius: 0;
+      box-shadow: none;
+    }
+
+    .wire-stats-bar[data-variant="solid"] .wire-stats-bar__surface {
+      color: var(--stats-contrast);
+      background:
+        linear-gradient(135deg, color-mix(in srgb, white 8%, transparent), transparent 52%),
+        var(--stats-accent);
+      border-color: color-mix(in srgb, white 24%, transparent);
+      box-shadow: 0 20px 56px color-mix(in srgb, var(--stats-accent) 28%, transparent);
+    }
+
+    .wire-stats-bar__item {
+      --item-accent: var(--stats-accent);
+
+      position: relative;
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      align-items: start;
+      gap: 1rem;
+      min-width: 0;
+      padding: 1.5rem;
+      transition:
+        background-color 180ms ease,
+        transform 180ms ease;
+    }
+
+    .wire-stats-bar[data-compact="true"] .wire-stats-bar__item {
+      padding: 1.15rem 1.25rem;
+    }
+
+    .wire-stats-bar[data-size="sm"] .wire-stats-bar__item {
+      padding: 1rem 1.1rem;
+    }
+
+    .wire-stats-bar[data-size="lg"] .wire-stats-bar__item {
+      padding: 1.8rem;
+    }
+
+    .wire-stats-bar__item[data-color="secondary"] {
+      --item-accent: var(--wire-color-secondary);
+    }
+
+    .wire-stats-bar__item[data-color="info"] {
+      --item-accent: var(--wire-color-info);
+    }
+
+    .wire-stats-bar__item[data-color="success"] {
+      --item-accent: var(--wire-color-success);
+    }
+
+    .wire-stats-bar__item[data-color="warning"] {
+      --item-accent: var(--wire-color-warning);
+    }
+
+    .wire-stats-bar__item[data-color="danger"] {
+      --item-accent: var(--wire-color-danger);
+    }
+
+    .wire-stats-bar__item:hover {
+      background: color-mix(in srgb, var(--item-accent) 6%, transparent);
+    }
+
+    .wire-stats-bar[data-variant="solid"] .wire-stats-bar__item:hover {
+      background: color-mix(in srgb, white 8%, transparent);
+    }
+
+    .wire-stats-bar__content {
+      min-width: 0;
+    }
+
+    .wire-stats-bar__label {
+      margin: 0;
+      color: var(--wire-color-text-muted);
+      font-size: 0.78rem;
+      font-weight: 600;
+      line-height: 1.4;
+      letter-spacing: 0.01em;
+    }
+
+    .wire-stats-bar__value-row {
+      display: flex;
+      align-items: baseline;
+      gap: 0.25rem;
+      margin-top: 0.45rem;
+    }
+
+    .wire-stats-bar__value {
+      margin: 0;
+      color: var(--wire-color-text);
+      font-size: clamp(1.75rem, 2.4vw, 2.35rem);
+      font-weight: 650;
+      line-height: 1;
+      letter-spacing: -0.035em;
+    }
+
+    .wire-stats-bar[data-compact="true"] .wire-stats-bar__value {
+      font-size: clamp(1.45rem, 2vw, 1.9rem);
+    }
+
+    .wire-stats-bar__suffix {
+      color: var(--item-accent);
+      font-size: 0.95rem;
+      font-weight: 700;
+    }
+
+    .wire-stats-bar__description {
+      max-width: 30rem;
+      margin: 0.7rem 0 0;
+      color: var(--wire-color-text-muted);
+      font-size: 0.78rem;
+      line-height: 1.55;
+    }
+
+    .wire-stats-bar[data-compact="true"] .wire-stats-bar__description {
+      margin-top: 0.55rem;
+      font-size: 0.73rem;
+    }
+
+    .wire-stats-bar__icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 2.65rem;
+      height: 2.65rem;
+      color: var(--item-accent);
+      background: color-mix(in srgb, var(--item-accent) 11%, transparent);
+      border-radius: 0.85rem;
+    }
+
+    .wire-stats-bar__icon > span {
+      width: 1.2rem;
+      height: 1.2rem;
+    }
+
+    .wire-stats-bar[data-compact="true"] .wire-stats-bar__icon {
+      width: 2.35rem;
+      height: 2.35rem;
+      border-radius: 0.75rem;
+    }
+
+    .wire-stats-bar__trend {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.3rem;
+      width: fit-content;
+      margin-top: 0.7rem;
+      padding: 0.25rem 0.5rem;
+      color: var(--wire-color-text-muted);
+      font-size: 0.7rem;
+      line-height: 1;
+      background: color-mix(in srgb, var(--wire-color-text) 5%, transparent);
+      border-radius: 999px;
+    }
+
+    .wire-stats-bar__trend[data-direction="up"] {
+      color: var(--wire-color-success);
+    }
+
+    .wire-stats-bar__trend[data-direction="down"] {
+      color: var(--wire-color-danger);
+    }
+
+    .wire-stats-bar__trend-icon {
+      width: 0.8rem;
+      height: 0.8rem;
+    }
+
+    .wire-stats-bar__trend-value {
+      font-weight: 700;
+    }
+
+    .wire-stats-bar__trend-label {
+      opacity: 0.8;
+    }
+
+    .wire-stats-bar[data-variant="solid"] .wire-stats-bar__label,
+    .wire-stats-bar[data-variant="solid"] .wire-stats-bar__description,
+    .wire-stats-bar[data-variant="solid"] .wire-stats-bar__value,
+    .wire-stats-bar[data-variant="solid"] .wire-stats-bar__suffix {
+      color: var(--stats-contrast);
+    }
+
+    .wire-stats-bar[data-variant="solid"] .wire-stats-bar__label,
+    .wire-stats-bar[data-variant="solid"] .wire-stats-bar__description {
+      opacity: 0.78;
+    }
+
+    .wire-stats-bar[data-variant="solid"] .wire-stats-bar__icon {
+      color: var(--stats-contrast);
+      background: color-mix(in srgb, white 13%, transparent);
+    }
+
+    .wire-stats-bar[data-dividers="true"] .wire-stats-bar__item + .wire-stats-bar__item {
+      border-top: 1px solid var(--wire-color-border);
+    }
+
+    .wire-stats-bar[data-variant="solid"][data-dividers="true"]
+      .wire-stats-bar__item + .wire-stats-bar__item {
+      border-color: color-mix(in srgb, white 18%, transparent);
+    }
+
+    @media (min-width: 640px) {
+      .wire-stats-bar__surface {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+
+      .wire-stats-bar[data-columns="1"] .wire-stats-bar__surface {
+        grid-template-columns: minmax(0, 1fr);
+      }
+
+      .wire-stats-bar[data-dividers="true"] .wire-stats-bar__item {
+        border-top: 0;
+      }
+
+      .wire-stats-bar[data-dividers="true"] .wire-stats-bar__item:nth-child(even) {
+        border-left: 1px solid var(--wire-color-border);
+      }
+
+      .wire-stats-bar[data-dividers="true"] .wire-stats-bar__item:nth-child(n + 3) {
+        border-top: 1px solid var(--wire-color-border);
+      }
+
+      .wire-stats-bar[data-variant="solid"][data-dividers="true"]
+        .wire-stats-bar__item:nth-child(even),
+      .wire-stats-bar[data-variant="solid"][data-dividers="true"]
+        .wire-stats-bar__item:nth-child(n + 3) {
+        border-color: color-mix(in srgb, white 18%, transparent);
+      }
+    }
+
+    @media (min-width: 1024px) {
+      .wire-stats-bar[data-columns="1"] .wire-stats-bar__surface {
+        grid-template-columns: minmax(0, 1fr);
+      }
+
+      .wire-stats-bar[data-columns="2"] .wire-stats-bar__surface {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+
+      .wire-stats-bar[data-columns="3"] .wire-stats-bar__surface {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+
+      .wire-stats-bar[data-columns="4"] .wire-stats-bar__surface {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+      }
+
+      .wire-stats-bar[data-columns="5"] .wire-stats-bar__surface {
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+      }
+
+      .wire-stats-bar[data-columns="6"] .wire-stats-bar__surface {
+        grid-template-columns: repeat(6, minmax(0, 1fr));
+      }
+
+      .wire-stats-bar[data-dividers="true"] .wire-stats-bar__item,
+      .wire-stats-bar[data-dividers="true"] .wire-stats-bar__item:nth-child(even),
+      .wire-stats-bar[data-dividers="true"] .wire-stats-bar__item:nth-child(n + 3) {
+        border-top: 0;
+        border-left: 1px solid var(--wire-color-border);
+      }
+
+      .wire-stats-bar[data-dividers="true"] .wire-stats-bar__item:first-child {
+        border-left: 0;
+      }
+
+      .wire-stats-bar[data-variant="solid"][data-dividers="true"] .wire-stats-bar__item {
+        border-color: color-mix(in srgb, white 18%, transparent);
+      }
+    }
+
+    @media (max-width: 639px) {
+      .wire-stats-bar[data-max-width="full"] .wire-stats-bar__surface {
+        border-inline: 0;
+        border-radius: 0;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .wire-stats-bar__item {
+        transition: none;
+      }
+    }
   }
 }
diff --git a/packages/ui/components/tooltip.wrn b/packages/ui/components/tooltip.wrn
index 240da14c..6f7714aa 100644
--- a/packages/ui/components/tooltip.wrn
+++ b/packages/ui/components/tooltip.wrn
@@ -1,21 +1,333 @@
 component Tooltip {
   props {
+    @event toggle = function
     @event open = function
     @event close = function
+
+    id = ""
+    open = false
+    defaultOpen = false
+    title = ""
+    description = ""
+    content = "Tooltip"
+    trigger = "hover"
+    placement = "top"
     size = "default"
     color = "primary"
-    title = "Tooltip"
-    description = ""
-    open = false
-    placement = "bottom"
-    closeLabel = "Close"
+    variant = "dark"
+    maxWidth = "18rem"
+    offset = 10
+    showArrow = true
+    interactive = false
+    disabled = false
     class = ""
   }
+
+  state visible = defaultOpen
+
+  functions {
+    function isOpen() {
+      return open || visible
+    }
+
+    function showTooltip(reason, sourceEvent) {
+      if (disabled || trigger === "manual") {
+        return
+      }
+      visible = true
+      $emit("open", { reason: reason, sourceEvent: sourceEvent })
+      $emit("toggle", { open: true, reason: reason, sourceEvent: sourceEvent })
+    }
+
+    function hideTooltip(reason, sourceEvent) {
+      if (trigger === "manual") {
+        return
+      }
+      visible = false
+      $emit("close", { reason: reason, sourceEvent: sourceEvent })
+      $emit("toggle", { open: false, reason: reason, sourceEvent: sourceEvent })
+    }
+
+    function toggleTooltip(sourceEvent) {
+      if (isOpen()) {
+        hideTooltip("click", sourceEvent)
+      } else {
+        showTooltip("click", sourceEvent)
+      }
+    }
+
+    function handleKeydown(sourceEvent) {
+      if (sourceEvent.key === "Escape") {
+        sourceEvent.preventDefault()
+        hideTooltip("escape", sourceEvent)
+      }
+    }
+  }
+
   view {
-    <div data-show="{open}" class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--tooltip wire-next--placement-{placement} {class}" role="region" aria-modal="false" aria-label="{title}">
-      <header><strong>{title}</strong><button type="button" aria-label="{closeLabel}">×</button></header>
-      {#if description}<p>{description}</p>{/if}
-      <slot />
-    </div>
+    <span
+      {...attrs}
+      data-ui-component="Tooltip"
+      data-open='{open || visible ? "true" : "false"}'
+      data-trigger='{trigger}'
+      data-placement='{placement}'
+      data-size='{size}'
+      data-color='{color}'
+      data-variant='{variant}'
+      data-interactive='{interactive ? "true" : "false"}'
+      class='wire-tooltip {class}'
+      style='--wire-tooltip-max-width:{maxWidth};--wire-tooltip-offset:{offset}px;'
+      @mouseenter='if (trigger === "hover" || trigger === "both") { showTooltip("hover", event) }'
+      @mouseleave='if (trigger === "hover" || trigger === "both") { hideTooltip("hover", event) }'
+      @focusin='if (trigger === "focus" || trigger === "hover" || trigger === "both") { showTooltip("focus", event) }'
+      @focusout='if (trigger === "focus" || trigger === "hover" || trigger === "both") { hideTooltip("focus", event) }'
+      @keydown='handleKeydown(event)'
+    >
+      <span
+        class="wire-tooltip__trigger"
+        tabindex='{disabled ? "-1" : "0"}'
+        aria-describedby='{(open || visible) && id ? id : ""}'
+        @click='if (trigger === "click" || trigger === "both") { toggleTooltip(event) }'
+      >
+        <slot name="trigger"></slot>
+      </span>
+
+      <span
+        id='{id}'
+        class="wire-tooltip__content"
+        data-show='{open || visible}'
+        role="tooltip"
+      >
+        {#if showArrow}
+          <span class="wire-tooltip__arrow" aria-hidden="true"></span>
+        {/if}
+
+        {#if title}
+          <strong>{title}</strong>
+        {/if}
+
+        {#if description}
+          <span class="wire-tooltip__description">{description}</span>
+        {:else if content}
+          <span class="wire-tooltip__description">{content}</span>
+        {/if}
+
+        <slot></slot>
+      </span>
+    </span>
+  }
+
+  style {
+    .wire-tooltip {
+      --tooltip-accent: var(--wire-color-primary);
+      --tooltip-soft: var(--wire-color-primary-soft);
+      position: relative;
+      display: inline-flex;
+      max-width: 100%;
+    }
+
+    .wire-tooltip[data-color="secondary"] {
+      --tooltip-accent: var(--wire-color-secondary);
+      --tooltip-soft: var(--wire-color-secondary-soft);
+    }
+
+    .wire-tooltip[data-color="info"] {
+      --tooltip-accent: var(--wire-color-info);
+      --tooltip-soft: var(--wire-color-info-soft);
+    }
+
+    .wire-tooltip[data-color="success"] {
+      --tooltip-accent: var(--wire-color-success);
+      --tooltip-soft: var(--wire-color-success-soft);
+    }
+
+    .wire-tooltip[data-color="warning"] {
+      --tooltip-accent: var(--wire-color-warning);
+      --tooltip-soft: var(--wire-color-warning-soft);
+    }
+
+    .wire-tooltip[data-color="danger"] {
+      --tooltip-accent: var(--wire-color-danger);
+      --tooltip-soft: var(--wire-color-danger-soft);
+    }
+
+    .wire-tooltip__trigger {
+      display: inline-flex;
+      max-width: 100%;
+      outline: none;
+    }
+
+    .wire-tooltip__trigger:focus-visible {
+      border-radius: 0.4rem;
+      outline: 2px solid var(--wire-color-focus);
+      outline-offset: 3px;
+    }
+
+    .wire-tooltip__content {
+      position: absolute;
+      z-index: 1300;
+      left: 50%;
+      bottom: calc(100% + var(--wire-tooltip-offset));
+      display: grid;
+      gap: 0.22rem;
+      width: max-content;
+      max-width: min(var(--wire-tooltip-max-width), calc(100vw - 1rem));
+      padding: 0.58rem 0.72rem;
+      color: white;
+      background: color-mix(in srgb, black 88%, var(--tooltip-accent) 12%);
+      border: 1px solid color-mix(in srgb, white 12%, transparent);
+      border-radius: 0.65rem;
+      box-shadow: 0 14px 38px color-mix(in srgb, black 28%, transparent);
+      font-size: 0.73rem;
+      line-height: 1.45;
+      text-align: left;
+      transform: translateX(-50%);
+      pointer-events: none;
+    }
+
+    .wire-tooltip[data-interactive="true"] .wire-tooltip__content {
+      pointer-events: auto;
+    }
+
+    .wire-tooltip[data-variant="soft"] .wire-tooltip__content {
+      color: var(--wire-color-text);
+      background: var(--tooltip-soft);
+      border-color: color-mix(in srgb, var(--tooltip-accent) 24%, var(--wire-color-border));
+    }
+
+    .wire-tooltip[data-variant="light"] .wire-tooltip__content {
+      color: var(--wire-color-text);
+      background: var(--wire-color-surface-raised);
+      border-color: var(--wire-color-border);
+    }
+
+    .wire-tooltip[data-variant="solid"] .wire-tooltip__content {
+      color: var(--wire-color-primary-contrast);
+      background: var(--tooltip-accent);
+      border-color: color-mix(in srgb, white 18%, transparent);
+    }
+
+    .wire-tooltip__content strong {
+      font-size: 0.75rem;
+      font-weight: 650;
+    }
+
+    .wire-tooltip__description {
+      color: color-mix(in srgb, currentColor 82%, transparent);
+    }
+
+    .wire-tooltip__arrow {
+      position: absolute;
+      left: 50%;
+      bottom: -0.32rem;
+      width: 0.62rem;
+      height: 0.62rem;
+      background: inherit;
+      border-right: 1px solid color-mix(in srgb, white 10%, transparent);
+      border-bottom: 1px solid color-mix(in srgb, white 10%, transparent);
+      transform: translateX(-50%) rotate(45deg);
+    }
+
+    .wire-tooltip[data-placement="bottom"] .wire-tooltip__content {
+      top: calc(100% + var(--wire-tooltip-offset));
+      bottom: auto;
+    }
+
+    .wire-tooltip[data-placement="bottom"] .wire-tooltip__arrow {
+      top: -0.32rem;
+      bottom: auto;
+      transform: translateX(-50%) rotate(225deg);
+    }
+
+    .wire-tooltip[data-placement="left"] .wire-tooltip__content {
+      top: 50%;
+      right: calc(100% + var(--wire-tooltip-offset));
+      bottom: auto;
+      left: auto;
+      transform: translateY(-50%);
+    }
+
+    .wire-tooltip[data-placement="left"] .wire-tooltip__arrow {
+      top: 50%;
+      right: -0.32rem;
+      bottom: auto;
+      left: auto;
+      transform: translateY(-50%) rotate(-45deg);
+    }
+
+    .wire-tooltip[data-placement="right"] .wire-tooltip__content {
+      top: 50%;
+      bottom: auto;
+      left: calc(100% + var(--wire-tooltip-offset));
+      transform: translateY(-50%);
+    }
+
+    .wire-tooltip[data-placement="right"] .wire-tooltip__arrow {
+      top: 50%;
+      bottom: auto;
+      left: -0.32rem;
+      transform: translateY(-50%) rotate(135deg);
+    }
+
+    .wire-tooltip[data-placement="top-start"] .wire-tooltip__content,
+    .wire-tooltip[data-placement="bottom-start"] .wire-tooltip__content {
+      left: 0;
+      transform: none;
+    }
+
+    .wire-tooltip[data-placement="top-start"] .wire-tooltip__arrow,
+    .wire-tooltip[data-placement="bottom-start"] .wire-tooltip__arrow {
+      left: 1rem;
+      transform: rotate(45deg);
+    }
+
+    .wire-tooltip[data-placement="bottom-start"] .wire-tooltip__arrow {
+      transform: rotate(225deg);
+    }
+
+    .wire-tooltip[data-placement="top-end"] .wire-tooltip__content,
+    .wire-tooltip[data-placement="bottom-end"] .wire-tooltip__content {
+      right: 0;
+      left: auto;
+      transform: none;
+    }
+
+    .wire-tooltip[data-placement="top-end"] .wire-tooltip__arrow,
+    .wire-tooltip[data-placement="bottom-end"] .wire-tooltip__arrow {
+      right: 1rem;
+      left: auto;
+      transform: rotate(45deg);
+    }
+
+    .wire-tooltip[data-placement="bottom-end"] .wire-tooltip__arrow {
+      transform: rotate(225deg);
+    }
+
+    .wire-tooltip[data-size="sm"] .wire-tooltip__content {
+      padding: 0.45rem 0.58rem;
+      font-size: 0.68rem;
+    }
+
+    .wire-tooltip[data-size="lg"] .wire-tooltip__content {
+      padding: 0.72rem 0.85rem;
+      font-size: 0.8rem;
+    }
+
+    @media (max-width: 639px) {
+      .wire-tooltip__content {
+        position: fixed;
+        right: 0.75rem;
+        bottom: 0.75rem;
+        left: 0.75rem;
+        top: auto;
+        width: auto;
+        max-width: none;
+        transform: none;
+      }
+
+      .wire-tooltip__arrow {
+        display: none;
+      }
+    }
   }
 }
diff --git a/packages/ui/test/ui.test.ts b/packages/ui/test/ui.test.ts
index 2d991cfd..56a4b86e 100644
--- a/packages/ui/test/ui.test.ts
+++ b/packages/ui/test/ui.test.ts
@@ -80,11 +80,25 @@ test("component reference contains only explicitly declared public events", () =
   ) as { components: Array<{ name: string; events: string[] }> };
 
   for (const component of reference.components) {
-    const source = readFileSync(uiComponentPath(component.name), "utf8");
+    const componentPath = uiComponentPath(component.name);
+    const source = readFileSync(componentPath, "utf8");
+
     const declaredEvents = [
       ...source.matchAll(/@event\s+([A-Za-z][A-Za-z0-9_]*)\s*=\s*function/g),
     ].map((match) => match[1]);
-    expect(component.events).toEqual([...new Set(declaredEvents)]);
+
+    const expectedEvents = [...new Set(declaredEvents)];
+
+    if (JSON.stringify(component.events) !== JSON.stringify(expectedEvents)) {
+      console.error("UI EVENT REFERENCE MISMATCH", {
+        component: component.name,
+        componentPath,
+        referenceEvents: component.events,
+        declaredEvents: expectedEvents,
+      });
+    }
+
+    expect(component.events).toEqual(expectedEvents);
   }
 });
 
diff --git a/patch-overlay-showcase.mjs b/patch-overlay-showcase.mjs
new file mode 100644
index 00000000..b7c600c3
--- /dev/null
+++ b/patch-overlay-showcase.mjs
@@ -0,0 +1,95 @@
+import {
+  copyFileSync,
+  existsSync,
+  mkdirSync,
+  readFileSync,
+  rmSync,
+  writeFileSync,
+} from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const scriptDir = dirname(fileURLToPath(import.meta.url));
+const root = resolve(process.argv[2] || process.cwd());
+const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
+const backupRoot = join(root, ".wrnexus", `overlay-reactivity-backup-${timestamp}`);
+mkdirSync(backupRoot, { recursive: true });
+
+function backup(path) {
+  if (!existsSync(path)) return;
+  const relative = path.slice(root.length).replace(/^[\\/]+/, "");
+  const target = join(backupRoot, relative);
+  mkdirSync(dirname(target), { recursive: true });
+  copyFileSync(path, target);
+}
+
+function writeFromPack(sourceName, targetName = sourceName) {
+  const source = join(scriptDir, "packages", "ui", "components", sourceName);
+  const target = join(root, "packages", "ui", "components", targetName);
+  if (!existsSync(source)) throw new Error(`Missing packed component: ${source}`);
+  backup(target);
+  mkdirSync(dirname(target), { recursive: true });
+  copyFileSync(source, target);
+  console.log(`Updated ${target}`);
+}
+
+for (const name of ["ContextMenu.wrn", "Drawer.wrn", "Dropdown.wrn", "Modal.wrn", "Popover.wrn"]) {
+  writeFromPack(name);
+}
+
+const tooltipUpper = join(root, "packages", "ui", "components", "Tooltip.wrn");
+const tooltipLower = join(root, "packages", "ui", "components", "tooltip.wrn");
+const tooltipTargetName = existsSync(tooltipUpper) ? "Tooltip.wrn" : existsSync(tooltipLower) ? "tooltip.wrn" : "Tooltip.wrn";
+writeFromPack("Tooltip.wrn", tooltipTargetName);
+
+const generatorPath = join(root, "examples", "component-showcase", "scripts", "generate-showcase.mjs");
+if (!existsSync(generatorPath)) throw new Error(`Missing showcase generator: ${generatorPath}`);
+backup(generatorPath);
+let generator = readFileSync(generatorPath, "utf8");
+
+generator = generator.replaceAll(
+  "@${eventName}='console.log(event.detail)'",
+  "@${eventName}='console.log(event.type, event.detail || {})'",
+);
+
+// Keep interactive overlays uncontrolled in generated previews.
+if (!generator.includes("overlayVisibilityProps")) {
+  const booleanMarker = '  if (prop.type === "boolean") {';
+  const booleanIndex = generator.indexOf(booleanMarker);
+  if (booleanIndex >= 0) {
+    generator = generator.replace(
+      booleanMarker,
+      `${booleanMarker}\n    if (["ContextMenu", "Drawer", "Dropdown", "Modal", "Popover", "Tooltip"].includes(component.name) && ["open", "visible", "defaultopen"].includes(name)) return false;`,
+    );
+  }
+}
+writeFileSync(generatorPath, generator, "utf8");
+
+const testPath = join(root, "examples", "component-showcase", "test", "showcase.test.ts");
+if (existsSync(testPath)) {
+  backup(testPath);
+  let tests = readFileSync(testPath, "utf8");
+  tests = tests.replaceAll(
+    "@${event}='console.log(event.detail)'",
+    "@${event}='console.log(event.type, event.detail || {})'",
+  );
+  writeFileSync(testPath, tests, "utf8");
+}
+
+const uiTestPath = join(root, "packages", "ui", "test", "overlay-reactivity.test.ts");
+backup(uiTestPath);
+writeFileSync(
+  uiTestPath,
+  `import { expect, test } from "bun:test";\nimport { readFileSync } from "node:fs";\nimport { join } from "node:path";\n\nconst root = join(import.meta.dir, "..");\nconst files = [\n  "ContextMenu.wrn",\n  "Drawer.wrn",\n  "Dropdown.wrn",\n  "Modal.wrn",\n  "Popover.wrn",\n  "Tooltip.wrn",\n];\n\nfor (const file of files) {\n  test(\`\${file} binds overlay visibility directly to open or visible\`, () => {\n    const source = readFileSync(join(root, "components", file), "utf8");\n    expect(source).toContain("open || visible");\n    expect(source).not.toContain("data-show='{isOpen()}'");\n    expect(source).not.toContain("data-open='{isOpen()");\n  });\n}\n`,
+  "utf8",
+);
+
+for (const cachePath of [
+  join(root, "examples", "component-showcase", ".wrnexus"),
+  join(root, "examples", "component-showcase", "dist"),
+]) {
+  rmSync(cachePath, { recursive: true, force: true });
+}
+
+console.log(`Backup created at ${backupRoot}`);
+console.log("Overlay component visibility bindings and showcase event logging are updated.");
diff --git a/scripts/generate-ui-component-reference.mjs b/scripts/generate-ui-component-reference.mjs
index 4a34b9f9..261369f7 100644
--- a/scripts/generate-ui-component-reference.mjs
+++ b/scripts/generate-ui-component-reference.mjs
@@ -54,7 +54,7 @@ function words(name) {
   return name.replace(/([a-z0-9])([A-Z])/g, "$1 $2").toLowerCase();
 }
 
-const components = readdirSync(componentsDir)
+const sourceEntries = readdirSync(componentsDir)
   .filter((file) => file.endsWith(".wrn"))
   .map((file) => {
     const source = readFileSync(join(componentsDir, file), "utf8");
@@ -62,22 +62,35 @@ const components = readdirSync(componentsDir)
     if (!declaration) {
       throw new Error(`UI component source does not declare a component: ${file}`);
     }
-    const name = declaration[1];
+    return { file, source, name: declaration[1] };
+  });
+
+// Windows checkouts can temporarily contain legacy lowercase files beside the
+// canonical component source. Generate one public contract per declaration and
+// prefer the exact <ComponentName>.wrn filename when both exist.
+const sourceByName = new Map();
+for (const candidate of sourceEntries) {
+  const current = sourceByName.get(candidate.name);
+  const candidateCanonical = candidate.file === `${candidate.name}.wrn`;
+  const currentCanonical = current?.file === `${candidate.name}.wrn`;
+  if (!current || (candidateCanonical && !currentCanonical)) {
+    sourceByName.set(candidate.name, candidate);
+  }
+}
+
+const components = [...sourceByName.values()]
+  .map(({ file, source, name }) => {
     const entry = metadata.get(name);
     const slots = [...source.matchAll(/<slot(?:\s+name="([^"]+)")?/g)].map(
       (match) => match[1] ?? "default",
     );
-    const declaredEvents = [
+    const events = [
       ...new Set(
         [...source.matchAll(/@event\s+([A-Za-z][A-Za-z0-9_]*)\s*=\s*function/g)].map(
           (match) => match[1],
         ),
       ),
     ];
-    // Only `@event` declarations form the public component contract. Native
-    // handlers in a component's implementation are private wiring and must not
-    // leak into the generated consumer-facing reference.
-    const events = declaredEvents;
     return {
       name,
       mount: name,