From 358a520bc541476884cfc355d63999509df0d122 Mon Sep 17 00:00:00 2001 From: Ajay Ghanwat Date: Thu, 30 Jul 2026 21:29:25 +0530 Subject: [PATCH] release: WRNexusJS 0.5.14 --- .publish/ai/package.json | 2 +- .publish/authz/package.json | 2 +- .publish/cli/package.json | 26 +- .publish/compiler/package.json | 4 +- .publish/core/package.json | 2 +- .publish/csr/package.json | 4 +- .publish/db/package.json | 2 +- .publish/dev-server/package.json | 30 +- .publish/dev-toolbar/package.json | 2 +- .publish/encryption/package.json | 2 +- .publish/helpers/package.json | 4 +- .publish/i18n/package.json | 4 +- .publish/jwt/package.json | 2 +- .publish/mobile/package.json | 4 +- .publish/native/package.json | 2 +- .publish/oauth/package.json | 2 +- .publish/plugin/package.json | 4 +- .publish/pubsub/package.json | 2 +- .publish/queue/package.json | 2 +- .publish/reactive/package.json | 2 +- .publish/router/package.json | 6 +- .publish/ssr/package.json | 4 +- .publish/styles/package.json | 8 +- .publish/syntax/package.json | 2 +- .publish/test/package.json | 2 +- .publish/tracking/package.json | 2 +- .publish/ui/package.json | 4 +- .publish/uploader/package.json | 4 +- .publish/validation/package.json | 2 +- .../app/layouts/showcase.wrn | 12 +- .../component-showcase/app/pages/base.wrn | 16 +- .../app/pages/components/announcement-bar.wrn | 151 ++ .../app/pages/components/auth-form.wrn | 141 + .../pages/components/auth-split-layout.wrn | 257 ++ .../app/pages/components/back-to-top.wrn | 136 + .../app/pages/components/breadcrumb.wrn | 4 +- .../app/pages/components/card.wrn | 2 +- .../app/pages/components/checkbox.wrn | 6 +- .../app/pages/components/columns.wrn | 4 +- .../app/pages/components/container.wrn | 2 +- .../app/pages/components/ctasection.wrn | 160 ++ .../app/pages/components/divider.wrn | 2 +- .../app/pages/components/dropdown.wrn | 599 ++++- .../app/pages/components/feature-card.wrn | 151 ++ .../app/pages/components/feature-grid.wrn | 123 + .../pages/components/feature-icon-card.wrn | 150 ++ .../pages/components/file-upload-progress.wrn | 2 +- .../app/pages/components/footer.wrn | 667 +++++ .../app/pages/components/grid.wrn | 4 +- .../app/pages/components/hero-actions.wrn | 659 +++++ .../app/pages/components/hero.wrn | 1248 +++++++++ .../app/pages/components/image.wrn | 10 +- .../app/pages/components/legend-indicator.wrn | 2 +- .../app/pages/components/link.wrn | 12 +- .../app/pages/components/list.wrn | 10 +- .../app/pages/components/map.wrn | 8 +- .../components/marketing-section-header.wrn | 144 ++ .../app/pages/components/marquee.wrn | 8 +- .../app/pages/components/mega-menu.wrn | 2 +- .../app/pages/components/metric-card.wrn | 156 ++ .../app/pages/components/metric-grid.wrn | 660 +++++ .../app/pages/components/navbar.wrn | 853 +++++- .../app/pages/components/page-header.wrn | 706 +++++ .../app/pages/components/pagination.wrn | 2 +- .../app/pages/components/portal-dashboard.wrn | 2298 +++++++++++++++++ .../pages/components/preference-switcher.wrn | 136 + .../pages/components/public-page-shell.wrn | 127 + .../app/pages/components/scrollspy.wrn | 2 +- .../app/pages/components/search-box.wrn | 8 +- .../app/pages/components/section-header.wrn | 134 + .../app/pages/components/section.wrn | 125 + .../app/pages/components/sidebar.wrn | 23 +- .../app/pages/components/split-hero.wrn | 695 +++++ .../app/pages/components/stats-bar.wrn | 662 +++++ .../app/pages/components/tabs.wrn | 8 +- .../app/pages/components/text-link.wrn | 138 + .../app/pages/components/timeline.wrn | 10 +- .../app/pages/components/typography.wrn | 4 +- .../pages/existing-components-showcase.wrn | 76 - .../component-showcase/app/pages/forms.wrn | 18 +- .../component-showcase/app/pages/index.wrn | 12 +- .../component-showcase/app/pages/layout.wrn | 76 +- .../app/pages/navigation.wrn | 44 +- .../app/pages/new-components-showcase.wrn | 103 - .../component-showcase/app/pages/overlays.wrn | 4 +- examples/component-showcase/app/routes.gen.ts | 23 + packages/ai/package.json | 2 +- packages/auth/package.json | 2 +- packages/authz/package.json | 2 +- packages/captcha/package.json | 2 +- packages/cli/package.json | 2 +- packages/cli/src/update.ts | 16 + packages/compiler/package.json | 2 +- packages/core/package.json | 2 +- packages/csr/package.json | 2 +- packages/db/package.json | 2 +- packages/dev-server/package.json | 2 +- packages/dev-server/src/runtime.ts | 32 +- .../test/theme-accent-runtime.test.ts | 16 +- packages/dev-toolbar/package.json | 2 +- packages/encryption/package.json | 2 +- packages/helpers/package.json | 2 +- packages/i18n/package.json | 2 +- packages/jwt/package.json | 2 +- packages/mobile/package.json | 2 +- packages/native/package.json | 2 +- packages/oauth/package.json | 2 +- packages/plugin/package.json | 2 +- packages/pubsub/package.json | 2 +- packages/queue/package.json | 2 +- packages/reactive/package.json | 2 +- packages/router/package.json | 2 +- packages/ssr/package.json | 2 +- packages/styles/package.json | 2 +- packages/styles/test/theme-accent.test.ts | 20 + packages/syntax/package.json | 2 +- packages/test/package.json | 2 +- packages/tracking/package.json | 2 +- packages/ui/components/Footer.wrn | 26 +- packages/ui/package.json | 2 +- packages/uploader/package.json | 2 +- packages/validation/package.json | 2 +- update-package-versions.mjs | 2 +- 123 files changed, 11646 insertions(+), 461 deletions(-) create mode 100644 examples/component-showcase/app/pages/components/announcement-bar.wrn create mode 100644 examples/component-showcase/app/pages/components/auth-form.wrn create mode 100644 examples/component-showcase/app/pages/components/auth-split-layout.wrn create mode 100644 examples/component-showcase/app/pages/components/back-to-top.wrn create mode 100644 examples/component-showcase/app/pages/components/ctasection.wrn create mode 100644 examples/component-showcase/app/pages/components/feature-card.wrn create mode 100644 examples/component-showcase/app/pages/components/feature-grid.wrn create mode 100644 examples/component-showcase/app/pages/components/feature-icon-card.wrn create mode 100644 examples/component-showcase/app/pages/components/footer.wrn create mode 100644 examples/component-showcase/app/pages/components/hero-actions.wrn create mode 100644 examples/component-showcase/app/pages/components/hero.wrn create mode 100644 examples/component-showcase/app/pages/components/marketing-section-header.wrn create mode 100644 examples/component-showcase/app/pages/components/metric-card.wrn create mode 100644 examples/component-showcase/app/pages/components/metric-grid.wrn create mode 100644 examples/component-showcase/app/pages/components/page-header.wrn create mode 100644 examples/component-showcase/app/pages/components/portal-dashboard.wrn create mode 100644 examples/component-showcase/app/pages/components/preference-switcher.wrn create mode 100644 examples/component-showcase/app/pages/components/public-page-shell.wrn create mode 100644 examples/component-showcase/app/pages/components/section-header.wrn create mode 100644 examples/component-showcase/app/pages/components/section.wrn create mode 100644 examples/component-showcase/app/pages/components/split-hero.wrn create mode 100644 examples/component-showcase/app/pages/components/stats-bar.wrn create mode 100644 examples/component-showcase/app/pages/components/text-link.wrn delete mode 100644 examples/component-showcase/app/pages/existing-components-showcase.wrn delete mode 100644 examples/component-showcase/app/pages/new-components-showcase.wrn diff --git a/.publish/ai/package.json b/.publish/ai/package.json index d049dfac..ddcb3b39 100644 --- a/.publish/ai/package.json +++ b/.publish/ai/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/ai", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "Zero-dependency Claude (Anthropic) client for WrNexus apps.", "license": "MIT", diff --git a/.publish/authz/package.json b/.publish/authz/package.json index 198fc3d4..52f29cba 100644 --- a/.publish/authz/package.json +++ b/.publish/authz/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/authz", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/authz — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/cli/package.json b/.publish/cli/package.json index ce0ea079..c7958884 100644 --- a/.publish/cli/package.json +++ b/.publish/cli/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/cli", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/cli — part of the WrNexus framework.", "license": "MIT", @@ -28,18 +28,18 @@ "wrnexus": "./dist/index.js" }, "dependencies": { - "@wrnexus/core": "^0.5.13", - "@wrnexus/router": "^0.5.13", - "@wrnexus/csr": "^0.5.13", - "@wrnexus/compiler": "^0.5.13", - "@wrnexus/styles": "^0.5.13", - "@wrnexus/dev-server": "^0.5.13", - "@wrnexus/ui": "^0.5.13", - "@wrnexus/validation": "^0.5.13", - "@wrnexus/i18n": "^0.5.13", - "@wrnexus/db": "^0.5.13", - "@wrnexus/plugin": "^0.5.13", - "@wrnexus/syntax": "^0.5.13" + "@wrnexus/core": "^0.5.14", + "@wrnexus/router": "^0.5.14", + "@wrnexus/csr": "^0.5.14", + "@wrnexus/compiler": "^0.5.14", + "@wrnexus/styles": "^0.5.14", + "@wrnexus/dev-server": "^0.5.14", + "@wrnexus/ui": "^0.5.14", + "@wrnexus/validation": "^0.5.14", + "@wrnexus/i18n": "^0.5.14", + "@wrnexus/db": "^0.5.14", + "@wrnexus/plugin": "^0.5.14", + "@wrnexus/syntax": "^0.5.14" }, "files": [ "dist" diff --git a/.publish/compiler/package.json b/.publish/compiler/package.json index 06219649..af9a4871 100644 --- a/.publish/compiler/package.json +++ b/.publish/compiler/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/compiler", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/compiler — part of the WrNexus framework.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/syntax": "^0.5.13" + "@wrnexus/syntax": "^0.5.14" }, "files": [ "dist" diff --git a/.publish/core/package.json b/.publish/core/package.json index 86d12ece..1e57b73d 100644 --- a/.publish/core/package.json +++ b/.publish/core/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/core", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/core — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/csr/package.json b/.publish/csr/package.json index 9c548432..3af0ff63 100644 --- a/.publish/csr/package.json +++ b/.publish/csr/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/csr", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/csr — part of the WrNexus framework.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/core": "^0.5.13" + "@wrnexus/core": "^0.5.14" }, "files": [ "dist" diff --git a/.publish/db/package.json b/.publish/db/package.json index 7a7ce496..d873c228 100644 --- a/.publish/db/package.json +++ b/.publish/db/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/db", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/db — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/dev-server/package.json b/.publish/dev-server/package.json index 062fab9a..f10a8da5 100644 --- a/.publish/dev-server/package.json +++ b/.publish/dev-server/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/dev-server", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/dev-server — part of the WrNexus framework.", "license": "MIT", @@ -25,20 +25,20 @@ } }, "dependencies": { - "@wrnexus/core": "^0.5.13", - "@wrnexus/dev-toolbar": "^0.5.13", - "@wrnexus/router": "^0.5.13", - "@wrnexus/ssr": "^0.5.13", - "@wrnexus/csr": "^0.5.13", - "@wrnexus/compiler": "^0.5.13", - "@wrnexus/styles": "^0.5.13", - "@wrnexus/ui": "^0.5.13", - "@wrnexus/validation": "^0.5.13", - "@wrnexus/i18n": "^0.5.13", - "@wrnexus/db": "^0.5.13", - "@wrnexus/pubsub": "^0.5.13", - "@wrnexus/uploader": "^0.5.13", - "@wrnexus/plugin": "^0.5.13" + "@wrnexus/core": "^0.5.14", + "@wrnexus/dev-toolbar": "^0.5.14", + "@wrnexus/router": "^0.5.14", + "@wrnexus/ssr": "^0.5.14", + "@wrnexus/csr": "^0.5.14", + "@wrnexus/compiler": "^0.5.14", + "@wrnexus/styles": "^0.5.14", + "@wrnexus/ui": "^0.5.14", + "@wrnexus/validation": "^0.5.14", + "@wrnexus/i18n": "^0.5.14", + "@wrnexus/db": "^0.5.14", + "@wrnexus/pubsub": "^0.5.14", + "@wrnexus/uploader": "^0.5.14", + "@wrnexus/plugin": "^0.5.14" }, "files": [ "dist" diff --git a/.publish/dev-toolbar/package.json b/.publish/dev-toolbar/package.json index 506d5824..cf238ae6 100644 --- a/.publish/dev-toolbar/package.json +++ b/.publish/dev-toolbar/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/dev-toolbar", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/dev-toolbar — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/encryption/package.json b/.publish/encryption/package.json index 28bba897..d44edbaf 100644 --- a/.publish/encryption/package.json +++ b/.publish/encryption/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/encryption", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/encryption — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/helpers/package.json b/.publish/helpers/package.json index 44552f0b..3678f311 100644 --- a/.publish/helpers/package.json +++ b/.publish/helpers/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/helpers", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "Safe convenience helpers for WrNexus request contexts and common application flows.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/core": "^0.5.13" + "@wrnexus/core": "^0.5.14" }, "files": [ "dist" diff --git a/.publish/i18n/package.json b/.publish/i18n/package.json index db94ceb0..ca5911c5 100644 --- a/.publish/i18n/package.json +++ b/.publish/i18n/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/i18n", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/i18n — part of the WrNexus framework.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/core": "^0.5.13" + "@wrnexus/core": "^0.5.14" }, "files": [ "dist" diff --git a/.publish/jwt/package.json b/.publish/jwt/package.json index 8f81ee5f..ecdb3e19 100644 --- a/.publish/jwt/package.json +++ b/.publish/jwt/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/jwt", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/jwt — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/mobile/package.json b/.publish/mobile/package.json index 7d27e26f..ffadccd7 100644 --- a/.publish/mobile/package.json +++ b/.publish/mobile/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/mobile", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/mobile — part of the WrNexus framework.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/native": "^0.5.13" + "@wrnexus/native": "^0.5.14" }, "files": [ "dist" diff --git a/.publish/native/package.json b/.publish/native/package.json index 18997acd..22d0e31a 100644 --- a/.publish/native/package.json +++ b/.publish/native/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/native", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/native — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/oauth/package.json b/.publish/oauth/package.json index 2ca90ff6..d21c1ead 100644 --- a/.publish/oauth/package.json +++ b/.publish/oauth/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/oauth", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/oauth — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/plugin/package.json b/.publish/plugin/package.json index d07571aa..affd75dd 100644 --- a/.publish/plugin/package.json +++ b/.publish/plugin/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/plugin", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/plugin — part of the WrNexus framework.", "license": "MIT", @@ -33,7 +33,7 @@ } }, "dependencies": { - "@wrnexus/syntax": "^0.5.13" + "@wrnexus/syntax": "^0.5.14" }, "files": [ "dist" diff --git a/.publish/pubsub/package.json b/.publish/pubsub/package.json index 700898c2..f25f0d6a 100644 --- a/.publish/pubsub/package.json +++ b/.publish/pubsub/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/pubsub", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/pubsub — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/queue/package.json b/.publish/queue/package.json index b0deb964..b8913bf7 100644 --- a/.publish/queue/package.json +++ b/.publish/queue/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/queue", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/queue — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/reactive/package.json b/.publish/reactive/package.json index 7ad54c00..b20c8b55 100644 --- a/.publish/reactive/package.json +++ b/.publish/reactive/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/reactive", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/reactive — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/router/package.json b/.publish/router/package.json index 50ac2e80..d74e1e63 100644 --- a/.publish/router/package.json +++ b/.publish/router/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/router", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/router — part of the WrNexus framework.", "license": "MIT", @@ -21,8 +21,8 @@ } }, "dependencies": { - "@wrnexus/compiler": "^0.5.13", - "@wrnexus/core": "^0.5.13" + "@wrnexus/compiler": "^0.5.14", + "@wrnexus/core": "^0.5.14" }, "files": [ "dist" diff --git a/.publish/ssr/package.json b/.publish/ssr/package.json index 3e0e99fd..ffe959e5 100644 --- a/.publish/ssr/package.json +++ b/.publish/ssr/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/ssr", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/ssr — part of the WrNexus framework.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/core": "^0.5.13" + "@wrnexus/core": "^0.5.14" }, "files": [ "dist" diff --git a/.publish/styles/package.json b/.publish/styles/package.json index be937e4d..f711b152 100644 --- a/.publish/styles/package.json +++ b/.publish/styles/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/styles", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/styles — part of the WrNexus framework.", "license": "MIT", @@ -21,9 +21,9 @@ } }, "dependencies": { - "@wrnexus/uploader": "^0.5.13", - "@wrnexus/core": "^0.5.13", - "@wrnexus/plugin": "^0.5.13" + "@wrnexus/uploader": "^0.5.14", + "@wrnexus/core": "^0.5.14", + "@wrnexus/plugin": "^0.5.14" }, "files": [ "dist" diff --git a/.publish/syntax/package.json b/.publish/syntax/package.json index d2ec6a8e..87650176 100644 --- a/.publish/syntax/package.json +++ b/.publish/syntax/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/syntax", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/syntax — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/test/package.json b/.publish/test/package.json index 4eab648d..26df4f29 100644 --- a/.publish/test/package.json +++ b/.publish/test/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/test", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/test — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/tracking/package.json b/.publish/tracking/package.json index ef28a86a..f3e6b336 100644 --- a/.publish/tracking/package.json +++ b/.publish/tracking/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/tracking", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/tracking — part of the WrNexus framework.", "license": "MIT", diff --git a/.publish/ui/package.json b/.publish/ui/package.json index 78c2389b..43ecfe42 100644 --- a/.publish/ui/package.json +++ b/.publish/ui/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/ui", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/ui — part of the WrNexus framework.", "license": "MIT", @@ -26,7 +26,7 @@ "./ui.css": "./ui.css" }, "dependencies": { - "@wrnexus/core": "^0.5.13" + "@wrnexus/core": "^0.5.14" }, "files": [ "dist", diff --git a/.publish/uploader/package.json b/.publish/uploader/package.json index 30fc8ee6..d9635dee 100644 --- a/.publish/uploader/package.json +++ b/.publish/uploader/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/uploader", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/uploader — part of the WrNexus framework.", "license": "MIT", @@ -21,7 +21,7 @@ } }, "dependencies": { - "@wrnexus/core": "^0.5.13" + "@wrnexus/core": "^0.5.14" }, "files": [ "dist" diff --git a/.publish/validation/package.json b/.publish/validation/package.json index e0729e18..2016fba2 100644 --- a/.publish/validation/package.json +++ b/.publish/validation/package.json @@ -1,6 +1,6 @@ { "name": "@wrnexus/validation", - "version": "0.5.13", + "version": "0.5.14", "type": "module", "description": "@wrnexus/validation — part of the WrNexus framework.", "license": "MIT", diff --git a/examples/component-showcase/app/layouts/showcase.wrn b/examples/component-showcase/app/layouts/showcase.wrn index ff353cf5..8bddc782 100644 --- a/examples/component-showcase/app/layouts/showcase.wrn +++ b/examples/component-showcase/app/layouts/showcase.wrn @@ -34,11 +34,15 @@ layout Showcase {
Base -
AccordionCompleteAlertCompleteAvatarCompleteAvatar GroupCompleteBadgeCompleteBlockquoteCompleteButtonCompleteButton GroupCompleteCardCompleteCarouselCompleteChat BubbleCompleteCollapseCompleteDate PickerCompleteDevice FrameCompleteFile Upload ProgressCompleteLegend IndicatorPendingListPendingList GroupPendingMarqueePendingProgressPendingRatingPendingSkeletonPendingSpinnerPendingStyled IconPendingTimelinePendingToastPendingTree ViewPending
+
AccordionCompleteAlertCompleteAvatarCompleteAvatar GroupCompleteBadgeCompleteBlockquoteCompleteButtonCompleteButton GroupCompleteCardCompleteCarouselCompleteChat BubbleCompleteCollapseCompleteDate PickerCompleteDevice FrameCompleteFile Upload ProgressCompleteHero ActionsPendingLegend IndicatorPendingListPendingList GroupPendingMarqueePendingProgressPendingRatingPendingSkeletonPendingSpinnerPendingStyled IconPendingTimelinePendingToastPendingTree ViewPending
+
+
+ Blocks +
Announcement BarPendingCTASectionPendingFeature CardPendingFeature Icon CardPendingHeroPendingMarketing Section HeaderPendingMetric CardPendingPage HeaderPendingPortal DashboardPendingSplit HeroPendingStats BarPending
Forms -
CheckboxCompleteColor PickerCompleteFile InputCompleteInputCompleteInput GroupCompleteRadioCompleteRange SliderCompleteSelectCompleteSwitchCompleteTextareaCompleteTime PickerComplete
+
Auth FormPendingCheckboxCompleteColor PickerCompleteFile InputCompleteInputCompleteInput GroupCompleteRadioCompleteRange SliderCompleteSelectCompleteSwitchCompleteTextareaCompleteTime PickerComplete
Integrations @@ -46,11 +50,11 @@ layout Showcase {
Layout -
ColumnsPendingContainerPendingCustom ScrollbarPendingDividerPendingGridPendingImagePendingKbdPendingLayout SplitterPendingLinkPendingTypographyPending
+
Auth Split LayoutPendingColumnsPendingContainerPendingCustom ScrollbarPendingDividerPendingFeature GridPendingGridPendingImagePendingKbdPendingLayout SplitterPendingLinkPendingMetric GridPendingPublic Page ShellPendingSectionPendingSection HeaderPendingText LinkPendingTypographyPending
Navigation -
BreadcrumbPendingMega MenuPendingNavPendingNavbarPendingPaginationPendingScrollspyPendingSidebarPendingStepperPendingTabsPending
+
Back To TopPendingBreadcrumbPendingFooterPendingMega MenuPendingNavPendingNavbarPendingPaginationPendingPreference SwitcherPendingScrollspyPendingSidebarPendingStepperPendingTabsPending
Overlays diff --git a/examples/component-showcase/app/pages/base.wrn b/examples/component-showcase/app/pages/base.wrn index 741a3d6e..9a08a5fd 100644 --- a/examples/component-showcase/app/pages/base.wrn +++ b/examples/component-showcase/app/pages/base.wrn @@ -3,14 +3,14 @@ page BaseShowcase { layout = "showcase" seo { title = "Base components" - description = "27 base components from @wrnexus/ui." + description = "28 base components from @wrnexus/ui." } view {
Component category

Base

-

27 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.

-
27 componentsMultiple use cases169 live configurations
+

28 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.

+
28 componentsMultiple use cases172 live configurations
+
+
+ +
+
+
+
Base

Hero Actions

Responsive action group for hero and call-to-action sections.

+
8 props · 1 slotsExplore component
+
+
diff --git a/examples/component-showcase/app/pages/components/announcement-bar.wrn b/examples/component-showcase/app/pages/components/announcement-bar.wrn new file mode 100644 index 00000000..91c8ba55 --- /dev/null +++ b/examples/component-showcase/app/pages/components/announcement-bar.wrn @@ -0,0 +1,151 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page AnnouncementBarDetail { + layout = "showcase" + state playground_badge = ctx.url.searchParams.get("pg_badge") ?? "" + state playground_badgeIcon = ctx.url.searchParams.get("pg_badgeIcon") ?? "" + state playground_message = ctx.url.searchParams.get("pg_message") ?? "Announcement" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default announcement bar for a modern application." + state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "" + state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Announcement Bar" + state playground_actionHref = ctx.url.searchParams.get("pg_actionHref") ?? "#announcement-bar-demo" + state playground_actionIcon = ctx.url.searchParams.get("pg_actionIcon") ?? "" + state playground_dismissible = ctx.url.searchParams.get("pg_dismissible") ?? "true" + 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_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") ?? "soft" + 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." + } + view { + +
+
+ Blocks component +

Announcement Bar

+

Accessible public announcement, emergency, maintenance, or status bar.

+
18 props0 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Announcement Bar

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<AnnouncementBar
+  description="A polished default announcement bar for a modern application."
+  actionLabel="Announcement Bar"
+  actionHref="#announcement-bar-demo"
+  dismissible="true"
+  dismissLabel="Announcement Bar"
+/>
+
+
+
+
+
Component props18 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AnnouncementBar
+  description="A polished default announcement bar for a modern application."
+  actionLabel="Announcement Bar"
+  actionHref="#announcement-bar-demo"
+  dismissible="true"
+  dismissLabel="Announcement Bar"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<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"
+  compact="true"
+  size="sm"
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<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"
+  size="lg"
+  variant="success"
+/>
+
+
+
+
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

No public component events.
+
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
badgestring""No
badgeIconstring""No
messagestring"Announcement"No
descriptionstring""No
iconstring"icon-[lucide--megaphone]"No
actionLabelstring""No
actionHrefstring""No
actionIconstring""No
dismissiblebooleanfalseNo
dismissLabelstring"Dismiss announcement"No
stickybooleanfalseNo
compactbooleanfalseNo
sizestring"default"No
colorstring"primary"No
variantstring"soft"No
rolestring"status"No
livestring"polite"No
classstring""No
+
+ +
+ + } +} diff --git a/examples/component-showcase/app/pages/components/auth-form.wrn b/examples/component-showcase/app/pages/components/auth-form.wrn new file mode 100644 index 00000000..b6173b1a --- /dev/null +++ b/examples/component-showcase/app/pages/components/auth-form.wrn @@ -0,0 +1,141 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page AuthFormDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_mode = ctx.url.searchParams.get("pg_mode") ?? "sign-in" + state playground_action = ctx.url.searchParams.get("pg_action") ?? "#auth-form-demo" + state playground_method = ctx.url.searchParams.get("pg_method") ?? "post" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Auth Form example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default auth form for a modern application." + state playground_returnTo = ctx.url.searchParams.get("pg_returnTo") ?? "" + state playground_schema = ctx.url.searchParams.get("pg_schema") ?? "" + state playground_showRemember = ctx.url.searchParams.get("pg_showRemember") ?? "true" + state playground_showName = ctx.url.searchParams.get("pg_showName") ?? "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." + } + view { + +
+
+ Forms component +

Auth Form

+

Reusable authentication form for sign-in, registration, recovery, reset, and MFA.

+
13 props1 slots5 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Auth Form

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<AuthForm
+  action="#auth-form-demo"
+  title="Auth Form example"
+  description="A polished default auth form for a modern application."
+  submitLabel="Auth Form"
+/>
+
+
+
+
+
Component props13 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AuthForm
+  action="#auth-form-demo"
+  title="Auth Form example"
+  description="A polished default auth form for a modern application."
+  submitLabel="Auth Form"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AuthForm
+  size="sm"
+  action="#auth-form-demo"
+  title="Compact Auth Form"
+  description="A compact configuration for dashboards and dense product surfaces."
+  submitLabel="Compact example"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<AuthForm
+  size="lg"
+  action="#auth-form-demo"
+  title="Advanced Auth Form"
+  description="A richer configuration demonstrating additional content and hierarchy."
+  submitLabel="Advanced example"
+/>
+
+
+
+
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

@submitFires when the component submits its value.
@changeFires when the component value or selection changes.
@inputFires immediately as the component value changes.
@focusFires when the component receives focus.
@blurFires when focus leaves the component.
Event listener.js
const component = document.querySelector('[data-wrn-events]')
+
+component.addEventListener('submit', (event) => {
+  console.log(event.detail)
+})
+
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
modestring"sign-in"No
actionstring"/api/auth/login"No
methodstring"post"No
titlestring"Sign in"No
descriptionstring""No
returnTostring""No
schemastring""No
showRememberbooleantrueNo
showNamebooleantrueNo
submitLabelstring"Continue"No
classstring""No
+
+ +
+ + } +} diff --git a/examples/component-showcase/app/pages/components/auth-split-layout.wrn b/examples/component-showcase/app/pages/components/auth-split-layout.wrn new file mode 100644 index 00000000..fd6fd1cc --- /dev/null +++ b/examples/component-showcase/app/pages/components/auth-split-layout.wrn @@ -0,0 +1,257 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page AuthSplitLayoutDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_eyebrow = ctx.url.searchParams.get("pg_eyebrow") ?? "Secure identity" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Auth Split Layout example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default auth split layout for a modern application." + state playground_brand = ctx.url.searchParams.get("pg_brand") ?? "Police Management System" + state playground_features = 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_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." + } + view { + +
+
+ Layout component +

Auth Split Layout

+

Responsive 50/50 authentication layout with content and form regions.

+
8 props2 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Auth Split Layout

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
aside-extra slot
form slot
+
+
Component code
+ 
<AuthSplitLayout
+  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"
+      ]
+    }
+  ]'>
+  <!-- Add aside-extra, form slot content here -->
+</AuthSplitLayout>
+
+
+
+
+
Component props8 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
aside-extra slot
form slot
+
+
+
Component usage.wrn
+ 
<AuthSplitLayout
+  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"
+      ]
+    }
+  ]'>
+  <!-- Add aside-extra, form slot content here -->
+</AuthSplitLayout>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
aside-extra slot
form slot
+
+
+
Component usage.wrn
+ 
<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"
+      ]
+    }
+  ]'>
+  <!-- Add aside-extra, form slot content here -->
+</AuthSplitLayout>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
aside-extra slot
form slot
+
+
+
Component usage.wrn
+ 
<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"
+      ]
+    }
+  ]'>
+  <!-- Add aside-extra, form slot content here -->
+</AuthSplitLayout>
+
+
+
+
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

No public component events.
+
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
eyebrowstring"Secure identity"No
titlestring"Welcome back"No
descriptionstring""No
brandstring"Police Management System"No
featuresstring[]No
classstring""No
+
+ +
+ + } +} diff --git a/examples/component-showcase/app/pages/components/back-to-top.wrn b/examples/component-showcase/app/pages/components/back-to-top.wrn new file mode 100644 index 00000000..ac8aa1ba --- /dev/null +++ b/examples/component-showcase/app/pages/components/back-to-top.wrn @@ -0,0 +1,136 @@ +// 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_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_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_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." + } + view { + +
+
+ Navigation component +

Back To Top

+

Accessible scroll-to-top control with visibility threshold.

+
12 props0 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Back To Top

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<BackToTop
+  label="Back To Top"
+  ariaLabel="Back To Top 1 example"
+  showProgress="true"
+/>
+
+
+
+
+
Component props12 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<BackToTop
+  label="Back To Top"
+  ariaLabel="Back To Top 1 example"
+  showProgress="true"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<BackToTop
+  label="Compact example"
+  ariaLabel="Back To Top 2 example"
+  icon="icon-[lucide--arrow-right]"
+  showProgress="true"
+  size="sm"
+  variant="secondary"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<BackToTop
+  label="Advanced example"
+  ariaLabel="Back To Top 3 example"
+  icon="icon-[lucide--trash-2]"
+  showProgress="true"
+  size="lg"
+  variant="success"
+/>
+
+
+
+
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

No public component events.
+
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
thresholdnumber500No
labelstring"Back to top"No
ariaLabelstring"Scroll back to top"No
iconstring"icon-[lucide--arrow-up]"No
positionstring"right"No
offsetstring"md"No
behaviorstring"smooth"No
showProgressbooleanfalseNo
sizestring"default"No
colorstring"primary"No
variantstring"solid"No
classstring""No
+
+ +
+ + } +} diff --git a/examples/component-showcase/app/pages/components/breadcrumb.wrn b/examples/component-showcase/app/pages/components/breadcrumb.wrn index 3c211083..82d195c9 100644 --- a/examples/component-showcase/app/pages/components/breadcrumb.wrn +++ b/examples/component-showcase/app/pages/components/breadcrumb.wrn @@ -653,8 +653,8 @@ component.addEventListener('navigate', (event) => {
} } diff --git a/examples/component-showcase/app/pages/components/card.wrn b/examples/component-showcase/app/pages/components/card.wrn index 5847bfc5..d2b57aed 100644 --- a/examples/component-showcase/app/pages/components/card.wrn +++ b/examples/component-showcase/app/pages/components/card.wrn @@ -69,7 +69,7 @@ page CardDetail {
Component props31 controls
-
+
diff --git a/examples/component-showcase/app/pages/components/checkbox.wrn b/examples/component-showcase/app/pages/components/checkbox.wrn index b0cd5dca..c8d556dd 100644 --- a/examples/component-showcase/app/pages/components/checkbox.wrn +++ b/examples/component-showcase/app/pages/components/checkbox.wrn @@ -41,11 +41,11 @@ page CheckboxDetail { Forms component

Checkbox

Theme-aware, responsive checkbox component.

-
27 props0 slots5 eventsTheme readyResponsive
+
27 props1 slots5 eventsTheme readyResponsive
-
+
Interactive playground

Configure Checkbox

Change any prop and inspect the server-rendered component immediately.

@@ -518,7 +518,7 @@ component.addEventListener('input', (event) => {
} diff --git a/examples/component-showcase/app/pages/components/columns.wrn b/examples/component-showcase/app/pages/components/columns.wrn index a1301061..71d8decc 100644 --- a/examples/component-showcase/app/pages/components/columns.wrn +++ b/examples/component-showcase/app/pages/components/columns.wrn @@ -38,7 +38,7 @@ page ColumnsDetail {
Component props6 controls
-
+
@@ -105,7 +105,7 @@ page ColumnsDetail { } diff --git a/examples/component-showcase/app/pages/components/container.wrn b/examples/component-showcase/app/pages/components/container.wrn index 7a627ec9..713efe50 100644 --- a/examples/component-showcase/app/pages/components/container.wrn +++ b/examples/component-showcase/app/pages/components/container.wrn @@ -40,7 +40,7 @@ page ContainerDetail {
Component props6 controls
-
+
diff --git a/examples/component-showcase/app/pages/components/ctasection.wrn b/examples/component-showcase/app/pages/components/ctasection.wrn new file mode 100644 index 00000000..3c91319f --- /dev/null +++ b/examples/component-showcase/app/pages/components/ctasection.wrn @@ -0,0 +1,160 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page CTASectionDetail { + layout = "showcase" + state playground_eyebrow = ctx.url.searchParams.get("pg_eyebrow") ?? "" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "CTASection example" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default ctasection for a modern application." + state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "" + state playground_align = ctx.url.searchParams.get("pg_align") ?? "start" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "solid" + state playground_primaryLabel = ctx.url.searchParams.get("pg_primaryLabel") ?? "CTASection" + state playground_primaryHref = ctx.url.searchParams.get("pg_primaryHref") ?? "#ctasection-demo" + state playground_primaryIcon = ctx.url.searchParams.get("pg_primaryIcon") ?? "" + state playground_secondaryLabel = ctx.url.searchParams.get("pg_secondaryLabel") ?? "CTASection" + state playground_secondaryHref = ctx.url.searchParams.get("pg_secondaryHref") ?? "#ctasection-demo" + state playground_secondaryIcon = ctx.url.searchParams.get("pg_secondaryIcon") ?? "" + state playground_backgroundImage = ctx.url.searchParams.get("pg_backgroundImage") ?? "" + state playground_maxWidth = ctx.url.searchParams.get("pg_maxWidth") ?? "xl" + 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." + } + view { + +
+
+ Blocks component +

CTASection

+

Reusable closing call-to-action section with primary and secondary actions.

+
17 props4 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure CTASection

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
actions slot
visual slot
footer slot
+
+
Component code
+ 
<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">
+  <!-- Add default, actions, visual, footer slot content here -->
+</CTASection>
+
+
+
+
+
Component props17 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
actions slot
visual slot
footer slot
+
+
+
Component usage.wrn
+ 
<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">
+  <!-- Add default, actions, visual, footer slot content here -->
+</CTASection>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
actions slot
visual slot
footer slot
+
+
+
Component usage.wrn
+ 
<CTASection
+  title="Compact CTASection"
+  description="A compact configuration for dashboards and dense product surfaces."
+  icon="icon-[lucide--arrow-right]"
+  size="sm"
+  variant="secondary"
+  primaryLabel="Compact example"
+  primaryHref="#ctasection-demo"
+  secondaryLabel="Compact example"
+  secondaryHref="#ctasection-demo">
+  <!-- Add default, actions, visual, footer slot content here -->
+</CTASection>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
actions slot
visual slot
footer slot
+
+
+
Component usage.wrn
+ 
<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">
+  <!-- Add default, actions, visual, footer slot content here -->
+</CTASection>
+
+
+
+
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

No public component events.
+
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
eyebrowstring""No
titlestring"Ready to get started?"No
descriptionstring""No
iconstring""No
alignstring"center"No
sizestring"default"No
colorstring"primary"No
variantstring"solid"No
primaryLabelstring"Get started"No
primaryHrefstring"#"No
primaryIconstring""No
secondaryLabelstring""No
secondaryHrefstring""No
secondaryIconstring""No
backgroundImagestring""No
maxWidthstring"xl"No
classstring""No
+
+ +
+ + } +} diff --git a/examples/component-showcase/app/pages/components/divider.wrn b/examples/component-showcase/app/pages/components/divider.wrn index 8d47d265..3c6f51f9 100644 --- a/examples/component-showcase/app/pages/components/divider.wrn +++ b/examples/component-showcase/app/pages/components/divider.wrn @@ -111,7 +111,7 @@ page DividerDetail { } } diff --git a/examples/component-showcase/app/pages/components/dropdown.wrn b/examples/component-showcase/app/pages/components/dropdown.wrn index f9cca294..bbf6194b 100644 --- a/examples/component-showcase/app/pages/components/dropdown.wrn +++ b/examples/component-showcase/app/pages/components/dropdown.wrn @@ -3,11 +3,9 @@ page DropdownDetail { 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") ?? "Dropdown example" - state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default dropdown 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") ?? "Dropdown" + 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_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" seo { title = "Dropdown" @@ -22,7 +20,7 @@ page DropdownDetail { Overlays component

Dropdown

Theme-aware, responsive dropdown component.

-
8 props1 slots4 eventsTheme readyResponsive
+
6 props3 slots4 eventsTheme readyResponsive
@@ -31,21 +29,234 @@ page DropdownDetail {
Live preview
-
+
trigger slot
header slot
footer slot
Component code
<Dropdown
-  title="Dropdown example"
-  description="A polished default dropdown for a modern application."
-  open="true"
-  closeLabel="Dropdown"
-/>
+ label="Dropdown" + items='[ + { + "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" + ] + }, + { + "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" + ] + } + ]'> + <!-- Add trigger, header, footer slot content here --> +</Dropdown>
-
Component props8 controls
-
+
Component props6 controls
+
@@ -60,16 +271,122 @@ page DropdownDetail {
Live preview
-
+
trigger slot
header slot
footer slot
Component usage.wrn
<Dropdown
-  title="Dropdown example"
-  description="A polished default dropdown for a modern application."
-  open="true"
-  closeLabel="Dropdown"
-/>
+ label="Dropdown" + items='[ + { + "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" + ] + }, + { + "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" + ] + } + ]'> + <!-- Add trigger, header, footer slot content here --> +</Dropdown>
@@ -81,17 +398,123 @@ page DropdownDetail {
Live preview
-
+
trigger slot
header slot
footer slot
Component usage.wrn
<Dropdown
   size="sm"
-  title="Compact Dropdown"
-  description="A compact configuration for dashboards and dense product surfaces."
-  open="true"
-  closeLabel="Compact example"
-/>
+ label="Compact example" + items='[ + { + "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": [ + { + "label": "Nested option A", + "value": "nested-a" + }, + { + "label": "Nested option B", + "value": "nested-b" + } + ], + "links": [ + { + "label": "Documentation", + "href": "#documentation" + }, + { + "label": "API reference", + "href": "#api-reference" + } + ], + "values": [ + "Included", + "Standard" + ] + }, + { + "id": "dropdown-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": [ + { + "label": "Nested option A", + "value": "nested-a" + }, + { + "label": "Nested option B", + "value": "nested-b" + } + ], + "links": [ + { + "label": "Documentation", + "href": "#documentation" + }, + { + "label": "API reference", + "href": "#api-reference" + } + ], + "values": [ + "Included", + "Standard" + ] + } + ]'> + <!-- Add trigger, header, footer slot content here --> +</Dropdown>
@@ -103,26 +526,132 @@ page DropdownDetail {
Live preview
-
+
trigger slot
header slot
footer slot
Component usage.wrn
<Dropdown
   size="lg"
-  title="Advanced Dropdown"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  open="true"
-  closeLabel="Advanced example"
-/>
+ label="Advanced example" + items='[ + { + "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": [ + { + "label": "Nested option 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": "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": [ + { + "label": "Nested option 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" + ] + } + ]'> + <!-- Add trigger, header, footer slot content here --> +</Dropdown>
-
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

@openFires when the component opens.
@closeFires when the component closes.
@selectFires when an item or option is selected.
@changeFires when the component value or selection changes.
Event listener.js
const component = document.querySelector('[data-wrn-events]')
+        
Component events
Events
Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.
@toggleFires when the component toggles between states.
@openFires when the component opens.
@closeFires when the component closes.
@selectFires when an item or option is selected.
Event listener.js
const component = document.querySelector('[data-wrn-events]')
 
-component.addEventListener('open', (event) => {
+component.addEventListener('toggle', (event) => {
   console.log(event.detail)
 })

-        
Component API
Props and configuration
All content and behavior shown above is supplied through these props and slots.
PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Dropdown"No
descriptionstring""No
openbooleanfalseNo
placementstring"bottom"No
closeLabelstring"Close"No
classstring""No

+        
Component API
Props and configuration
All content and behavior shown above is supplied through these props and slots.
PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Open menu"No
itemsstring[]No
placementstring"end"No
classstring""No
} } diff --git a/examples/component-showcase/app/pages/components/footer.wrn b/examples/component-showcase/app/pages/components/footer.wrn new file mode 100644 index 00000000..f9768900 --- /dev/null +++ b/examples/component-showcase/app/pages/components/footer.wrn @@ -0,0 +1,667 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page FooterDetail { + layout = "showcase" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Footer" + state playground_items = 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_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." + } + view { + +
+
+ Navigation component +

Footer

+

Responsive application footer with structured links and pre/post content slots.

+
8 props4 slots2 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Footer

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
pre-footer slot
post-footer slot
copyright-left slot
copyright-right slot
+
+
Component code
+ 
<Footer
+  label="Footer"
+  items='[
+    {
+      "id": "footer-0-1",
+      "key": "footer-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#footer-demo",
+      "actionHref": "#footer-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "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",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'>
+  <!-- Add pre-footer, post-footer, copyright-left, copyright-right slot content here -->
+</Footer>
+
+
+
+
+
Component props8 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
pre-footer slot
post-footer slot
copyright-left slot
copyright-right slot
+
+
+
Component usage.wrn
+ 
<Footer
+  label="Footer"
+  items='[
+    {
+      "id": "footer-0-1",
+      "key": "footer-0-1",
+      "value": "primary",
+      "label": "Primary workflow",
+      "title": "Primary workflow",
+      "description": "A clean default configuration for everyday product interfaces.",
+      "text": "A configurable sample message.",
+      "href": "#footer-demo",
+      "actionHref": "#footer-demo",
+      "actionLabel": "View details",
+      "icon": "icon-[lucide--sparkles]",
+      "iconClass": "icon-[lucide--sparkles]",
+      "variant": "primary",
+      "status": "Active",
+      "time": "09:30",
+      "current": true,
+      "selected": true,
+      "checked": true,
+      "disabled": false,
+      "outgoing": false,
+      "open": true,
+      "number": 1,
+      "count": 16,
+      "percentage": 72,
+      "color": "#7c3aed",
+      "target": "_self",
+      "ariaLabel": "Open primary workflow 1",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "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",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'>
+  <!-- Add pre-footer, post-footer, copyright-left, copyright-right slot content here -->
+</Footer>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
pre-footer slot
post-footer slot
copyright-left slot
copyright-right slot
+
+
+
Component usage.wrn
+ 
<Footer
+  size="sm"
+  label="Compact example"
+  items='[
+    {
+      "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",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "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",
+      "items": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    }
+  ]'>
+  <!-- Add pre-footer, post-footer, copyright-left, copyright-right slot content here -->
+</Footer>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
pre-footer slot
post-footer slot
copyright-left slot
copyright-right slot
+
+
+
Component usage.wrn
+ 
<Footer
+  size="lg"
+  label="Advanced example"
+  items='[
+    {
+      "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",
+      "items": [
+        {
+          "label": "Nested option 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": "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",
+      "items": [
+        {
+          "label": "Nested option 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"
+      ]
+    }
+  ]'>
+  <!-- Add pre-footer, post-footer, copyright-left, copyright-right slot content here -->
+</Footer>
+
+
+
+
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

@selectFires when an item or option is selected.
@actionFires when the component's action is selected.
Event listener.js
const component = document.querySelector('[data-wrn-events]')
+
+component.addEventListener('select', (event) => {
+  console.log(event.detail)
+})
+
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Footer navigation"No
itemsstring[]No
columnsnumber3No
maxWidthstring"compact"No
copyrightstring""No
classstring""No
+
+ +
+ + } +} diff --git a/examples/component-showcase/app/pages/components/grid.wrn b/examples/component-showcase/app/pages/components/grid.wrn index 7a96d113..a43602b7 100644 --- a/examples/component-showcase/app/pages/components/grid.wrn +++ b/examples/component-showcase/app/pages/components/grid.wrn @@ -38,7 +38,7 @@ page GridDetail {
Component props6 controls
-
+
@@ -105,7 +105,7 @@ page GridDetail { } diff --git a/examples/component-showcase/app/pages/components/hero-actions.wrn b/examples/component-showcase/app/pages/components/hero-actions.wrn new file mode 100644 index 00000000..7dd3b248 --- /dev/null +++ b/examples/component-showcase/app/pages/components/hero-actions.wrn @@ -0,0 +1,659 @@ +// 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_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_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." + } + view { + +
+
+ Base component +

Hero Actions

+

Responsive action group for hero and call-to-action sections.

+
8 props1 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Hero Actions

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
+
+
Component code
+ 
<HeroActions
+  actions='[
+    {
+      "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"
+      ]
+    },
+    {
+      "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"
+      ]
+    }
+  ]'
+  align="start"
+/>
+
+
+
+
+
Component props8 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<HeroActions
+  actions='[
+    {
+      "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"
+      ]
+    },
+    {
+      "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"
+      ]
+    }
+  ]'
+  align="start"
+/>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<HeroActions
+  actions='[
+    {
+      "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": [
+        {
+          "label": "Nested option A",
+          "value": "nested-a"
+        },
+        {
+          "label": "Nested option B",
+          "value": "nested-b"
+        }
+      ],
+      "links": [
+        {
+          "label": "Documentation",
+          "href": "#documentation"
+        },
+        {
+          "label": "API reference",
+          "href": "#api-reference"
+        }
+      ],
+      "values": [
+        "Included",
+        "Standard"
+      ]
+    },
+    {
+      "id": "hero-actions-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": [
+        {
+          "label": "Nested option A",
+          "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"
+  size="sm"
+/>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
+
+
+
Component usage.wrn
+ 
<HeroActions
+  actions='[
+    {
+      "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": [
+        {
+          "label": "Nested option 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-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": [
+        {
+          "label": "Nested option 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"
+  size="lg"
+/>
+
+
+
+
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

No public component events.
+
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
actionsstring[]No
alignstring"left"No
orientationstring"horizontal"No
stackOnMobilebooleantrueNo
fullWidthMobilebooleantrueNo
sizestring"default"No
colorstring"primary"No
classstring""No
+
+ +
+ + } +} diff --git a/examples/component-showcase/app/pages/components/hero.wrn b/examples/component-showcase/app/pages/components/hero.wrn new file mode 100644 index 00000000..b2fe97db --- /dev/null +++ b/examples/component-showcase/app/pages/components/hero.wrn @@ -0,0 +1,1248 @@ +// Generated by scripts/generate-showcase.mjs. Do not edit directly. +page HeroDetail { + layout = "showcase" + state playground_eyebrow = ctx.url.searchParams.get("pg_eyebrow") ?? "" + 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." + 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_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_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_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_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." + } + view { + +
+
+ Blocks component +

Hero

+

Reusable public-page hero with actions, trust items, badges, and visual slots.

+
20 props6 slots0 eventsTheme readyResponsive
+
+
+
+
+
Interactive playground

Configure Hero

Change any prop and inspect the server-rendered component immediately.

+
+
+
Live preview
+
eyebrow slot
actions slot
trust slot
visual slot
footer slot
+
+
Component code
+ 
<Hero
+  title="Hero example"
+  description="A polished default hero for a modern application."
+  align="start"
+  primaryLabel="Hero"
+  primaryHref="#hero-demo"
+  secondaryLabel="Hero"
+  secondaryHref="#hero-demo"
+  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"
+      ]
+    }
+  ]'>
+  <!-- Add eyebrow, actions, trust, default, visual, footer slot content here -->
+</Hero>
+
+
+
+
+
Component props20 controls
+
+
+
+
+
+
+
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

+
+
+
Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

+ 01 +
+
+
+
Live preview
+
eyebrow slot
actions slot
trust slot
visual slot
footer slot
+
+
+
Component usage.wrn
+ 
<Hero
+  title="Hero example"
+  description="A polished default hero for a modern application."
+  align="start"
+  primaryLabel="Hero"
+  primaryHref="#hero-demo"
+  secondaryLabel="Hero"
+  secondaryHref="#hero-demo"
+  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"
+      ]
+    }
+  ]'>
+  <!-- Add eyebrow, actions, trust, default, visual, footer slot content here -->
+</Hero>
+
+
+
+
+
+
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

+ 02 +
+
+
+
Live preview
+
eyebrow slot
actions slot
trust slot
visual slot
footer slot
+
+
+
Component usage.wrn
+ 
<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='[
+    {
+      "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"
+      ]
+    }
+  ]'>
+  <!-- Add eyebrow, actions, trust, default, visual, footer slot content here -->
+</Hero>
+
+
+
+
+
+
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

+ 03 +
+
+
+
Live preview
+
eyebrow slot
actions slot
trust slot
visual slot
footer slot
+
+
+
Component usage.wrn
+ 
<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='[
+    {
+      "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"
+      ]
+    }
+  ]'
+  trustItems='[
+    {
+      "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"
+      ]
+    }
+  ]'>
+  <!-- Add eyebrow, actions, trust, default, visual, footer slot content here -->
+</Hero>
+
+
+
+
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

No public component events.
+
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
eyebrowstring""No
titlestring"Build something remarkable"No
highlightstring""No
descriptionstring""No
alignstring"left"No
sizestring"default"No
colorstring"primary"No
variantstring"default"No
primaryLabelstring""No
primaryHrefstring""No
primaryIconstring""No
secondaryLabelstring""No
secondaryHrefstring""No
secondaryIconstring""No
tertiaryLabelstring""No
tertiaryHrefstring""No
badgesstring[]No
trustItemsstring[]No
maxWidthstring"xl"No
classstring""No
+
+ +
+ + } +} diff --git a/examples/component-showcase/app/pages/components/image.wrn b/examples/component-showcase/app/pages/components/image.wrn index 0ce6cc66..ce164439 100644 --- a/examples/component-showcase/app/pages/components/image.wrn +++ b/examples/component-showcase/app/pages/components/image.wrn @@ -23,7 +23,7 @@ page ImageDetail { Layout component

Image

Theme-aware, responsive image component.

-
9 props1 slots2 eventsTheme readyResponsive
+
9 props1 slots0 eventsTheme readyResponsive
@@ -41,7 +41,7 @@ page ImageDetail {
Component props9 controls
-
+
@@ -100,11 +100,7 @@ page ImageDetail { -
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

@loadFires when component data or media finishes loading.
@errorFires when the component encounters an error.
Event listener.js
const component = document.querySelector('[data-wrn-events]')
-
-component.addEventListener('load', (event) => {
-  console.log(event.detail)
-})
+
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

No public component events.
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
srcstring""No
altstring""No
widthstring""No
heightstring""No
loadingstring"lazy"No
roundedbooleanfalseNo
classstring""No
} diff --git a/examples/component-showcase/app/pages/components/link.wrn b/examples/component-showcase/app/pages/components/link.wrn index 1c1b72fd..af94d8a9 100644 --- a/examples/component-showcase/app/pages/components/link.wrn +++ b/examples/component-showcase/app/pages/components/link.wrn @@ -22,7 +22,7 @@ page LinkDetail { Layout component

Link

Theme-aware, responsive link component.

-
8 props1 slots3 eventsTheme readyResponsive
+
8 props1 slots0 eventsTheme readyResponsive
@@ -42,7 +42,7 @@ page LinkDetail {
Component props8 controls
-
+
@@ -107,11 +107,7 @@ page LinkDetail { -
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

@clickFires when the component is activated by pointer or keyboard.
@focusFires when the component receives focus.
@blurFires when focus leaves the component.
Event listener.js
const component = document.querySelector('[data-wrn-events]')
-
-component.addEventListener('click', (event) => {
-  console.log(event.detail)
-})
+
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

No public component events.
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
labelstring"Link"No
hrefstring"#"No
targetstring""No
relstring""No
externalbooleanfalseNo
classstring""No