release: WRNexusJS 0.7.0
This commit is contained in:
+10
@@ -9,3 +9,13 @@ dist/
|
||||
bun.lockb
|
||||
|
||||
.publish/
|
||||
|
||||
# Environment files may contain secrets. Commit only templates.
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
!.env.*.example
|
||||
|
||||
# Local focused typecheck helpers must never enter the repository.
|
||||
focus-shims.d.ts
|
||||
tsconfig.focus.json
|
||||
|
||||
@@ -15,3 +15,9 @@ bun.lockb
|
||||
editors/vscode/src/compiler.cjs
|
||||
*.svg
|
||||
**/.vscodeignore
|
||||
|
||||
# Local focused typecheck helpers (never part of a release)
|
||||
focus-shims.d.ts
|
||||
**/focus-shims.d.ts
|
||||
tsconfig.focus.json
|
||||
**/tsconfig.focus.json
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/ai",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "Zero-dependency Claude (Anthropic) client for WrNexus apps.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/authz",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/authz — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
+13
-13
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/cli",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/cli — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -28,18 +28,18 @@
|
||||
"wrnexus": "./dist/index.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.6.0",
|
||||
"@wrnexus/router": "^0.6.0",
|
||||
"@wrnexus/csr": "^0.6.0",
|
||||
"@wrnexus/compiler": "^0.6.0",
|
||||
"@wrnexus/styles": "^0.6.0",
|
||||
"@wrnexus/dev-server": "^0.6.0",
|
||||
"@wrnexus/ui": "^0.6.0",
|
||||
"@wrnexus/validation": "^0.6.0",
|
||||
"@wrnexus/i18n": "^0.6.0",
|
||||
"@wrnexus/db": "^0.6.0",
|
||||
"@wrnexus/plugin": "^0.6.0",
|
||||
"@wrnexus/syntax": "^0.6.0"
|
||||
"@wrnexus/core": "^0.7.0",
|
||||
"@wrnexus/router": "^0.7.0",
|
||||
"@wrnexus/csr": "^0.7.0",
|
||||
"@wrnexus/compiler": "^0.7.0",
|
||||
"@wrnexus/styles": "^0.7.0",
|
||||
"@wrnexus/dev-server": "^0.7.0",
|
||||
"@wrnexus/ui": "^0.7.0",
|
||||
"@wrnexus/validation": "^0.7.0",
|
||||
"@wrnexus/i18n": "^0.7.0",
|
||||
"@wrnexus/db": "^0.7.0",
|
||||
"@wrnexus/plugin": "^0.7.0",
|
||||
"@wrnexus/syntax": "^0.7.0"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/compiler",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/compiler — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -21,8 +21,8 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/syntax": "^0.6.0",
|
||||
"@wrnexus/store": "^0.6.0"
|
||||
"@wrnexus/syntax": "^0.7.0",
|
||||
"@wrnexus/store": "^0.7.0"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/core",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/core — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/csr",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/csr — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -21,7 +21,7 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.6.0"
|
||||
"@wrnexus/core": "^0.7.0"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/db",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/db — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/dev-server",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/dev-server — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -25,21 +25,23 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.6.0",
|
||||
"@wrnexus/dev-toolbar": "^0.6.0",
|
||||
"@wrnexus/router": "^0.6.0",
|
||||
"@wrnexus/ssr": "^0.6.0",
|
||||
"@wrnexus/csr": "^0.6.0",
|
||||
"@wrnexus/compiler": "^0.6.0",
|
||||
"@wrnexus/styles": "^0.6.0",
|
||||
"@wrnexus/ui": "^0.6.0",
|
||||
"@wrnexus/validation": "^0.6.0",
|
||||
"@wrnexus/i18n": "^0.6.0",
|
||||
"@wrnexus/db": "^0.6.0",
|
||||
"@wrnexus/pubsub": "^0.6.0",
|
||||
"@wrnexus/uploader": "^0.6.0",
|
||||
"@wrnexus/plugin": "^0.6.0",
|
||||
"@wrnexus/store": "^0.6.0"
|
||||
"@wrnexus/core": "^0.7.0",
|
||||
"@wrnexus/dev-toolbar": "^0.7.0",
|
||||
"@wrnexus/router": "^0.7.0",
|
||||
"@wrnexus/ssr": "^0.7.0",
|
||||
"@wrnexus/csr": "^0.7.0",
|
||||
"@wrnexus/compiler": "^0.7.0",
|
||||
"@wrnexus/styles": "^0.7.0",
|
||||
"@wrnexus/ui": "^0.7.0",
|
||||
"@wrnexus/validation": "^0.7.0",
|
||||
"@wrnexus/i18n": "^0.7.0",
|
||||
"@wrnexus/db": "^0.7.0",
|
||||
"@wrnexus/pubsub": "^0.7.0",
|
||||
"@wrnexus/uploader": "^0.7.0",
|
||||
"@wrnexus/plugin": "^0.7.0",
|
||||
"@wrnexus/store": "^0.7.0",
|
||||
"@wrnexus/security": "^0.7.0",
|
||||
"@wrnexus/observability": "^0.7.0"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/dev-toolbar",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/dev-toolbar — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/encryption",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/encryption — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/helpers",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "Safe convenience helpers for WrNexus request contexts and common application flows.",
|
||||
"license": "MIT",
|
||||
@@ -21,7 +21,7 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.6.0"
|
||||
"@wrnexus/core": "^0.7.0"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/i18n",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/i18n — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -21,7 +21,7 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.6.0"
|
||||
"@wrnexus/core": "^0.7.0"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/jwt",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/jwt — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/mobile",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/mobile — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -21,7 +21,7 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/native": "^0.6.0"
|
||||
"@wrnexus/native": "^0.7.0"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/native",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/native — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/oauth",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/oauth — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/plugin",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/plugin — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -33,7 +33,7 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/syntax": "^0.6.0"
|
||||
"@wrnexus/syntax": "^0.7.0"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/pubsub",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/pubsub — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/queue",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/queue — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/reactive",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/reactive — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/router",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/router — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -21,8 +21,8 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/compiler": "^0.6.0",
|
||||
"@wrnexus/core": "^0.6.0"
|
||||
"@wrnexus/compiler": "^0.7.0",
|
||||
"@wrnexus/core": "^0.7.0"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/ssr",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/ssr — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -29,8 +29,9 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.6.0",
|
||||
"@wrnexus/store": "^0.6.0"
|
||||
"@wrnexus/core": "^0.7.0",
|
||||
"@wrnexus/store": "^0.7.0",
|
||||
"@wrnexus/security": "^0.7.0"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/styles",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/styles — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -21,9 +21,9 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/uploader": "^0.6.0",
|
||||
"@wrnexus/core": "^0.6.0",
|
||||
"@wrnexus/plugin": "^0.6.0"
|
||||
"@wrnexus/uploader": "^0.7.0",
|
||||
"@wrnexus/core": "^0.7.0",
|
||||
"@wrnexus/plugin": "^0.7.0"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/syntax",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/syntax — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/test",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/test — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/tracking",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/tracking — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/ui",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/ui — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -26,7 +26,7 @@
|
||||
"./ui.css": "./ui.css"
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.6.0"
|
||||
"@wrnexus/core": "^0.7.0"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/uploader",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/uploader — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -21,7 +21,7 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.6.0"
|
||||
"@wrnexus/core": "^0.7.0"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/validation",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/validation — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -404,3 +404,18 @@ Comparison base: `WRNexusJS(4).zip`. Dependency directories, `.git`, and `.wrnex
|
||||
|
||||
- Prevented the UI reference generator from rewriting current files solely because of CRLF/LF differences.
|
||||
- Added an executable regression test proving line-ending-only differences are ignored and real stale content is repaired.
|
||||
|
||||
## 0.7.0 R2 typecheck correction
|
||||
|
||||
- Removed leaked focused-typecheck shim files that polluted the root TypeScript program.
|
||||
- Added a validation gate preventing those temporary files from entering future archives.
|
||||
|
||||
## 0.7.0 R4 Happy DOM event typing
|
||||
|
||||
- Fixed strict event-type compatibility in `packages/validation/test/validation.test.ts`.
|
||||
- Improved `check:workspace` dry-run wording.
|
||||
- Added a validation guard preventing browser DOM `Event` from being reintroduced as the Happy DOM helper return type.
|
||||
|
||||
## 0.7.0 R6 lint cleanup
|
||||
|
||||
See `FIXES-0.7.0-R6-LINT-CLEANUP.md` for the final lint and secure hydration corrections.
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
# WRNexusJS 0.7.0 R1 — Local environment audit boundary
|
||||
|
||||
## Problem
|
||||
|
||||
The security audit recursively scanned every file in the working directory. Local, ignored environment files such as `examples/basic-app/.env` and `.env.uat` therefore failed the release audit even though they were not tracked by Git and would not be published.
|
||||
|
||||
## Fix
|
||||
|
||||
- Release security checks now scan `git ls-files -z` when Git metadata is available.
|
||||
- Secret-like files tracked by Git still fail with `SEC-NO-TRACKED-SECRET-FILES`.
|
||||
- Ignored or untracked local secret files produce `SEC-LOCAL-SECRET-FILES` warnings only.
|
||||
- Source archives without `.git` metadata still scan every included file.
|
||||
- The JSON report schema is updated to version 2 and includes warnings separately from errors.
|
||||
|
||||
## Existing repositories
|
||||
|
||||
If old `.env` files are still tracked, remove them from the Git index while retaining local copies:
|
||||
|
||||
```powershell
|
||||
git rm --cached examples/basic-app/.env examples/basic-app/.env.uat
|
||||
git add examples/basic-app/.env.example examples/basic-app/.env.uat.example .gitignore
|
||||
git commit -m "security(examples): stop tracking local environment files"
|
||||
```
|
||||
|
||||
The root `.gitignore` now also explicitly allows environment templates for named environments:
|
||||
|
||||
```gitignore
|
||||
!.env.example
|
||||
!.env.*.example
|
||||
```
|
||||
@@ -0,0 +1,19 @@
|
||||
# WRNexusJS 0.7.0 R2 — Root Typecheck Fix
|
||||
|
||||
## Cause
|
||||
|
||||
The R1 source archive accidentally contained two temporary files used only for a dependency-free focused compile:
|
||||
|
||||
- `focus-shims.d.ts`
|
||||
- `tsconfig.focus.json`
|
||||
|
||||
The root `tsc --noEmit` command automatically included `focus-shims.d.ts`. Its intentionally broad declarations replaced or merged with the installed Bun, Node.js, TypeScript, Happy DOM, filesystem, child-process, and build-tool declarations. That caused callback parameters to become implicit `any`, removed real Bun APIs and generics, and produced the reported 78 errors across otherwise valid source files.
|
||||
|
||||
## Fix
|
||||
|
||||
- Removed `focus-shims.d.ts` from the source tree.
|
||||
- Removed `tsconfig.focus.json` from the source tree.
|
||||
- Added a `validate:0.7` release guard that fails if either temporary file is present.
|
||||
- Re-ran the root TypeScript program with typed Bun/Node/TypeScript module declarations.
|
||||
|
||||
No public framework API or runtime behavior changed in this correction.
|
||||
@@ -0,0 +1,43 @@
|
||||
# WRNexusJS 0.7.0 R3 — Workspace Repair and Typecheck Isolation
|
||||
|
||||
## Problem
|
||||
|
||||
Applying a source ZIP over an existing Git checkout cannot delete files or change the Git index. Two local focused-typecheck files and two previously tracked environment files therefore survived earlier archive updates:
|
||||
|
||||
- `focus-shims.d.ts`
|
||||
- `tsconfig.focus.json`
|
||||
- `examples/basic-app/.env`
|
||||
- `examples/basic-app/.env.uat`
|
||||
|
||||
The ambient declarations in `focus-shims.d.ts` replaced or weakened the installed Bun, Node.js, TypeScript, filesystem, child-process, Happy DOM, and tsup typings. That produced dozens of false `implicit any`, missing namespace member, and untyped `Bun.serve` errors.
|
||||
|
||||
## Corrections
|
||||
|
||||
1. Root `tsconfig.json` now has explicit include/exclude rules and always excludes focused-typecheck helper files.
|
||||
2. Added `bun run repair:workspace` to:
|
||||
- remove the two temporary typecheck files;
|
||||
- remove unsafe secret-like files and temporary shims from Git tracking;
|
||||
- preserve local `.env` file contents;
|
||||
- ensure the required `.gitignore` rules exist.
|
||||
3. Added `bun run check:workspace` for non-mutating CI/release verification.
|
||||
4. `validate:0.7` warns about local leftovers instead of allowing a TypeScript cascade, and verifies that the root typecheck excludes them.
|
||||
5. The security audit blocks tracked typecheck shims and tracked environment files with the repair command in its error message.
|
||||
6. Release prepare/publish now runs `check:workspace` before validation.
|
||||
7. Package staging rejects `focus-shims.d.ts` and `tsconfig.focus.json`.
|
||||
8. Added an executable Git regression test proving local environment values are retained while unsafe files are removed from tracking.
|
||||
|
||||
## Required one-time command for an existing checkout
|
||||
|
||||
```powershell
|
||||
bun run repair:workspace
|
||||
```
|
||||
|
||||
Then review and commit the index changes:
|
||||
|
||||
```powershell
|
||||
git status
|
||||
git add .gitignore package.json tsconfig.json scripts
|
||||
|
||||
git commit -m "fix(tooling): isolate temporary typecheck files and repair workspace state"
|
||||
git push origin main
|
||||
```
|
||||
@@ -0,0 +1,29 @@
|
||||
# WRNexusJS 0.7.0 R4 — Happy DOM Event Type Correction
|
||||
|
||||
## Problem
|
||||
|
||||
`packages/validation/test/validation.test.ts` returned the browser DOM `Event` type from its synthetic event helper. Happy DOM elements require Happy DOM's own event class, so strict TypeScript reported two incompatible `dispatchEvent()` calls.
|
||||
|
||||
## Fix
|
||||
|
||||
The helper now derives its event type directly from Happy DOM's own `document.dispatchEvent` parameter:
|
||||
|
||||
```ts
|
||||
type HappyDOMEvent = Parameters<Window["document"]["dispatchEvent"]>[0];
|
||||
type HappyDOMEventConstructor = new (type: string, init?: EventInit) => HappyDOMEvent;
|
||||
|
||||
function windowEvent(win: Window, type: string, init?: EventInit): HappyDOMEvent {
|
||||
const EventConstructor = (win as unknown as { Event: HappyDOMEventConstructor }).Event;
|
||||
return new EventConstructor(type, init);
|
||||
}
|
||||
```
|
||||
|
||||
This keeps browser DOM tests and Happy DOM tests type-safe without using an unsafe browser `Event` return type.
|
||||
|
||||
## Workspace repair
|
||||
|
||||
The two `.env` files and temporary focused-typecheck files shown by `check:workspace` are local leftovers. Run `bun run repair:workspace` once before the security audit. The command preserves local `.env` contents while removing unsafe files from Git tracking.
|
||||
|
||||
## Additional improvement
|
||||
|
||||
`check:workspace` now says `would remove` in check mode, instead of incorrectly implying files were already removed.
|
||||
@@ -0,0 +1,21 @@
|
||||
# WRNexusJS 0.7.0 R5 — Happy DOM element/event type alignment
|
||||
|
||||
## Problem
|
||||
|
||||
R4 returned Happy DOM `Event` objects from the test helper, but two inputs were still cast to the browser DOM `HTMLInputElement` type. TypeScript therefore rejected the Happy DOM event at `dispatchEvent()`.
|
||||
|
||||
## Correction
|
||||
|
||||
`packages/validation/test/validation.test.ts` now imports and consistently uses Happy DOM types for:
|
||||
|
||||
- `Event`
|
||||
- `IEventInit`
|
||||
- `HTMLElement`
|
||||
- `HTMLInputElement`
|
||||
- `HTMLFormElement`
|
||||
|
||||
The input, field, error and form nodes no longer use browser DOM global casts. Submit events also no longer cast back to the browser DOM `Event` type.
|
||||
|
||||
## Regression gate
|
||||
|
||||
`validate:0.7` now verifies that the validation tests use one Happy DOM type system and rejects the old `as unknown as HTMLInputElement`, `HTMLFormElement`, or `HTMLElement` casts.
|
||||
@@ -0,0 +1,26 @@
|
||||
# WRNexusJS 0.7.0 R6 - Lint cleanup
|
||||
|
||||
R6 fixes the remaining root ESLint findings reported after R5.
|
||||
|
||||
## Corrections
|
||||
|
||||
- Replaced control-character regular expressions in compiler, security URL validation, and syntax diagnostics with explicit ASCII character-code checks.
|
||||
- `renderStoreHydration()` now actually uses `serializeForHtml()` for bounded, prototype-safe, HTML-safe hydration JSON.
|
||||
- SBOM parse errors preserve the original caught error through `ErrorOptions.cause`.
|
||||
- The workspace repair regression imports `node:process` explicitly.
|
||||
- ESLint and Prettier ignore local `focus-shims.d.ts` and `tsconfig.focus.json` leftovers until `bun run repair:workspace` removes them.
|
||||
- Added `validate:0.7` guards for every R6 regression.
|
||||
|
||||
## Security behavior retained
|
||||
|
||||
URLs containing ASCII whitespace, C0 control characters, or DEL are rejected by `@wrnexus/security`. Static compiler and syntax checks continue to normalize embedded C0 characters before detecting dangerous protocols such as `javascript:`.
|
||||
|
||||
## Local validation
|
||||
|
||||
Run on the target Bun workspace:
|
||||
|
||||
```powershell
|
||||
bun run repair:workspace
|
||||
bun install
|
||||
bun run check
|
||||
```
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"release": "0.7.0-r1",
|
||||
"fix": "Git-tracked secret-file audit boundary",
|
||||
"results": {
|
||||
"validate_0_7": {
|
||||
"passed": 35,
|
||||
"failed": 0
|
||||
},
|
||||
"clean_archive_security_audit": "passed",
|
||||
"ignored_local_env_files": {
|
||||
"result": "warning-only",
|
||||
"exitCode": 0
|
||||
},
|
||||
"git_tracked_env_files": {
|
||||
"result": "blocked",
|
||||
"exitCode": 1
|
||||
},
|
||||
"javascript_syntax": "passed"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"release": "0.7.0-r2",
|
||||
"reportedTypeScriptErrors": 78,
|
||||
"reportedFiles": 28,
|
||||
"rootCause": [
|
||||
"focus-shims.d.ts was accidentally included in the release source and automatically loaded by the root TypeScript program",
|
||||
"tsconfig.focus.json was a temporary packaging-only configuration and should not have been distributed"
|
||||
],
|
||||
"removedFiles": ["focus-shims.d.ts", "tsconfig.focus.json"],
|
||||
"hardening": [
|
||||
"validate:0.7 now rejects temporary focused-typecheck files",
|
||||
"compressed response bodies are copied into a concrete ArrayBuffer for TypeScript 5.9 DOM compatibility",
|
||||
"Happy DOM event constructors are accessed through explicit typed window shapes",
|
||||
"Redis tests use the typed Bun global directly",
|
||||
"package publishing imports node:process explicitly"
|
||||
],
|
||||
"validation": {
|
||||
"rootTypeScriptProgram": "passed",
|
||||
"validate07": { "passed": 36, "failed": 0 },
|
||||
"securityFramework": { "passed": 10, "failed": 0 },
|
||||
"validate06Compatibility": { "passed": 20, "warnings": 1, "failed": 0 },
|
||||
"vscodeTests": { "passed": 28, "failed": 0 },
|
||||
"vscodeValidation": "passed",
|
||||
"temporaryFileGuard": {
|
||||
"temporaryFilePresentExitCode": 1,
|
||||
"temporaryFileAbsentExitCode": 0
|
||||
}
|
||||
},
|
||||
"localAuthoritativeCommand": "bun run check"
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"release": "0.7.0-r3",
|
||||
"focus": "workspace repair, tracked secret cleanup, and root typecheck isolation",
|
||||
"results": {
|
||||
"validate_0_7": {
|
||||
"passed": 37,
|
||||
"warnings": 0,
|
||||
"failed": 0
|
||||
},
|
||||
"security_framework": "passed",
|
||||
"validate_0_6_compatibility": {
|
||||
"passed": 20,
|
||||
"warnings": 1,
|
||||
"failed": 0
|
||||
},
|
||||
"workspace_repair_git_regression": "passed",
|
||||
"package_staging_integrity": "passed",
|
||||
"temporary_shim_excluded_from_root_typescript_program": "passed",
|
||||
"vscode_tests": {
|
||||
"passed": 28,
|
||||
"failed": 0
|
||||
},
|
||||
"vscode_extension_validation": "passed",
|
||||
"sbom_components": 339
|
||||
},
|
||||
"local_full_bun_check_required": true,
|
||||
"required_command": "bun run repair:workspace && bun run check"
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"release": "0.7.0-r4",
|
||||
"fix": "Happy DOM synthetic event type compatibility",
|
||||
"results": {
|
||||
"validate_0_7": {
|
||||
"passed": 38,
|
||||
"warnings": 0,
|
||||
"failed": 0
|
||||
},
|
||||
"security_framework_audit": "passed",
|
||||
"workspace_repair_regression": "passed",
|
||||
"validate_0_6_compatibility": {
|
||||
"passed": 20,
|
||||
"warnings": 1,
|
||||
"failed": 0
|
||||
},
|
||||
"vscode_tests": {
|
||||
"passed": 28,
|
||||
"failed": 0
|
||||
},
|
||||
"vscode_extension_validation": "passed",
|
||||
"happy_dom_event_type_structural_compile": "passed",
|
||||
"zip_integrity": "passed"
|
||||
},
|
||||
"environment_limit": "Bun and the repository dependency tree are unavailable in the packaging environment, so the complete bun run check remains required on the target Windows workspace."
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"release": "WRNexusJS 0.7.0 R5",
|
||||
"fix": "Happy DOM event and element receiver type alignment",
|
||||
"validation": {
|
||||
"validate_0_7": {
|
||||
"passed": 38,
|
||||
"warnings": 0,
|
||||
"failed": 0
|
||||
},
|
||||
"security_framework": "passed",
|
||||
"validate_0_6": {
|
||||
"passed": 20,
|
||||
"warnings": 1,
|
||||
"failed": 0
|
||||
},
|
||||
"vscode_tests": {
|
||||
"passed": 28,
|
||||
"failed": 0
|
||||
},
|
||||
"vscode_extension_validation": "passed",
|
||||
"focused_happy_dom_type_compile": "passed",
|
||||
"full_bun_typecheck": "requires target Windows environment"
|
||||
},
|
||||
"changed_files": [
|
||||
"packages/validation/test/validation.test.ts",
|
||||
"scripts/validate-0.7.mjs",
|
||||
"FIXES-0.7.0-R5-HAPPY-DOM-ELEMENT-EVENT-TYPES.md",
|
||||
"CHANGES-0.6.0.md",
|
||||
"RELEASE_NOTES-0.7.0.md"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"release": "0.7.0-r6",
|
||||
"reportedLintFindings": 8,
|
||||
"reportedErrorsFixed": 5,
|
||||
"reportedWarningsFixedOrIsolated": 3,
|
||||
"validation": {
|
||||
"validate07": { "passed": 41, "warnings": 0, "failed": 0 },
|
||||
"securityFrameworkAudit": "passed",
|
||||
"workspaceRepairRegression": "passed",
|
||||
"packageStagingIntegrity": "passed",
|
||||
"focusedTypeScript": "passed",
|
||||
"urlControlCharacterProbe": "passed",
|
||||
"compatibilityValidator06": { "passed": 20, "warnings": 1, "failed": 0 },
|
||||
"vscodeTests": { "passed": 28, "failed": 0 },
|
||||
"vscodeValidation": "passed",
|
||||
"benchmarkFramework": "passed"
|
||||
},
|
||||
"environmentBoundary": "Bun and repository ESLint dependencies are unavailable in the packaging environment; run bun run check on the target Windows workspace."
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
{
|
||||
"release": "0.7.0",
|
||||
"implementation": {
|
||||
"requestedAreas": 21,
|
||||
"implementedAreas": 21,
|
||||
"newPackages": 5,
|
||||
"frameworkPackages": 38
|
||||
},
|
||||
"validators": {
|
||||
"v070": {
|
||||
"passed": 34,
|
||||
"failed": 0
|
||||
},
|
||||
"v060Compatibility": {
|
||||
"passed": 20,
|
||||
"warnings": 1,
|
||||
"failed": 0,
|
||||
"warning": "Bun unavailable in packaging environment"
|
||||
},
|
||||
"securityPerformanceAudit": {
|
||||
"passed": 10,
|
||||
"failed": 0
|
||||
}
|
||||
},
|
||||
"compiler": {
|
||||
"wrnFilesCompiled": 281,
|
||||
"uiComponentsCompiled": 108,
|
||||
"browserModulesSyntaxChecked": 108,
|
||||
"failures": 0
|
||||
},
|
||||
"vscode": {
|
||||
"compilerModulesBundled": 24,
|
||||
"testsPassed": 28,
|
||||
"testsFailed": 0,
|
||||
"extensionValidationPassed": true
|
||||
},
|
||||
"supplyChain": {
|
||||
"sbomFormat": "CycloneDX 1.5",
|
||||
"sbomComponents": 339,
|
||||
"workspaceComponents": 38,
|
||||
"deterministic": true,
|
||||
"packageStageIntegrityProbePassed": true
|
||||
},
|
||||
"benchmarks": {
|
||||
"syntaxParseComponent": {
|
||||
"meanMs": 0.19686705000000188,
|
||||
"p95Ms": 0.4446000000000083,
|
||||
"operationsPerSecond": 5079.570197247282
|
||||
},
|
||||
"secureHydrationSerialization": {
|
||||
"meanMs": 0.05032330799999943,
|
||||
"p95Ms": 0.07434000000000651,
|
||||
"operationsPerSecond": 19871.50765208065
|
||||
},
|
||||
"tagCacheRead100": {
|
||||
"meanMs": 0.018023848000000498,
|
||||
"p95Ms": 0.04413500000001136,
|
||||
"operationsPerSecond": 55482.04800661725
|
||||
}
|
||||
},
|
||||
"typeScript": {
|
||||
"focusedStrictIntegrationPassed": true
|
||||
},
|
||||
"completeBunCheck": {
|
||||
"runInPackagingEnvironment": false,
|
||||
"requiredOnTargetMachine": true
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
# WRNexusJS 0.7.0 — 21-Point Security and Performance Implementation
|
||||
|
||||
WRNexusJS 0.7.0 implements the framework-side foundations for all 21 requested security and performance areas. Secure defaults, compiler diagnostics, runtime enforcement, production reports, release gates, and adapter interfaces are included in this source release.
|
||||
|
||||
External infrastructure remains an application/deployment responsibility: TLS termination, Redis or another distributed cache, antivirus/CDR engines, image transcoding services, CDN configuration, an OTLP/metrics backend, database indexes, registry MFA, and project-specific authorization policy.
|
||||
|
||||
## Implementation matrix
|
||||
|
||||
| # | Area | Implemented in 0.7.0 |
|
||||
| --: | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| 1 | Targets and budgets | Expanded route, CSS, HTML, image, hydration, SSR, Web Vitals, request-count, and long-task budgets with warning/error enforcement and build reporting. |
|
||||
| 2 | Compiler/template security | Context-aware URL validation, unsafe protocol diagnostics, dangerous DOM/dynamic-code diagnostics, client/server boundary checks, persisted-secret checks, Trusted HTML policy, and bounded secure hydration serialization. |
|
||||
| 3 | Browser headers | CSP with nonce/report-only support, Trusted Types, HSTS, COOP, CORP, Referrer-Policy, Permissions-Policy, nosniff, frame protection, Origin-Agent-Cluster, and presets. |
|
||||
| 4 | Sessions/authentication | Idle and absolute expiry, sliding access, secure cookie defaults, server-side session backend support, and safer session lifecycle configuration. |
|
||||
| 5 | CSRF/CORS/authorization | CSRF token plus Origin and Fetch Metadata validation, opt-in exact-origin CORS, and continued server-side authz/tenant policy enforcement. |
|
||||
| 6 | Gateway/API hardening | URL/header/query/body limits, timeouts, concurrency limits, host/proxy trust, request IDs, IP rate limits, Fetch Metadata, access logs, and WebSocket queue/origin/message controls. |
|
||||
| 7 | SSRF | Safe fetch validates protocols and hosts, resolves and checks addresses, blocks private/special networks, revalidates redirects, limits size/time/redirects, and avoids credential forwarding. |
|
||||
| 8 | Uploads | Extension/MIME/size/aggregate/path controls, generated names, secure download disposition, inspector hooks, and antivirus/CDR adapter interfaces. |
|
||||
| 9 | Database | Query timing, timeouts, row caps, slow-query reporting, duplicate/N+1 detection, SELECT-star/unbounded-query warnings, and per-request query records. |
|
||||
| 10 | SSR/server | Runtime route classification, zero-JS/prerender analysis, request dedupe and cache foundations, streaming compatibility, and build-report visibility. |
|
||||
| 11 | Hydration/CSR | Static pages default to zero framework JavaScript, auto/client/document navigation modes, partial/lazy hydration foundations, batched reactive work, keyed updates, cancellation/disposal, and hydration telemetry. |
|
||||
| 12 | Build/bundles | Server/client separation, minification/hashing support, immutable runtime assets, runtime classification, production build reports, and enforceable budgets. |
|
||||
| 13 | CSS | Existing minification/token tooling plus diagnostics for transition-all, expensive blur/shadow patterns, broad selectors, and duplicate keyframes. |
|
||||
| 14 | Images/icons/fonts | Responsive image planning, srcset/sizes/dimensions/loading/decoding/fetch-priority policy, remote-host validation, LCP/oversizing audits, and continued per-icon/font optimization helpers. |
|
||||
| 15 | HTTP delivery | Brotli-first negotiation, gzip fallback, compression exclusions, ETags/conditional responses, immutable assets, cache-control helpers, stale policies, and preload/modulepreload support. |
|
||||
| 16 | Realtime/WebSocket | Authentication, origins, message byte/rate/depth limits, room/user quotas, schema and authorization predicates, prototype-pollution rejection, and gateway backpressure controls. |
|
||||
| 17 | Observability | Counters, gauges, histograms, HTTP middleware, request/error/active-request metrics, same-origin Web Vitals, browser collector, exporters, and Server-Timing integration. |
|
||||
| 18 | DevToolbar | Security checks for forms/CSRF/CSP/mixed content/storage/hydration leaks and performance checks for transfer, DOM, hydration, images, blocking assets, and long tasks. |
|
||||
| 19 | Tests/release gates | 0.7 validator, production security audit, benchmark budgets, type/lint/test/format pipeline, deterministic UI references, stage integrity checks, and compatibility validation. |
|
||||
| 20 | Supply chain | Private release policy, aligned versions, explicit migration, deterministic CycloneDX SBOM, secret/source-map/source leakage scanning, package SHA-256 manifests, and clean/pushed Git requirements. |
|
||||
| 21 | New packages | `@wrnexus/security`, `@wrnexus/cache`, `@wrnexus/image`, `@wrnexus/observability`, and `@wrnexus/benchmark`. |
|
||||
|
||||
## Compatibility
|
||||
|
||||
- Existing 0.6 component, parser, store, RPC, and runtime contracts remain supported.
|
||||
- The updater preserves existing security, performance, observability, and navigation configuration.
|
||||
- New projects use `navigation.mode: "auto"`; fully static routes ship no WRNexusJS JavaScript.
|
||||
- Set `navigation.mode: "client"` only when every route requires in-place client navigation.
|
||||
|
||||
## Mandatory project review before production
|
||||
|
||||
Framework controls do not replace application-specific review. Each production project must define and test:
|
||||
|
||||
- Roles, permissions, object ownership, tenant boundaries, and sensitive field access.
|
||||
- CSP source allowlists and third-party scripts.
|
||||
- Trusted proxies, public hosts, CORS origins, WebSocket origins, and outbound URL allowlists.
|
||||
- Session duration, MFA/passkey requirements, recovery policy, and high-risk reauthentication.
|
||||
- Upload type policy, storage isolation, antivirus/CDR adapters, quotas, and retention.
|
||||
- Cache privacy and invalidation for authenticated or tenant-specific data.
|
||||
- Database indexes, pool sizes, query limits, backups, and migration rollback.
|
||||
- Observability retention, sampling, redaction, and incident alerts.
|
||||
- CDN/TLS configuration, registry MFA, short-lived publish credentials, and disaster recovery.
|
||||
|
||||
## Production gates
|
||||
|
||||
```sh
|
||||
bun install
|
||||
bun run validate:0.7
|
||||
bun run security:framework
|
||||
bun run sbom
|
||||
bun run benchmark:framework
|
||||
bun run validate:staging
|
||||
bun run check
|
||||
bun run release:prepare
|
||||
```
|
||||
|
||||
Run `release:private` only after generated files and release changes are committed, pushed, and the working tree is clean.
|
||||
@@ -0,0 +1,28 @@
|
||||
# WRNexusJS 0.7.0 local validation requirement
|
||||
|
||||
The packaging environment does not provide Bun or the repository's installed ESLint/Prettier dependencies. Source-only TypeScript, Node-compatible validators, compiler sweeps, security probes, benchmarks, SBOM generation, package-stage integrity probes, and VS Code tests were completed here.
|
||||
|
||||
The authoritative complete validation must run in the target Windows repository with Bun 1.3 or newer:
|
||||
|
||||
```powershell
|
||||
bun install
|
||||
bun run validate:0.7
|
||||
bun run security:framework
|
||||
bun run sbom
|
||||
bun run benchmark:framework
|
||||
bun run validate:staging
|
||||
bun run check
|
||||
```
|
||||
|
||||
`bun run check` is required because it executes the complete repository TypeScript, ESLint, Bun test, and Prettier checks with the actual dependency graph.
|
||||
|
||||
Before publication:
|
||||
|
||||
```powershell
|
||||
bun run release:prepare
|
||||
git status
|
||||
git push origin main
|
||||
bun run release:private
|
||||
```
|
||||
|
||||
Do not publish if the working tree is dirty, the generated UI reference changes, a benchmark budget fails, the security audit reports an error, or staged package integrity verification fails.
|
||||
@@ -0,0 +1,27 @@
|
||||
# Publishing WRNexusJS 0.7.0 privately
|
||||
|
||||
Run the production gates before staging packages:
|
||||
|
||||
```sh
|
||||
bun install
|
||||
bun run validate:0.7
|
||||
bun run security:framework
|
||||
bun run sbom
|
||||
bun run benchmark:framework
|
||||
bun run validate:staging
|
||||
bun run check
|
||||
```
|
||||
|
||||
Prepare, commit, and publish only from a clean branch:
|
||||
|
||||
```sh
|
||||
bun run release:prepare
|
||||
git add --all
|
||||
git commit -m "release: WRNexusJS 0.7.0 security and performance foundation"
|
||||
git push origin main
|
||||
bun run release:private
|
||||
```
|
||||
|
||||
The release workflow validates the 0.7 migration, framework security audit, deterministic CycloneDX SBOM, benchmark budgets, full type/lint/test/format checks, deterministic UI references, restricted package staging, package SHA-256 manifests, clean Git state, and private-registry policy.
|
||||
|
||||
The staging verifier rejects secrets, private keys, source maps, TypeScript source files other than declarations, and unexpected environment files before publication.
|
||||
@@ -0,0 +1,52 @@
|
||||
# WRNexusJS 0.7.0 — Security and Performance Foundation
|
||||
|
||||
WRNexusJS 0.7.0 implements the framework-wide production hardening program across compiler security, SSR serialization, headers, CSRF, sessions, gateway limits, SSRF, uploads, database instrumentation, static runtime analysis, hydration telemetry, caching, images, HTTP compression, realtime controls, observability, DevToolbar, release gates, SBOM generation, and benchmarks.
|
||||
|
||||
## New packages
|
||||
|
||||
`@wrnexus/security`, `@wrnexus/cache`, `@wrnexus/image`, `@wrnexus/observability`, and `@wrnexus/benchmark`.
|
||||
|
||||
## Compatibility
|
||||
|
||||
The release keeps existing 0.6 syntax and component/runtime contracts. The updater adds the new packages and inserts production defaults only when the corresponding top-level config section is absent. Existing custom security, performance, observability, and navigation sections are preserved.
|
||||
|
||||
The new default navigation mode is `auto`: fully static pages ship no framework JavaScript and use native document navigation. Set `navigation.mode: "client"` to retain client navigation on every route.
|
||||
|
||||
## Required validation
|
||||
|
||||
```sh
|
||||
bun install
|
||||
bun run validate:0.7
|
||||
bun run security:framework
|
||||
bun run benchmark:framework
|
||||
bun run check
|
||||
```
|
||||
|
||||
## 0.7.0 R2 typecheck correction
|
||||
|
||||
- Removed leaked focused-typecheck shim files that polluted the root TypeScript program.
|
||||
- Added a validation gate preventing those temporary files from entering future archives.
|
||||
|
||||
## 0.7.0 R3 workspace-state correction
|
||||
|
||||
- Added a safe workspace repair command for stale files that survive ZIP overlays.
|
||||
- Root TypeScript explicitly excludes focused-typecheck helper declarations.
|
||||
- Local `.env` contents are retained while unsafe files are removed from Git tracking.
|
||||
- Security, release, and package-staging gates now reject tracked typecheck shims.
|
||||
- Added a Git-backed workspace repair regression test.
|
||||
|
||||
## 0.7.0 R4 Happy DOM test typing correction
|
||||
|
||||
- Derived synthetic validation event types from Happy DOM's own `dispatchEvent` signature.
|
||||
- Fixed the two remaining strict TypeScript errors in validation tests.
|
||||
- Clarified workspace check output with `would remove` wording in dry-run mode.
|
||||
- Added a validator guard for the Happy DOM event type contract.
|
||||
|
||||
## R6 lint cleanup
|
||||
|
||||
- Removed lint-blocked control-character regexes from URL security paths.
|
||||
- Enabled secure store hydration serialization.
|
||||
- Preserved caught SBOM parse errors with `cause`.
|
||||
- Fixed Node global handling in the workspace repair test.
|
||||
- Isolated local focused-typecheck leftovers from lint and formatting.
|
||||
- Added permanent `validate:0.7` regression gates.
|
||||
+6357
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,3 @@
|
||||
# WRNexusJS 0.7.0 implementation summary
|
||||
|
||||
The complete 21-area implementation matrix is in `docs/SECURITY-PERFORMANCE-0.7.md`. The source release includes executable validation, tests, migration, SBOM generation, benchmarks, production configuration defaults, and five new framework packages.
|
||||
@@ -0,0 +1,24 @@
|
||||
# Upgrade to WRNexusJS 0.7.0
|
||||
|
||||
```sh
|
||||
bunx @wrnexus/cli@0.7.0 update --version=0.7.0 --report
|
||||
bun install
|
||||
bun run validate:0.7
|
||||
bun run check:production
|
||||
```
|
||||
|
||||
## Navigation performance change
|
||||
|
||||
The updater adds `navigation.mode: "auto"` when navigation is not already configured. In auto mode, fully static pages ship no WRNexusJS JavaScript and links use native document navigation. Pages that already require browser behavior receive progressive client navigation.
|
||||
|
||||
Applications that require in-place navigation on every route can preserve the previous behavior explicitly:
|
||||
|
||||
```ts
|
||||
navigation: {
|
||||
mode: "client",
|
||||
}
|
||||
```
|
||||
|
||||
Use `mode: "document"` to disable client navigation everywhere.
|
||||
|
||||
Review CSP sources, Trusted Types compatibility, CORS origins, trusted proxy/host settings, tenant authorization, upload scanner adapters, remote image hosts, cache privacy, WebSocket limits, and performance budgets before enforcing production mode.
|
||||
@@ -4,7 +4,6 @@
|
||||
"workspaces": {
|
||||
"": {
|
||||
"name": "wrnexus",
|
||||
"version": "0.6.0",
|
||||
"devDependencies": {
|
||||
"@eslint/js": "latest",
|
||||
"@types/bun": "latest",
|
||||
@@ -87,11 +86,11 @@
|
||||
},
|
||||
"packages/ai": {
|
||||
"name": "@wrnexus/ai",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
},
|
||||
"packages/auth": {
|
||||
"name": "@wrnexus/auth",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"dependencies": {
|
||||
"@wrnexus/authz": "workspace:*",
|
||||
"@wrnexus/captcha": "workspace:*",
|
||||
@@ -113,11 +112,22 @@
|
||||
},
|
||||
"packages/authz": {
|
||||
"name": "@wrnexus/authz",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
},
|
||||
"packages/benchmark": {
|
||||
"name": "@wrnexus/benchmark",
|
||||
"version": "0.7.0",
|
||||
},
|
||||
"packages/cache": {
|
||||
"name": "@wrnexus/cache",
|
||||
"version": "0.7.0",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
},
|
||||
},
|
||||
"packages/captcha": {
|
||||
"name": "@wrnexus/captcha",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
"@wrnexus/plugin": "workspace:*",
|
||||
@@ -131,7 +141,7 @@
|
||||
},
|
||||
"packages/cli": {
|
||||
"name": "@wrnexus/cli",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"bin": {
|
||||
"wrnexus": "src/index.ts",
|
||||
},
|
||||
@@ -152,29 +162,30 @@
|
||||
},
|
||||
"packages/compiler": {
|
||||
"name": "@wrnexus/compiler",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"dependencies": {
|
||||
"@wrnexus/store": "workspace:*",
|
||||
"@wrnexus/syntax": "workspace:*",
|
||||
},
|
||||
},
|
||||
"packages/core": {
|
||||
"name": "@wrnexus/core",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
},
|
||||
"packages/csr": {
|
||||
"name": "@wrnexus/csr",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
},
|
||||
},
|
||||
"packages/db": {
|
||||
"name": "@wrnexus/db",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
},
|
||||
"packages/dev-server": {
|
||||
"name": "@wrnexus/dev-server",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"dependencies": {
|
||||
"@wrnexus/compiler": "workspace:*",
|
||||
"@wrnexus/core": "workspace:*",
|
||||
@@ -182,10 +193,13 @@
|
||||
"@wrnexus/db": "workspace:*",
|
||||
"@wrnexus/dev-toolbar": "workspace:*",
|
||||
"@wrnexus/i18n": "workspace:*",
|
||||
"@wrnexus/observability": "workspace:*",
|
||||
"@wrnexus/plugin": "workspace:*",
|
||||
"@wrnexus/pubsub": "workspace:*",
|
||||
"@wrnexus/router": "workspace:*",
|
||||
"@wrnexus/security": "workspace:*",
|
||||
"@wrnexus/ssr": "workspace:*",
|
||||
"@wrnexus/store": "workspace:*",
|
||||
"@wrnexus/styles": "workspace:*",
|
||||
"@wrnexus/ui": "workspace:*",
|
||||
"@wrnexus/uploader": "workspace:*",
|
||||
@@ -194,7 +208,7 @@
|
||||
},
|
||||
"packages/dev-toolbar": {
|
||||
"name": "@wrnexus/dev-toolbar",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"devDependencies": {
|
||||
"@types/bun": "latest",
|
||||
"typescript": "^5.9.2",
|
||||
@@ -202,78 +216,105 @@
|
||||
},
|
||||
"packages/encryption": {
|
||||
"name": "@wrnexus/encryption",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
},
|
||||
"packages/helpers": {
|
||||
"name": "@wrnexus/helpers",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
},
|
||||
},
|
||||
"packages/i18n": {
|
||||
"name": "@wrnexus/i18n",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
},
|
||||
},
|
||||
"packages/image": {
|
||||
"name": "@wrnexus/image",
|
||||
"version": "0.7.0",
|
||||
"dependencies": {
|
||||
"@wrnexus/security": "workspace:*",
|
||||
},
|
||||
},
|
||||
"packages/jwt": {
|
||||
"name": "@wrnexus/jwt",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
},
|
||||
"packages/mobile": {
|
||||
"name": "@wrnexus/mobile",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"dependencies": {
|
||||
"@wrnexus/native": "workspace:*",
|
||||
},
|
||||
},
|
||||
"packages/native": {
|
||||
"name": "@wrnexus/native",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
},
|
||||
"packages/oauth": {
|
||||
"name": "@wrnexus/oauth",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
},
|
||||
"packages/observability": {
|
||||
"name": "@wrnexus/observability",
|
||||
"version": "0.7.0",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
},
|
||||
},
|
||||
"packages/plugin": {
|
||||
"name": "@wrnexus/plugin",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"dependencies": {
|
||||
"@wrnexus/syntax": "workspace:*",
|
||||
},
|
||||
},
|
||||
"packages/pubsub": {
|
||||
"name": "@wrnexus/pubsub",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
},
|
||||
"packages/queue": {
|
||||
"name": "@wrnexus/queue",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
},
|
||||
"packages/reactive": {
|
||||
"name": "@wrnexus/reactive",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
},
|
||||
"packages/router": {
|
||||
"name": "@wrnexus/router",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"dependencies": {
|
||||
"@wrnexus/compiler": "workspace:*",
|
||||
"@wrnexus/core": "workspace:*",
|
||||
},
|
||||
},
|
||||
"packages/ssr": {
|
||||
"name": "@wrnexus/ssr",
|
||||
"version": "0.6.0",
|
||||
"packages/security": {
|
||||
"name": "@wrnexus/security",
|
||||
"version": "0.7.0",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
},
|
||||
},
|
||||
"packages/ssr": {
|
||||
"name": "@wrnexus/ssr",
|
||||
"version": "0.7.0",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
"@wrnexus/security": "workspace:*",
|
||||
"@wrnexus/store": "workspace:*",
|
||||
},
|
||||
},
|
||||
"packages/store": {
|
||||
"name": "@wrnexus/store",
|
||||
"version": "0.7.0",
|
||||
},
|
||||
"packages/styles": {
|
||||
"name": "@wrnexus/styles",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
"@wrnexus/plugin": "workspace:*",
|
||||
@@ -282,50 +323,45 @@
|
||||
},
|
||||
"packages/syntax": {
|
||||
"name": "@wrnexus/syntax",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
},
|
||||
"packages/test": {
|
||||
"name": "@wrnexus/test",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
},
|
||||
"packages/tracking": {
|
||||
"name": "@wrnexus/tracking",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
},
|
||||
"packages/typecheck": {
|
||||
"name": "@wrnexus/typecheck",
|
||||
"version": "0.7.0",
|
||||
"dependencies": {
|
||||
"@wrnexus/syntax": "workspace:*",
|
||||
"typescript": "^5.5.0",
|
||||
},
|
||||
},
|
||||
"packages/ui": {
|
||||
"name": "@wrnexus/ui",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
},
|
||||
},
|
||||
"packages/uploader": {
|
||||
"name": "@wrnexus/uploader",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
},
|
||||
},
|
||||
"packages/validation": {
|
||||
"name": "@wrnexus/validation",
|
||||
"version": "0.6.0",
|
||||
},
|
||||
"packages/store": {
|
||||
"name": "@wrnexus/store",
|
||||
"version": "0.6.0",
|
||||
},
|
||||
"packages/typecheck": {
|
||||
"name": "@wrnexus/typecheck",
|
||||
"version": "0.6.0",
|
||||
"dependencies": {
|
||||
"@wrnexus/compiler": "workspace:*",
|
||||
"@wrnexus/syntax": "workspace:*",
|
||||
"typescript": "^5.5.0",
|
||||
},
|
||||
"version": "0.7.0",
|
||||
},
|
||||
"services/managed-captcha": {
|
||||
"name": "@wrnexus/managed-captcha-service",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"dependencies": {
|
||||
"@wrnexus/captcha": "workspace:*",
|
||||
},
|
||||
@@ -589,6 +625,10 @@
|
||||
|
||||
"@wrnexus/authz": ["@wrnexus/authz@workspace:packages/authz"],
|
||||
|
||||
"@wrnexus/benchmark": ["@wrnexus/benchmark@workspace:packages/benchmark"],
|
||||
|
||||
"@wrnexus/cache": ["@wrnexus/cache@workspace:packages/cache"],
|
||||
|
||||
"@wrnexus/captcha": ["@wrnexus/captcha@workspace:packages/captcha"],
|
||||
|
||||
"@wrnexus/cli": ["@wrnexus/cli@workspace:packages/cli"],
|
||||
@@ -611,6 +651,8 @@
|
||||
|
||||
"@wrnexus/i18n": ["@wrnexus/i18n@workspace:packages/i18n"],
|
||||
|
||||
"@wrnexus/image": ["@wrnexus/image@workspace:packages/image"],
|
||||
|
||||
"@wrnexus/jwt": ["@wrnexus/jwt@workspace:packages/jwt"],
|
||||
|
||||
"@wrnexus/managed-captcha-service": ["@wrnexus/managed-captcha-service@workspace:services/managed-captcha"],
|
||||
@@ -621,6 +663,8 @@
|
||||
|
||||
"@wrnexus/oauth": ["@wrnexus/oauth@workspace:packages/oauth"],
|
||||
|
||||
"@wrnexus/observability": ["@wrnexus/observability@workspace:packages/observability"],
|
||||
|
||||
"@wrnexus/plugin": ["@wrnexus/plugin@workspace:packages/plugin"],
|
||||
|
||||
"@wrnexus/pubsub": ["@wrnexus/pubsub@workspace:packages/pubsub"],
|
||||
@@ -631,6 +675,8 @@
|
||||
|
||||
"@wrnexus/router": ["@wrnexus/router@workspace:packages/router"],
|
||||
|
||||
"@wrnexus/security": ["@wrnexus/security@workspace:packages/security"],
|
||||
|
||||
"@wrnexus/ssr": ["@wrnexus/ssr@workspace:packages/ssr"],
|
||||
|
||||
"@wrnexus/store": ["@wrnexus/store@workspace:packages/store"],
|
||||
|
||||
@@ -0,0 +1,151 @@
|
||||
# WRNexusJS 0.7 Security and Performance Foundation
|
||||
|
||||
WRNexusJS 0.7 makes the secure and fast path the framework default. This document maps the 21 production-hardening areas to concrete packages, runtime behavior, diagnostics, and release gates. Application-specific authorization, infrastructure capacity, CSP allowlists, malware engines, Redis/CDN adapters, and deployment configuration still require project review.
|
||||
|
||||
## Default production targets
|
||||
|
||||
- LCP <= 2.5 s, INP <= 200 ms, CLS <= 0.1.
|
||||
- Long tasks <= 50 ms.
|
||||
- Preferred initial route JavaScript <= 50 KiB compressed-equivalent source budget.
|
||||
- Preferred critical route CSS <= 25 KiB.
|
||||
- Sensitive responses use private/no-store policies.
|
||||
- Static pages are classified so builds can avoid unnecessary client runtime work.
|
||||
|
||||
## 1. Framework targets and budgets
|
||||
|
||||
Implemented in `@wrnexus/core/performance` and the production build report. Budgets now cover route JS, CSS, HTML, images, hydration, SSR, LCP, INP, CLS, TTFB, long tasks, hydration boundaries, and request count. Builds can warn or fail through `performance.enforcement`.
|
||||
|
||||
## 2. Compiler and template security
|
||||
|
||||
- Context-aware URL attributes reject dangerous protocols in SSR and reactive updates.
|
||||
- Static `javascript:`, `vbscript:`, `file:`, unsafe `data:` URLs are compiler diagnostics.
|
||||
- Client functions using dynamic-code or unsafe DOM HTML sinks are rejected.
|
||||
- Environment-derived secrets cannot enter client state; sensitive values cannot use browser persistence.
|
||||
- Server/client state and function boundaries remain compiler-enforced.
|
||||
- Hydration/store payloads use bounded, HTML-safe serialization with redaction and prototype-pollution checks.
|
||||
|
||||
## 3. Browser security headers
|
||||
|
||||
`@wrnexus/core` provides CSP, Trusted Types, HSTS, COOP, CORP, Referrer-Policy, Permissions-Policy, X-Content-Type-Options, frame protection, Origin-Agent-Cluster, and DNS-prefetch controls. `@wrnexus/security` adds balanced, strict, and API presets. CSP is nonce-aware and can run report-only.
|
||||
|
||||
## 4. Sessions and authentication
|
||||
|
||||
The core session layer now supports idle and absolute expiry policies, sliding access, configurable secure cookie defaults, and server-side session backends. `@wrnexus/auth` remains responsible for password/passkey/MFA/account flows. Credentials must remain in Secure, HttpOnly cookies, not browser storage.
|
||||
|
||||
## 5. CSRF, CORS, and authorization
|
||||
|
||||
CSRF validates token, Origin, and Fetch Metadata for unsafe methods. CORS remains opt-in and exact-origin capable. `@wrnexus/authz` and tenant middleware provide server-side policy and tenant scope; UI hiding is never treated as authorization.
|
||||
|
||||
## 6. Gateway and API hardening
|
||||
|
||||
Gateway and app runtime support URL/header/query/body limits, timeouts, concurrency limits, host allowlists, Fetch Metadata, IP rate limits, trusted forwarding, access logs, request IDs, and WebSocket origin/message/queue controls.
|
||||
|
||||
## 7. SSRF protection
|
||||
|
||||
`@wrnexus/security/safeFetch` validates protocol/host, resolves every address, blocks loopback/private/link-local/multicast ranges, revalidates redirects, limits redirects and response size, applies timeouts, and never forwards credentials unless explicitly allowed.
|
||||
|
||||
## 8. File-upload security
|
||||
|
||||
Core upload primitives support extension and MIME allowlists, size/aggregate limits, random filenames, path safety, inspector and malware-scanner adapters, response hardening, and controlled download disposition. Production applications connect their antivirus/CDR engine through the scanner interface.
|
||||
|
||||
## 9. Database performance and security
|
||||
|
||||
`instrumentDb` adds query timeout, max-row enforcement, slow-query reporting, duplicate/N+1 detection, SELECT-star and unbounded-query warnings, and per-request query records. Existing drivers continue parameterized query handling and transaction support.
|
||||
|
||||
## 10. SSR and server performance
|
||||
|
||||
Existing streaming responses, request-local dedupe, route caching primitives, and static manifests remain. The compiler now classifies routes as static, static-interactive, request SSR, authenticated SSR, streaming SSR, or dynamic; the production build report records prerenderability and runtime needs.
|
||||
|
||||
## 11. Hydration and CSR performance
|
||||
|
||||
WRNexusJS now defaults navigation to `auto`: non-interactive static markup ships no framework JavaScript and uses native document navigation. Interactive routes receive only the runtimes their rendered markers require. Explicit `client` and `document` modes remain available. Partial hydration boundaries, lazy hydration strategies, keyed list preservation, direct reactive DOM updates, batched signal work, navigation cancellation, page-store disposal, and delegated framework event handling remain. Hydration duration emits `wrnexus:hydrated` telemetry.
|
||||
|
||||
## 12. Bundle and build optimization
|
||||
|
||||
Production builds are minified, content-hashed where assets are emitted, server/client separated, and measured through `build-report.json`. Package runtimes remain independently emitted and immutable. Runtime classification and budget failures are release-visible. Persistent build-cache and deployment adapters remain configurable.
|
||||
|
||||
## 13. CSS performance
|
||||
|
||||
Styles remain production-minified and package-aware. `auditCssPerformance` detects `transition: all`, expensive blur/shadow patterns, broad universal selectors, and duplicate keyframes while preserving the existing design-token, contrast, and Tailwind source audits.
|
||||
|
||||
## 14. Images, icons, and fonts
|
||||
|
||||
`@wrnexus/image` creates validated responsive image attributes, deduplicated srcsets, sizes, dimensions, loading/decoding/fetch-priority policies, secure remote-host rules, and LCP/oversizing audits. Existing font helpers retain self-hosting/preload/CSP support. UI packages continue per-icon imports rather than a whole-library browser bundle.
|
||||
|
||||
## 15. HTTP delivery
|
||||
|
||||
The runtime negotiates Brotli first and gzip fallback, avoids recompressing unsuitable responses, supports ETags/conditional requests, immutable versioned framework assets, cache-control helpers including stale-while-revalidate/stale-if-error, preload/modulepreload, and proxy-aware HTTPS handling.
|
||||
|
||||
## 16. Realtime and WebSocket security
|
||||
|
||||
Rooms now support authentication requirements, max message bytes, messages/second, room/user connection quotas, maximum JSON depth, message schema/authorization predicates, prototype-pollution rejection, violation callbacks, origin validation, and gateway queue limits. Pub/sub bridge behavior remains available for horizontal scaling.
|
||||
|
||||
## 17. Observability
|
||||
|
||||
`@wrnexus/observability` provides counters, gauges, histograms, HTTP middleware, request/error/active-request metrics, same-origin Web Vitals ingestion, an opt-in browser collector, and exporter adapters. It avoids collecting request bodies or user identifiers by default.
|
||||
|
||||
## 18. DevToolbar
|
||||
|
||||
Security checks now include secret query parameters, insecure forms, missing CSRF, CSP nonce issues, inline styles, mixed content, unsandboxed iframes, sensitive local storage, and leaked hydration fields. Performance checks cover total/JS transfer, slow resources, DOM size, hydration count, oversized images, render-blocking assets, and long tasks.
|
||||
|
||||
## 19. Tests and release gates
|
||||
|
||||
`validate:0.7`, `security:framework`, `benchmark:framework`, typecheck, lint, tests, formatting, UI reference verification, and package staging run before release. New package tests cover serialization, prototype pollution, URL policy, caching, images, metrics, Web Vitals, benchmarks, and realtime limits.
|
||||
|
||||
## 20. Supply-chain security
|
||||
|
||||
The release remains private/restricted, requires aligned versions and an explicit migration, checks for secret-like files and dangerous static URLs, generates CycloneDX `SBOM-0.7.0.cdx.json`, verifies staged package contents, requires clean/pushed Git state, and verifies registry privacy after publication. Registry MFA and short-lived publishing credentials remain operational requirements.
|
||||
|
||||
## 21. New packages
|
||||
|
||||
- `@wrnexus/security`: security policy, secure serialization, URL validation, request limits, secure cookies, SSRF-safe fetch.
|
||||
- `@wrnexus/cache`: bounded tag cache, deduplication, response caching, ETag, stale policies and invalidation.
|
||||
- `@wrnexus/image`: responsive image planning and audits.
|
||||
- `@wrnexus/observability`: metrics, request instrumentation, Web Vitals, exporters.
|
||||
- `@wrnexus/benchmark`: deterministic benchmarks and regression budgets.
|
||||
|
||||
## Production configuration baseline
|
||||
|
||||
```ts
|
||||
export default {
|
||||
navigation: { mode: "auto" },
|
||||
security: {
|
||||
headers: true,
|
||||
requestLimits: {
|
||||
maxUrlLength: 8192,
|
||||
maxHeaderCount: 100,
|
||||
maxHeaderBytes: 32768,
|
||||
maxQueryParameters: 100,
|
||||
maxBodyBytes: 10485760,
|
||||
timeoutMs: 30000,
|
||||
maxConcurrent: 1000,
|
||||
fetchMetadata: true,
|
||||
},
|
||||
contentSecurityPolicy: { enabled: true, useDefaults: true },
|
||||
trustedTypes: { enabled: true, requireForScript: true },
|
||||
hsts: { enabled: true, maxAge: 63072000, includeSubDomains: true, preload: true },
|
||||
},
|
||||
performance: {
|
||||
enforcement: "error",
|
||||
analyze: true,
|
||||
budgets: {
|
||||
routeJsBytes: 51200,
|
||||
routeCssBytes: 25600,
|
||||
hydrationMs: 200,
|
||||
serverRenderMs: 500,
|
||||
lcpMs: 2500,
|
||||
inpMs: 200,
|
||||
cls: 0.1,
|
||||
ttfbMs: 800,
|
||||
},
|
||||
},
|
||||
observability: {
|
||||
enabled: true,
|
||||
serverTiming: true,
|
||||
sampleRate: 0.1,
|
||||
webVitals: true,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
Use report-only CSP and warning-level performance enforcement while migrating an existing application, then enforce after resolving findings.
|
||||
Generated
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "wrnexus",
|
||||
"version": "0.5.0",
|
||||
"version": "0.7.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "wrnexus",
|
||||
"version": "0.5.0",
|
||||
"version": "0.7.0",
|
||||
"license": "SEE LICENSE IN LICENSE",
|
||||
"devDependencies": {
|
||||
"@vscode/vsce": "^3.9.2"
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
"name": "wrnexus",
|
||||
"displayName": "WRNexus Language Support",
|
||||
"description": "Complete WRNexus v0.6 language support for typed imports, props, state, outputs, runtime functions, stores, diagnostics, formatting, navigation, and migration assistance.",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"publisher": "wrnexus",
|
||||
"private": true,
|
||||
"license": "SEE LICENSE IN LICENSE",
|
||||
|
||||
+191
-17
@@ -3,6 +3,79 @@
|
||||
const __nodeRequire = require;
|
||||
const __path = __nodeRequire("node:path");
|
||||
const __modules = {
|
||||
"packages/compiler/src/analysis.ts": function (module, exports, require, __filename, __dirname) {
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.analyzeRuntimeRequirements = analyzeRuntimeRequirements;
|
||||
function hasEvent(nodes) {
|
||||
for (const node of nodes) {
|
||||
if (node.type === "element") {
|
||||
if (node.attrs.some((attribute) => attribute.event))
|
||||
return true;
|
||||
if (hasEvent(node.children))
|
||||
return true;
|
||||
}
|
||||
else if (node.type === "each") {
|
||||
if (hasEvent(node.body) || hasEvent(node.empty))
|
||||
return true;
|
||||
}
|
||||
else if (node.type === "if") {
|
||||
if (node.branches.some((branch) => hasEvent(branch.body)))
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
function analyzeRuntimeRequirements(ast) {
|
||||
const reasons = [];
|
||||
const clientFunctions = ast.runtimeFunctions.some((fn) => fn.runtime !== "server");
|
||||
const clientState = ast.states.some((state) => state.runtime !== "server");
|
||||
const interactive = clientFunctions ||
|
||||
clientState ||
|
||||
ast.effects.length > 0 ||
|
||||
ast.watches.length > 0 ||
|
||||
hasEvent(ast.view);
|
||||
if (interactive)
|
||||
reasons.push("client interactivity");
|
||||
const requestData = ast.loads.length > 0 ||
|
||||
ast.actions.length > 0 ||
|
||||
ast.dataApis.length > 0 ||
|
||||
ast.apis.length > 0 ||
|
||||
ast.realtimes.length > 0 ||
|
||||
ast.runtimeFunctions.some((fn) => fn.runtime === "server") ||
|
||||
ast.states.some((state) => state.runtime === "server");
|
||||
if (requestData)
|
||||
reasons.push("server/request data");
|
||||
const authenticated = /^(?:required|true)$/i.test(ast.security.auth ?? "");
|
||||
if (authenticated)
|
||||
reasons.push("authentication required");
|
||||
const streaming = /^(?:true|required)$/i.test(ast.security.streaming ?? "");
|
||||
if (streaming)
|
||||
reasons.push("streaming enabled");
|
||||
let kind;
|
||||
if (streaming)
|
||||
kind = "streaming-ssr";
|
||||
else if (authenticated)
|
||||
kind = "authenticated-ssr";
|
||||
else if (requestData && interactive)
|
||||
kind = "dynamic";
|
||||
else if (requestData)
|
||||
kind = "request-ssr";
|
||||
else if (interactive)
|
||||
kind = "static-interactive";
|
||||
else
|
||||
kind = "static";
|
||||
return {
|
||||
kind,
|
||||
canPrerender: kind === "static" || kind === "static-interactive",
|
||||
needsClientRuntime: interactive && ast.hydrate !== "none" && ast.runtime !== "server",
|
||||
needsServerRuntime: requestData || authenticated || streaming || ast.runtime === "server",
|
||||
hydrationStrategy: interactive ? (ast.hydrate ?? "load") : null,
|
||||
reasons,
|
||||
};
|
||||
}
|
||||
|
||||
},
|
||||
"packages/compiler/src/cache.ts": function (module, exports, require, __filename, __dirname) {
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
@@ -339,6 +412,30 @@ const HTML_BOOLEAN_ATTRIBUTES = new Set([
|
||||
function isHtmlBooleanAttribute(name) {
|
||||
return HTML_BOOLEAN_ATTRIBUTES.has(name.toLowerCase());
|
||||
}
|
||||
const URL_ATTRIBUTES = new Set([
|
||||
"href",
|
||||
"src",
|
||||
"action",
|
||||
"formaction",
|
||||
"poster",
|
||||
"cite",
|
||||
"background",
|
||||
"xlink:href",
|
||||
]);
|
||||
function sanitizeUrlAttribute(value) {
|
||||
const compact = value.trim().replace(/[\u0000-\u0020]+/g, "");
|
||||
const lower = compact.toLowerCase();
|
||||
if (/^(?:javascript|vbscript|file):/.test(lower))
|
||||
return "about:blank";
|
||||
if (/^data:(?!image\/(?:png|gif|jpeg|webp|avif);)/.test(lower))
|
||||
return "about:blank";
|
||||
return value;
|
||||
}
|
||||
function safeAttributeValue(name, value) {
|
||||
if (!URL_ATTRIBUTES.has(name.toLowerCase()) || value.includes("{"))
|
||||
return value;
|
||||
return sanitizeUrlAttribute(value);
|
||||
}
|
||||
/** Escape a value placed inside a double-quoted HTML attribute. */
|
||||
function attrEscape(value) {
|
||||
return value
|
||||
@@ -368,7 +465,9 @@ function renderAttr(attr) {
|
||||
case "csrText":
|
||||
return "";
|
||||
default:
|
||||
return attr.boolean ? ` ${attr.name}` : ` ${attr.name}="${attrEscape(attr.value)}"`;
|
||||
return attr.boolean
|
||||
? ` ${attr.name}`
|
||||
: ` ${attr.name}="${attrEscape(safeAttributeValue(attr.name, attr.value))}"`;
|
||||
}
|
||||
}
|
||||
function eventAttribute(name) {
|
||||
@@ -423,7 +522,7 @@ function renderAttrs(attrs, csrId, reactive = null, dynamicExpressions) {
|
||||
if (initial === null)
|
||||
return base;
|
||||
const marker = JSON.stringify([attr.name, attr.value]);
|
||||
return ` ${attr.name}="${attrEscape(initial)}" data-wrn-bind-${bindIndex++}="${attrEscape(marker)}"`;
|
||||
return ` ${attr.name}="${attrEscape(URL_ATTRIBUTES.has(attr.name.toLowerCase()) ? sanitizeUrlAttribute(initial) : initial)}" data-wrn-bind-${bindIndex++}="${attrEscape(marker)}"`;
|
||||
})
|
||||
.join("");
|
||||
return csrId ? `${rendered} data-wrnexus-csr="${attrEscape(csrId)}"` : rendered;
|
||||
@@ -2009,7 +2108,7 @@ function renderPageComponentAttr(attr, dynamicExpressions) {
|
||||
}
|
||||
const expression = wholeAttributeExpression(attr.value);
|
||||
if (!expression) {
|
||||
return ` ${attr.name}="${attrEscape(attr.value)}"`;
|
||||
return ` ${attr.name}="${attrEscape(safeAttributeValue(attr.name, attr.value))}"`;
|
||||
}
|
||||
dynamicExpressions.push(`\${__wrnexusPropAttr(${expression})}`);
|
||||
const marker = `\x00WRNEACH${dynamicExpressions.length - 1}\x00`;
|
||||
@@ -2097,7 +2196,7 @@ function resolveWrnImports(declarations, importer, options) {
|
||||
* `@wrnexus/syntax` package. This package owns platform-specific codegen.
|
||||
*/
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
exports.DependencyGraph = exports.createCompilationCache = exports.compilationKey = exports.runtimeTypeOf = exports.inferredRuntimeType = exports.eraseFunctionTypes = exports.LexError = exports.Lexer = exports.NativeCompileError = exports.generateNative = exports.createWrnSourceMap = exports.resolveWrnImports = exports.resolveWrnImport = exports.createComponentContract = exports.generateStoreModule = exports.generateStoreBrowserModule = exports.generateDeclarations = exports.rpcManifest = exports.generateServerFunctionsModule = exports.generateBrowserModule = exports.generateTargets = exports.generate = exports.ParseError = exports.parse = exports.formatDiagnostic = exports.diagnosticFromError = exports.diagnose = exports.assertValidAst = void 0;
|
||||
exports.DependencyGraph = exports.createCompilationCache = exports.compilationKey = exports.runtimeTypeOf = exports.inferredRuntimeType = exports.eraseFunctionTypes = exports.LexError = exports.Lexer = exports.NativeCompileError = exports.generateNative = exports.analyzeRuntimeRequirements = exports.createWrnSourceMap = exports.resolveWrnImports = exports.resolveWrnImport = exports.createComponentContract = exports.generateStoreModule = exports.generateStoreBrowserModule = exports.generateDeclarations = exports.rpcManifest = exports.generateServerFunctionsModule = exports.generateBrowserModule = exports.generateTargets = exports.generate = exports.ParseError = exports.parse = exports.formatDiagnostic = exports.diagnosticFromError = exports.diagnose = exports.assertValidAst = void 0;
|
||||
exports.compileNativeWireFile = compileNativeWireFile;
|
||||
exports.compileWireFile = compileWireFile;
|
||||
exports.compile = compile;
|
||||
@@ -2132,6 +2231,8 @@ Object.defineProperty(exports, "resolveWrnImport", { enumerable: true, get: func
|
||||
Object.defineProperty(exports, "resolveWrnImports", { enumerable: true, get: function () { return import_resolver_ts_1.resolveWrnImports; } });
|
||||
var source_map_ts_1 = require("./source-map.js");
|
||||
Object.defineProperty(exports, "createWrnSourceMap", { enumerable: true, get: function () { return source_map_ts_1.createWrnSourceMap; } });
|
||||
var analysis_ts_1 = require("./analysis.js");
|
||||
Object.defineProperty(exports, "analyzeRuntimeRequirements", { enumerable: true, get: function () { return analysis_ts_1.analyzeRuntimeRequirements; } });
|
||||
var native_codegen_ts_2 = require("./native-codegen.js");
|
||||
Object.defineProperty(exports, "generateNative", { enumerable: true, get: function () { return native_codegen_ts_2.generateNative; } });
|
||||
Object.defineProperty(exports, "NativeCompileError", { enumerable: true, get: function () { return native_codegen_ts_2.NativeCompileError; } });
|
||||
@@ -2649,7 +2750,7 @@ function __diagnostic(code, message, details) {
|
||||
}
|
||||
function __csrfToken() {
|
||||
if (typeof document === "undefined") return undefined;
|
||||
const match = /(?:^|;\\s*)wrnexus_csrf=([^;]+)/.exec(document.cookie || "");
|
||||
const match = /(?:^|;\\s*)wire-csrf=([^;]+)/.exec(document.cookie || "");
|
||||
return match ? decodeURIComponent(match[1]) : undefined;
|
||||
}
|
||||
async function __callServerFunction(storeName, functionName, args, options) {
|
||||
@@ -2660,7 +2761,7 @@ async function __callServerFunction(storeName, functionName, args, options) {
|
||||
method: "POST",
|
||||
credentials: "same-origin",
|
||||
signal: options.signal,
|
||||
headers: Object.assign({ "content-type": "application/json", "x-request-id": traceId }, csrf ? { "x-wrnexus-csrf": csrf } : {}, options.headers || {}),
|
||||
headers: Object.assign({ "content-type": "application/json", "x-request-id": traceId }, csrf ? { "x-csrf-token": csrf } : {}, options.headers || {}),
|
||||
body: JSON.stringify({ component: storeName, function: functionName, args: args }),
|
||||
});
|
||||
const payload = await response.json().catch(function () { return null; });
|
||||
@@ -3129,20 +3230,65 @@ function astDiagnostics(ast, options) {
|
||||
});
|
||||
}
|
||||
let interactive = ast.states.length > 0 || ast.effects.length > 0 || ast.watches.length > 0;
|
||||
const urlAttributes = new Set(["href", "src", "action", "formaction", "poster", "cite", "background", "xlink:href"]);
|
||||
walk(ast.view, (node) => {
|
||||
if (node.type === "element" && node.attrs.some((attribute) => attribute.event))
|
||||
interactive = true;
|
||||
if (!options.accessibility || node.type !== "element")
|
||||
if (node.type !== "element")
|
||||
return;
|
||||
if (node.attrs.some((attribute) => attribute.event))
|
||||
interactive = true;
|
||||
const tag = node.tag.toLowerCase();
|
||||
if (tag === "img" && !node.attrs.some((attribute) => attribute.name === "alt")) {
|
||||
diagnostics.push({
|
||||
code: spec_ts_1.WRN_DIAGNOSTIC_CODES.accessibility,
|
||||
severity: "warning",
|
||||
message: "Image is missing an alt attribute.",
|
||||
hint: 'Add alt text, or alt="" for a decorative image.',
|
||||
file: options.file,
|
||||
});
|
||||
for (const attribute of node.attrs) {
|
||||
if (attribute.event || attribute.boolean || !urlAttributes.has(attribute.name.toLowerCase()))
|
||||
continue;
|
||||
if (attribute.value.includes("{"))
|
||||
continue;
|
||||
const value = attribute.value.trim().replace(/[\u0000-\u0020]+/g, "").toLowerCase();
|
||||
if (/^(?:javascript|vbscript|file):/.test(value) || /^data:(?!image\/(?:png|gif|jpeg|webp|avif);)/.test(value)) {
|
||||
diagnostics.push({
|
||||
code: "WRN-SEC-UNSAFE-URL",
|
||||
severity: "error",
|
||||
message: `Unsafe URL protocol in ${attribute.name} on <${node.tag}>.`,
|
||||
hint: "Use a relative URL, https:, mailto:, tel:, or a framework-validated URL helper.",
|
||||
file: options.file,
|
||||
});
|
||||
}
|
||||
}
|
||||
if (tag === "a") {
|
||||
const target = node.attrs.find((attribute) => attribute.name === "target")?.value;
|
||||
const rel = node.attrs.find((attribute) => attribute.name === "rel")?.value ?? "";
|
||||
if (target === "_blank" && !/\bnoopener\b/i.test(rel)) {
|
||||
diagnostics.push({
|
||||
code: "WRN-SEC-BLANK-REL",
|
||||
severity: "warning",
|
||||
message: "A target=_blank link should include rel=noopener.",
|
||||
hint: 'Add rel="noopener noreferrer".',
|
||||
file: options.file,
|
||||
});
|
||||
}
|
||||
}
|
||||
if (!options.accessibility)
|
||||
return;
|
||||
if (tag === "img") {
|
||||
if (!node.attrs.some((attribute) => attribute.name === "alt")) {
|
||||
diagnostics.push({
|
||||
code: spec_ts_1.WRN_DIAGNOSTIC_CODES.accessibility,
|
||||
severity: "warning",
|
||||
message: "Image is missing an alt attribute.",
|
||||
hint: 'Add alt text, or alt="" for a decorative image.',
|
||||
file: options.file,
|
||||
});
|
||||
}
|
||||
const hasWidth = node.attrs.some((attribute) => attribute.name === "width");
|
||||
const hasHeight = node.attrs.some((attribute) => attribute.name === "height");
|
||||
if (!hasWidth || !hasHeight) {
|
||||
diagnostics.push({
|
||||
code: "WRN-PERF-IMAGE-DIMENSIONS",
|
||||
severity: "warning",
|
||||
message: "Image width and height are required to prevent layout shifts.",
|
||||
hint: "Declare intrinsic width and height, or use @wrnexus/image.",
|
||||
file: options.file,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
if (ast.runtime === "server" && interactive) {
|
||||
@@ -3171,6 +3317,24 @@ function astDiagnostics(ast, options) {
|
||||
if (fn.runtime === "server" && /\b(?:window|document|localStorage|sessionStorage|navigator)\b/.test(fn.body)) {
|
||||
diagnostics.push({ code: "WRN-SERVER-BROWSER-API", severity: "error", message: `Server function '${fn.name}' references a browser-only API.`, hint: "Move that code into a client function.", file: options.file });
|
||||
}
|
||||
if (fn.runtime !== "server" && /\b(?:eval\s*\(|new\s+Function\s*\(|document\.write\s*\(|\.innerHTML\s*=|\.outerHTML\s*=|insertAdjacentHTML\s*\()/.test(fn.body)) {
|
||||
diagnostics.push({
|
||||
code: "WRN-SEC-DOM-SINK",
|
||||
severity: "error",
|
||||
message: `Client function '${fn.name}' uses an unsafe dynamic-code or HTML sink.`,
|
||||
hint: "Use compiled templates, textContent, typed outputs, or a reviewed TrustedHTML sanitizer.",
|
||||
file: options.file,
|
||||
});
|
||||
}
|
||||
if (fn.runtime !== "server" && /\b(?:setTimeout|setInterval)\s*\(\s*["'`]/.test(fn.body)) {
|
||||
diagnostics.push({
|
||||
code: "WRN-SEC-STRING-TIMER",
|
||||
severity: "error",
|
||||
message: `Client function '${fn.name}' passes a string to a timer.`,
|
||||
hint: "Pass a function instead of executable text.",
|
||||
file: options.file,
|
||||
});
|
||||
}
|
||||
const parameterNames = new Set(fn.parameters.map((parameter) => parameter.name));
|
||||
for (const prop of ast.props) {
|
||||
if (containsReadonlyPropMutation(fn.body, prop.name, parameterNames)) {
|
||||
@@ -3182,6 +3346,16 @@ function astDiagnostics(ast, options) {
|
||||
if (state.runtime === "shared" && /^(?:new\s+(?:Map|Set|WeakMap|WeakSet)|(?:async\s+)?function\b|.*=>)/.test(state.expr.trim())) {
|
||||
diagnostics.push({ code: "WRN-STATE-NON-SERIALIZABLE", severity: "error", message: `Shared state '${state.name}' is not safely serializable.`, hint: "Use JSON-compatible data or move the value into client/server state.", file: options.file });
|
||||
}
|
||||
if (state.runtime !== "server" &&
|
||||
/\b(?:process\.env|Bun\.env|Deno\.env|ctx\.env|import\.meta\.env)\b/.test(state.expr)) {
|
||||
diagnostics.push({
|
||||
code: "WRN-SEC-SERVER-SECRET-SOURCE",
|
||||
severity: "error",
|
||||
message: `Browser-visible state '${state.name}' reads from a server environment source.`,
|
||||
hint: "Move environment-backed values into server state and return only an explicitly safe result.",
|
||||
file: options.file,
|
||||
});
|
||||
}
|
||||
}
|
||||
if (ast.persist) {
|
||||
const stateNames = new Set(ast.states.filter((state) => state.runtime !== "server").map((state) => state.name));
|
||||
|
||||
@@ -18,6 +18,10 @@ export default tseslint.config(
|
||||
"bun.lockb",
|
||||
"**/*.gen.ts",
|
||||
"editors/vscode/src/compiler.cjs",
|
||||
"focus-shims.d.ts",
|
||||
"**/focus-shims.d.ts",
|
||||
"tsconfig.focus.json",
|
||||
"**/tsconfig.focus.json",
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
# Example environment files
|
||||
|
||||
Copy `.env.example` to `.env` for local development. Copy `.env.uat.example` to `.env.uat` only when testing the UAT environment.
|
||||
|
||||
Never commit populated `.env` files. Keep secrets in the deployment environment or an approved secret manager.
|
||||
@@ -16,7 +16,7 @@ page AdvancedFormsShowcase {
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><AdvancedSelect size="default" label="Default advanced select" name="advanced-select-1" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
<div class="catalog-card-stage"><AdvancedSelect size="default" label="Default advanced select" name="advanced-select-1" value="design" values='[]' options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","disabled":false}]' groups='[]' placeholder="Choose a team" placeholderIcon="" multiple="false" searchable="true" allowEmpty="false" tags="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" maxSelections="0" showCounter="false" optionTemplate="default" fixed="false" remote="false" remoteUrl="" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Advanced Forms</span><h2>Advanced Select</h2><p>Theme-aware, responsive advanced select component.</p></div>
|
||||
@@ -26,7 +26,7 @@ page AdvancedFormsShowcase {
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><ComboBox label="Default autocomplete" name="combobox-1" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
<div class="catalog-card-stage"><ComboBox label="Default autocomplete" name="combobox-1" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Advanced Forms</span><h2>Combo Box</h2><p>Editable autocomplete combobox with local and remote suggestions.</p></div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -6,7 +6,7 @@ page ComboBoxDetail {
|
||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Default autocomplete"
|
||||
state playground_name = ctx.url.searchParams.get("pg_name") ?? "combobox-1"
|
||||
state playground_value = ctx.url.searchParams.get("pg_value") ?? ""
|
||||
state playground_options = JSON.parse(ctx.url.searchParams.get("pg_options") ?? "[{\"value\":\"design\",\"label\":\"Design\",\"description\":\"Product and visual design\",\"icon\":\"icon-[lucide--palette]\",\"color\":\"#8b5cf6\",\"avatar\":\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E\"},{\"value\":\"engineering\",\"label\":\"Engineering\",\"description\":\"Platform and application engineering\",\"icon\":\"icon-[lucide--code-2]\",\"color\":\"#0ea5e9\",\"avatar\":\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E\"},{\"value\":\"growth\",\"label\":\"Growth\",\"description\":\"Marketing and customer growth\",\"icon\":\"icon-[lucide--trending-up]\",\"color\":\"#10b981\",\"avatar\":\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E\"},{\"value\":\"support\",\"label\":\"Support\",\"description\":\"Customer operations\",\"icon\":\"icon-[lucide--life-buoy]\",\"color\":\"#f59e0b\"}]")
|
||||
state playground_options = JSON.parse(ctx.url.searchParams.get("pg_options") ?? "[{\"value\":\"design\",\"label\":\"Design\",\"description\":\"Product and visual design\",\"icon\":\"icon-[lucide--palette]\",\"color\":\"#8b5cf6\",\"avatar\":\"/showcase-images/avatar-design.svg\"},{\"value\":\"engineering\",\"label\":\"Engineering\",\"description\":\"Platform and application engineering\",\"icon\":\"icon-[lucide--code-2]\",\"color\":\"#0ea5e9\",\"avatar\":\"/showcase-images/avatar-engineering.svg\"},{\"value\":\"growth\",\"label\":\"Growth\",\"description\":\"Marketing and customer growth\",\"icon\":\"icon-[lucide--trending-up]\",\"color\":\"#10b981\",\"avatar\":\"/showcase-images/avatar-growth.svg\"},{\"value\":\"support\",\"label\":\"Support\",\"description\":\"Customer operations\",\"icon\":\"icon-[lucide--life-buoy]\",\"color\":\"#f59e0b\"}]")
|
||||
state playground_groups = JSON.parse(ctx.url.searchParams.get("pg_groups") ?? "[]")
|
||||
state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Search teams"
|
||||
state playground_searchPlaceholder = ctx.url.searchParams.get("pg_searchPlaceholder") ?? "Start typing…"
|
||||
@@ -77,7 +77,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-design.svg"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -85,7 +85,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-engineering.svg"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -93,7 +93,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-growth.svg"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -119,7 +119,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-design.svg"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -127,7 +127,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-engineering.svg"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -135,7 +135,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-growth.svg"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -160,7 +160,7 @@ page ComboBoxDetail {
|
||||
<div id="combo-box-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Default autocomplete" name="combobox-1" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
<div class="demo-render"><ComboBox label="Default autocomplete" name="combobox-1" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Default autocomplete usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -174,7 +174,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-design.svg"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -182,7 +182,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-engineering.svg"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -190,7 +190,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-growth.svg"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -215,7 +215,7 @@ page ComboBoxDetail {
|
||||
<div id="combo-box-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Local HTML options" name="combobox-2" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
<div class="demo-render"><ComboBox label="Local HTML options" name="combobox-2" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Local HTML options usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -229,7 +229,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-design.svg"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -237,7 +237,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-engineering.svg"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -245,7 +245,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-growth.svg"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -270,7 +270,7 @@ page ComboBoxDetail {
|
||||
<div id="combo-box-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Grouped suggestions" name="combobox-3" value="" options='[]' groups='[{"label":"Product","options":[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"}]},{"label":"Business","options":[{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]}]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
<div class="demo-render"><ComboBox label="Grouped suggestions" name="combobox-3" value="" options='[]' groups='[{"label":"Product","options":[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"}]},{"label":"Business","options":[{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]}]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Grouped suggestions usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -288,7 +288,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-design.svg"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -296,7 +296,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-engineering.svg"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -309,7 +309,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-growth.svg"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -335,7 +335,7 @@ page ComboBoxDetail {
|
||||
<div id="combo-box-demo-4" class="demo-canvas demo-canvas--4">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Minimum search length" name="combobox-4" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="3" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
<div class="demo-render"><ComboBox label="Minimum search length" name="combobox-4" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="3" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Minimum search length usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -349,7 +349,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-design.svg"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -357,7 +357,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-engineering.svg"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -365,7 +365,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-growth.svg"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -391,7 +391,7 @@ page ComboBoxDetail {
|
||||
<div id="combo-box-demo-5" class="demo-canvas demo-canvas--5">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Search result limit" name="combobox-5" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="2" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
<div class="demo-render"><ComboBox label="Search result limit" name="combobox-5" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="2" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Search result limit usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -405,7 +405,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-design.svg"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -413,7 +413,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-engineering.svg"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -421,7 +421,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-growth.svg"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -447,7 +447,7 @@ page ComboBoxDetail {
|
||||
<div id="combo-box-demo-6" class="demo-canvas demo-canvas--6">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Starts-with matching" name="combobox-6" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="startsWith" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
<div class="demo-render"><ComboBox label="Starts-with matching" name="combobox-6" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="startsWith" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Starts-with matching usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -461,7 +461,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-design.svg"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -469,7 +469,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-engineering.svg"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -477,7 +477,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-growth.svg"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -503,7 +503,7 @@ page ComboBoxDetail {
|
||||
<div id="combo-box-demo-7" class="demo-canvas demo-canvas--7">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Search labels and descriptions" name="combobox-7" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
<div class="demo-render"><ComboBox label="Search labels and descriptions" name="combobox-7" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Search labels and descriptions usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -517,7 +517,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-design.svg"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -525,7 +525,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-engineering.svg"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -533,7 +533,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-growth.svg"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -558,7 +558,7 @@ page ComboBoxDetail {
|
||||
<div id="combo-box-demo-8" class="demo-canvas demo-canvas--8">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Suggestions with icons" name="combobox-8" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
<div class="demo-render"><ComboBox label="Suggestions with icons" name="combobox-8" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="icon" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Suggestions with icons usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -572,7 +572,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-design.svg"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -580,7 +580,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-engineering.svg"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -588,7 +588,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-growth.svg"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -614,7 +614,7 @@ page ComboBoxDetail {
|
||||
<div id="combo-box-demo-9" class="demo-canvas demo-canvas--9">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Suggestions with avatars" name="combobox-9" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="avatar" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
<div class="demo-render"><ComboBox label="Suggestions with avatars" name="combobox-9" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="avatar" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Suggestions with avatars usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -628,7 +628,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-design.svg"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -636,7 +636,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-engineering.svg"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -644,7 +644,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-growth.svg"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -670,7 +670,7 @@ page ComboBoxDetail {
|
||||
<div id="combo-box-demo-10" class="demo-canvas demo-canvas--10">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Suggestions with color indicators" name="combobox-10" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="color" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
<div class="demo-render"><ComboBox label="Suggestions with color indicators" name="combobox-10" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="color" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Suggestions with color indicators usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -684,7 +684,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-design.svg"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -692,7 +692,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-engineering.svg"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -700,7 +700,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-growth.svg"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -726,7 +726,7 @@ page ComboBoxDetail {
|
||||
<div id="combo-box-demo-11" class="demo-canvas demo-canvas--11">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Clearable value" name="combobox-11" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
<div class="demo-render"><ComboBox label="Clearable value" name="combobox-11" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Clearable value usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -740,7 +740,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-design.svg"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -748,7 +748,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-engineering.svg"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -756,7 +756,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-growth.svg"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -781,7 +781,7 @@ page ComboBoxDetail {
|
||||
<div id="combo-box-demo-12" class="demo-canvas demo-canvas--12">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Custom text values" name="combobox-12" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="true" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
<div class="demo-render"><ComboBox label="Custom text values" name="combobox-12" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="true" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Custom text values usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -795,7 +795,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-design.svg"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -803,7 +803,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-engineering.svg"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -811,7 +811,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-growth.svg"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -837,7 +837,7 @@ page ComboBoxDetail {
|
||||
<div id="combo-box-demo-13" class="demo-canvas demo-canvas--13">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Preselected value" name="combobox-13" value="engineering" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
<div class="demo-render"><ComboBox label="Preselected value" name="combobox-13" value="engineering" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Preselected value usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -852,7 +852,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-design.svg"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -860,7 +860,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-engineering.svg"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -868,7 +868,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-growth.svg"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -893,7 +893,7 @@ page ComboBoxDetail {
|
||||
<div id="combo-box-demo-14" class="demo-canvas demo-canvas--14">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Disabled combobox" name="combobox-14" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="true" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
<div class="demo-render"><ComboBox label="Disabled combobox" name="combobox-14" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="true" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Disabled combobox usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -907,7 +907,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-design.svg"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -915,7 +915,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-engineering.svg"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -923,7 +923,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-growth.svg"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -949,7 +949,7 @@ page ComboBoxDetail {
|
||||
<div id="combo-box-demo-15" class="demo-canvas demo-canvas--15">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><form data-schema="combobox-validation" class="demo-validation-form"><ComboBox label="Validation state" name="combobox-15" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="true" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
|
||||
<div class="demo-render"><form data-schema="combobox-validation" class="demo-validation-form"><ComboBox label="Validation state" name="combobox-15" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="true" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /><button type="submit" class="wire-btn wire-btn--variant-default">Validate selection</button></form></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Validation state usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -963,7 +963,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-design.svg"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -971,7 +971,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-engineering.svg"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -979,7 +979,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-growth.svg"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -1005,7 +1005,7 @@ page ComboBoxDetail {
|
||||
<div id="combo-box-demo-16" class="demo-canvas demo-canvas--16">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Remote data with automatic preload" name="combobox-16" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
<div class="demo-render"><ComboBox label="Remote data with automatic preload" name="combobox-16" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Remote data with automatic preload usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -1019,7 +1019,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-design.svg"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -1027,7 +1027,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-engineering.svg"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -1035,7 +1035,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-growth.svg"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -1063,7 +1063,7 @@ page ComboBoxDetail {
|
||||
<div id="combo-box-demo-17" class="demo-canvas demo-canvas--17">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Remote search API" name="combobox-17" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
<div class="demo-render"><ComboBox label="Remote search API" name="combobox-17" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Remote search API usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -1077,7 +1077,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-design.svg"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -1085,7 +1085,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-engineering.svg"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -1093,7 +1093,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-growth.svg"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -1121,7 +1121,7 @@ page ComboBoxDetail {
|
||||
<div id="combo-box-demo-18" class="demo-canvas demo-canvas--18">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Remote query parameters" name="combobox-18" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
<div class="demo-render"><ComboBox label="Remote query parameters" name="combobox-18" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Remote query parameters usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -1135,7 +1135,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-design.svg"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -1143,7 +1143,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-engineering.svg"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -1151,7 +1151,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-growth.svg"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -1179,7 +1179,7 @@ page ComboBoxDetail {
|
||||
<div id="combo-box-demo-19" class="demo-canvas demo-canvas--19">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Infinite remote suggestions" name="combobox-19" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="true" hasMore="true" /></div>
|
||||
<div class="demo-render"><ComboBox label="Infinite remote suggestions" name="combobox-19" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search remote teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="2" searchResultLimit="0" optionTemplate="default" fixed="false" remote="true" remoteUrl="/api/teams" remoteQueryParam="q" remoteAutoLoad="true" infinite="true" hasMore="true" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Infinite remote suggestions usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -1193,7 +1193,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-design.svg"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -1201,7 +1201,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-engineering.svg"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -1209,7 +1209,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-growth.svg"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -1239,7 +1239,7 @@ page ComboBoxDetail {
|
||||
<div id="combo-box-demo-20" class="demo-canvas demo-canvas--20">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="Fixed-position suggestions" name="combobox-20" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="true" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
<div class="demo-render"><ComboBox label="Fixed-position suggestions" name="combobox-20" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="true" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Fixed-position suggestions usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -1253,7 +1253,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-design.svg"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -1261,7 +1261,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-engineering.svg"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -1269,7 +1269,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-growth.svg"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
@@ -1295,7 +1295,7 @@ page ComboBoxDetail {
|
||||
<div id="combo-box-demo-21" class="demo-canvas demo-canvas--21">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><ComboBox label="JavaScript methods" name="combobox-21" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
<div class="demo-render"><ComboBox label="JavaScript methods" name="combobox-21" value="" options='[{"value":"design","label":"Design","description":"Product and visual design","icon":"icon-[lucide--palette]","color":"#8b5cf6","avatar":"/showcase-images/avatar-design.svg"},{"value":"engineering","label":"Engineering","description":"Platform and application engineering","icon":"icon-[lucide--code-2]","color":"#0ea5e9","avatar":"/showcase-images/avatar-engineering.svg"},{"value":"growth","label":"Growth","description":"Marketing and customer growth","icon":"icon-[lucide--trending-up]","color":"#10b981","avatar":"/showcase-images/avatar-growth.svg"},{"value":"support","label":"Support","description":"Customer operations","icon":"icon-[lucide--life-buoy]","color":"#f59e0b"}]' groups='[]' placeholder="Search teams" clearable="true" allowCustomValue="false" disabled="false" required="false" invalid="false" validationMessage="" searchMode="contains" minSearchLength="0" searchResultLimit="0" optionTemplate="default" fixed="false" remote="false" remoteUrl="" remoteQueryParam="q" remoteAutoLoad="true" infinite="false" hasMore="false" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="JavaScript methods usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -1309,7 +1309,7 @@ page ComboBoxDetail {
|
||||
"description": "Product and visual design",
|
||||
"icon": "icon-[lucide--palette]",
|
||||
"color": "#8b5cf6",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%238b5cf6\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3ED%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-design.svg"
|
||||
},
|
||||
{
|
||||
"value": "engineering",
|
||||
@@ -1317,7 +1317,7 @@ page ComboBoxDetail {
|
||||
"description": "Platform and application engineering",
|
||||
"icon": "icon-[lucide--code-2]",
|
||||
"color": "#0ea5e9",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%230ea5e9\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EE%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-engineering.svg"
|
||||
},
|
||||
{
|
||||
"value": "growth",
|
||||
@@ -1325,7 +1325,7 @@ page ComboBoxDetail {
|
||||
"description": "Marketing and customer growth",
|
||||
"icon": "icon-[lucide--trending-up]",
|
||||
"color": "#10b981",
|
||||
"avatar": "data:image/svg+xml,%3Csvg xmlns=\u0027http://www.w3.org/2000/svg\u0027 viewBox=\u00270 0 64 64\u0027%3E%3Crect width=\u002764\u0027 height=\u002764\u0027 rx=\u002732\u0027 fill=\u0027%2310b981\u0027/%3E%3Ctext x=\u002732\u0027 y=\u002740\u0027 text-anchor=\u0027middle\u0027 font-family=\u0027Arial\u0027 font-size=\u002724\u0027 fill=\u0027white\u0027%3EG%3C/text%3E%3C/svg%3E"
|
||||
"avatar": "/showcase-images/avatar-growth.svg"
|
||||
},
|
||||
{
|
||||
"value": "support",
|
||||
|
||||
@@ -127,7 +127,7 @@ page FeatureCardDetail {
|
||||
<div id="feature-card-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><FeatureCard icon="icon-[lucide--arrow-right]" title="Unified citizen portal" description="Access trusted services from one responsive interface." image="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 450'%3E%3Crect width='800' height='450' fill='%231e1b4b'/%3E%3Ccircle cx='610' cy='130' r='120' fill='%237c3aed' opacity='.55'/%3E%3Crect x='90' y='90' width='430' height='270' rx='28' fill='%23ffffff' opacity='.12'/%3E%3C/svg%3E" imageAlt="Abstract dashboard preview" imagePosition="top" imageAspect="wide" href="#portal" external="false" actionLabel="Open portal" showArrow="true" stretchedLink="true" badge="Featured" size="sm" color="info" variant="raised" align="center" disabled="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
<div class="demo-render"><FeatureCard icon="icon-[lucide--arrow-right]" title="Unified citizen portal" description="Access trusted services from one responsive interface." image="/showcase-images/dashboard-preview.svg" imageAlt="Abstract dashboard preview" imagePosition="top" imageAspect="wide" href="#portal" external="false" actionLabel="Open portal" showArrow="true" stretchedLink="true" badge="Featured" size="sm" color="info" variant="raised" align="center" disabled="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Image-led feature card usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -135,7 +135,7 @@ page FeatureCardDetail {
|
||||
icon="icon-[lucide--arrow-right]"
|
||||
title="Unified citizen portal"
|
||||
description="Access trusted services from one responsive interface."
|
||||
image="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 450'%3E%3Crect width='800' height='450' fill='%231e1b4b'/%3E%3Ccircle cx='610' cy='130' r='120' fill='%237c3aed' opacity='.55'/%3E%3Crect x='90' y='90' width='430' height='270' rx='28' fill='%23ffffff' opacity='.12'/%3E%3C/svg%3E"
|
||||
image="/showcase-images/dashboard-preview.svg"
|
||||
imageAlt="Abstract dashboard preview"
|
||||
href="#portal"
|
||||
actionLabel="Open portal"
|
||||
|
||||
@@ -58,12 +58,12 @@ page ImageDetail {
|
||||
<div id="image-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Image size="default" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 450'%3E%3Crect width='800' height='450' fill='%231e1b4b'/%3E%3Ccircle cx='400' cy='225' r='120' fill='%237c3aed'/%3E%3C/svg%3E" alt="Abstract violet circle on a dark surface" width="800" height="450" rounded="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
<div class="demo-render"><Image size="default" src="/showcase-images/violet-circle.svg" alt="Abstract violet circle on a dark surface" width="800" height="450" rounded="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Responsive content image usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Image
|
||||
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 450'%3E%3Crect width='800' height='450' fill='%231e1b4b'/%3E%3Ccircle cx='400' cy='225' r='120' fill='%237c3aed'/%3E%3C/svg%3E"
|
||||
src="/showcase-images/violet-circle.svg"
|
||||
alt="Abstract violet circle on a dark surface"
|
||||
width="800"
|
||||
height="450"
|
||||
@@ -80,13 +80,13 @@ page ImageDetail {
|
||||
<div id="image-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Image size="sm" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Crect width='400' height='400' fill='%230284c7'/%3E%3Cpath d='M80 290 190 120l130 170z' fill='white' opacity='.7'/%3E%3C/svg%3E" alt="Abstract blue thumbnail" width="400" height="400" rounded="true" class="showcase-instance showcase-instance--2" /></div>
|
||||
<div class="demo-render"><Image size="sm" src="/showcase-images/blue-mountain.svg" alt="Abstract blue thumbnail" width="400" height="400" rounded="true" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rounded thumbnail usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Image
|
||||
size="sm"
|
||||
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Crect width='400' height='400' fill='%230284c7'/%3E%3Cpath d='M80 290 190 120l130 170z' fill='white' opacity='.7'/%3E%3C/svg%3E"
|
||||
src="/showcase-images/blue-mountain.svg"
|
||||
alt="Abstract blue thumbnail"
|
||||
width="400"
|
||||
height="400"
|
||||
@@ -104,13 +104,13 @@ page ImageDetail {
|
||||
<div id="image-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Image size="lg" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Crect width='1200' height='600' fill='%23059669'/%3E%3Crect x='150' y='120' width='900' height='360' rx='36' fill='white' opacity='.18'/%3E%3C/svg%3E" alt="Abstract green hero visual" width="1200" height="600" loading="eager" rounded="true" class="showcase-instance showcase-instance--3" /></div>
|
||||
<div class="demo-render"><Image size="lg" src="/showcase-images/green-hero.svg" alt="Abstract green hero visual" width="1200" height="600" loading="eager" rounded="true" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Eager hero image usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Image
|
||||
size="lg"
|
||||
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Crect width='1200' height='600' fill='%23059669'/%3E%3Crect x='150' y='120' width='900' height='360' rx='36' fill='white' opacity='.18'/%3E%3C/svg%3E"
|
||||
src="/showcase-images/green-hero.svg"
|
||||
alt="Abstract green hero visual"
|
||||
width="1200"
|
||||
height="600"
|
||||
|
||||
@@ -86,7 +86,7 @@ page LayoutShowcase {
|
||||
<article class="catalog-card" data-interactive-preview="false">
|
||||
<div class="catalog-card-preview">
|
||||
<div class="catalog-card-glow" aria-hidden="true"></div>
|
||||
<div class="catalog-card-stage"><Image size="default" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 450'%3E%3Crect width='800' height='450' fill='%231e1b4b'/%3E%3Ccircle cx='400' cy='225' r='120' fill='%237c3aed'/%3E%3C/svg%3E" alt="Abstract violet circle on a dark surface" width="800" height="450" rounded="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
<div class="catalog-card-stage"><Image size="default" src="/showcase-images/violet-circle.svg" alt="Abstract violet circle on a dark surface" width="800" height="450" rounded="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<div class="catalog-card-body">
|
||||
<div><span class="catalog-card-category">Layout</span><h2>Image</h2><p>Render a responsive image with explicit dimensions, loading behavior, alternative text, sizing, and rounded treatment.</p></div>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="design avatar"><rect width="64" height="64" rx="32" fill="#8b5cf6"/><text x="32" y="40" text-anchor="middle" font-family="Arial,sans-serif" font-size="24" fill="#fff">D</text></svg>
|
||||
|
After Width: | Height: | Size: 265 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="engineering avatar"><rect width="64" height="64" rx="32" fill="#0ea5e9"/><text x="32" y="40" text-anchor="middle" font-family="Arial,sans-serif" font-size="24" fill="#fff">E</text></svg>
|
||||
|
After Width: | Height: | Size: 270 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="growth avatar"><rect width="64" height="64" rx="32" fill="#10b981"/><text x="32" y="40" text-anchor="middle" font-family="Arial,sans-serif" font-size="24" fill="#fff">G</text></svg>
|
||||
|
After Width: | Height: | Size: 265 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" role="img" aria-label="Abstract blue mountain"><rect width="400" height="400" fill="#0284c7"/><path d="M80 290 190 120l130 170z" fill="#fff" opacity=".7"/></svg>
|
||||
|
After Width: | Height: | Size: 224 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450" role="img" aria-label="Abstract dashboard preview"><rect width="800" height="450" fill="#1e1b4b"/><circle cx="610" cy="130" r="120" fill="#7c3aed" opacity=".55"/><rect x="90" y="90" width="430" height="270" rx="28" fill="#fff" opacity=".12"/></svg>
|
||||
|
After Width: | Height: | Size: 311 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" role="img" aria-label="Abstract green hero visual"><rect width="1200" height="600" fill="#059669"/><rect x="150" y="120" width="900" height="360" rx="36" fill="#fff" opacity=".18"/></svg>
|
||||
|
After Width: | Height: | Size: 251 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 36" role="img" aria-label="Acme logo"><rect width="120" height="36" rx="8" fill="#7c3aed"/><text x="60" y="23" text-anchor="middle" font-family="Arial,sans-serif" font-size="13" fill="#fff">Acme</text></svg>
|
||||
|
After Width: | Height: | Size: 265 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 36" role="img" aria-label="Northstar logo"><rect width="120" height="36" rx="8" fill="#7c3aed"/><text x="60" y="23" text-anchor="middle" font-family="Arial,sans-serif" font-size="13" fill="#fff">Northstar</text></svg>
|
||||
|
After Width: | Height: | Size: 275 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 36" role="img" aria-label="Vertex logo"><rect width="120" height="36" rx="8" fill="#7c3aed"/><text x="60" y="23" text-anchor="middle" font-family="Arial,sans-serif" font-size="13" fill="#fff">Vertex</text></svg>
|
||||
|
After Width: | Height: | Size: 269 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 36" role="img" aria-label="Orbit logo"><rect width="120" height="36" rx="8" fill="#7c3aed"/><text x="60" y="23" text-anchor="middle" font-family="Arial,sans-serif" font-size="13" fill="#fff">Orbit</text></svg>
|
||||
|
After Width: | Height: | Size: 267 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 36" role="img" aria-label="Acme logo"><rect width="120" height="36" rx="8" fill="#0284c7"/><text x="60" y="23" text-anchor="middle" font-family="Arial,sans-serif" font-size="13" fill="#fff">Acme</text></svg>
|
||||
|
After Width: | Height: | Size: 265 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 36" role="img" aria-label="Northstar logo"><rect width="120" height="36" rx="8" fill="#0284c7"/><text x="60" y="23" text-anchor="middle" font-family="Arial,sans-serif" font-size="13" fill="#fff">Northstar</text></svg>
|
||||
|
After Width: | Height: | Size: 275 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 36" role="img" aria-label="Vertex logo"><rect width="120" height="36" rx="8" fill="#0284c7"/><text x="60" y="23" text-anchor="middle" font-family="Arial,sans-serif" font-size="13" fill="#fff">Vertex</text></svg>
|
||||
|
After Width: | Height: | Size: 269 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 36" role="img" aria-label="Orbit logo"><rect width="120" height="36" rx="8" fill="#0284c7"/><text x="60" y="23" text-anchor="middle" font-family="Arial,sans-serif" font-size="13" fill="#fff">Orbit</text></svg>
|
||||
|
After Width: | Height: | Size: 267 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 36" role="img" aria-label="Acme logo"><rect width="120" height="36" rx="8" fill="#059669"/><text x="60" y="23" text-anchor="middle" font-family="Arial,sans-serif" font-size="13" fill="#fff">Acme</text></svg>
|
||||
|
After Width: | Height: | Size: 265 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 36" role="img" aria-label="Northstar logo"><rect width="120" height="36" rx="8" fill="#059669"/><text x="60" y="23" text-anchor="middle" font-family="Arial,sans-serif" font-size="13" fill="#fff">Northstar</text></svg>
|
||||
|
After Width: | Height: | Size: 275 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 36" role="img" aria-label="Vertex logo"><rect width="120" height="36" rx="8" fill="#059669"/><text x="60" y="23" text-anchor="middle" font-family="Arial,sans-serif" font-size="13" fill="#fff">Vertex</text></svg>
|
||||
|
After Width: | Height: | Size: 269 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 36" role="img" aria-label="Orbit logo"><rect width="120" height="36" rx="8" fill="#059669"/><text x="60" y="23" text-anchor="middle" font-family="Arial,sans-serif" font-size="13" fill="#fff">Orbit</text></svg>
|
||||
|
After Width: | Height: | Size: 267 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450" role="img" aria-label="Abstract violet circle on a dark surface"><rect width="800" height="450" fill="#1e1b4b"/><circle cx="400" cy="225" r="120" fill="#7c3aed"/></svg>
|
||||
|
After Width: | Height: | Size: 231 B |
@@ -166,7 +166,7 @@ function sampleArray(prop, component, variation) {
|
||||
alt: `${logo} logo`,
|
||||
href: `#${slugOf(component.name)}-demo`,
|
||||
external: false,
|
||||
src: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 36'%3E%3Crect width='120' height='36' rx='8' fill='%23${variation === 2 ? "059669" : variation === 1 ? "0284c7" : "7c3aed"}'/%3E%3Ctext x='60' y='23' text-anchor='middle' font-family='Arial' font-size='13' fill='white'%3E${logo}%3C/text%3E%3C/svg%3E`,
|
||||
src: `/showcase-images/logo-${variation}-${index}.svg`,
|
||||
order: index,
|
||||
}));
|
||||
if (name.includes("navigationcolumns"))
|
||||
@@ -871,8 +871,7 @@ function advancedSelectConfiguration(variation) {
|
||||
description: "Product and visual design",
|
||||
icon: "icon-[lucide--palette]",
|
||||
color: "#8b5cf6",
|
||||
avatar:
|
||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E",
|
||||
avatar: "/showcase-images/avatar-design.svg",
|
||||
},
|
||||
{
|
||||
value: "engineering",
|
||||
@@ -880,8 +879,7 @@ function advancedSelectConfiguration(variation) {
|
||||
description: "Platform and application engineering",
|
||||
icon: "icon-[lucide--code-2]",
|
||||
color: "#0ea5e9",
|
||||
avatar:
|
||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E",
|
||||
avatar: "/showcase-images/avatar-engineering.svg",
|
||||
},
|
||||
{
|
||||
value: "growth",
|
||||
@@ -889,8 +887,7 @@ function advancedSelectConfiguration(variation) {
|
||||
description: "Marketing and customer growth",
|
||||
icon: "icon-[lucide--trending-up]",
|
||||
color: "#10b981",
|
||||
avatar:
|
||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E",
|
||||
avatar: "/showcase-images/avatar-growth.svg",
|
||||
},
|
||||
{ value: "support", label: "Support", description: "Customer operations", disabled: false },
|
||||
];
|
||||
@@ -985,8 +982,7 @@ function comboboxConfiguration(variation) {
|
||||
description: "Product and visual design",
|
||||
icon: "icon-[lucide--palette]",
|
||||
color: "#8b5cf6",
|
||||
avatar:
|
||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%238b5cf6'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3ED%3C/text%3E%3C/svg%3E",
|
||||
avatar: "/showcase-images/avatar-design.svg",
|
||||
},
|
||||
{
|
||||
value: "engineering",
|
||||
@@ -994,8 +990,7 @@ function comboboxConfiguration(variation) {
|
||||
description: "Platform and application engineering",
|
||||
icon: "icon-[lucide--code-2]",
|
||||
color: "#0ea5e9",
|
||||
avatar:
|
||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%230ea5e9'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EE%3C/text%3E%3C/svg%3E",
|
||||
avatar: "/showcase-images/avatar-engineering.svg",
|
||||
},
|
||||
{
|
||||
value: "growth",
|
||||
@@ -1003,8 +998,7 @@ function comboboxConfiguration(variation) {
|
||||
description: "Marketing and customer growth",
|
||||
icon: "icon-[lucide--trending-up]",
|
||||
color: "#10b981",
|
||||
avatar:
|
||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2310b981'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial' font-size='24' fill='white'%3EG%3C/text%3E%3C/svg%3E",
|
||||
avatar: "/showcase-images/avatar-growth.svg",
|
||||
},
|
||||
{
|
||||
value: "support",
|
||||
|
||||
@@ -830,8 +830,7 @@ export const componentProfiles = {
|
||||
{
|
||||
title: "Unified citizen portal",
|
||||
description: "Access trusted services from one responsive interface.",
|
||||
image:
|
||||
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 450'%3E%3Crect width='800' height='450' fill='%231e1b4b'/%3E%3Ccircle cx='610' cy='130' r='120' fill='%237c3aed' opacity='.55'/%3E%3Crect x='90' y='90' width='430' height='270' rx='28' fill='%23ffffff' opacity='.12'/%3E%3C/svg%3E",
|
||||
image: "/showcase-images/dashboard-preview.svg",
|
||||
imageAlt: "Abstract dashboard preview",
|
||||
imagePosition: "top",
|
||||
imageAspect: "wide",
|
||||
@@ -1813,7 +1812,7 @@ export const componentProfiles = {
|
||||
"Responsive content image",
|
||||
"Render a responsive image with meaningful alternative text.",
|
||||
{
|
||||
src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 450'%3E%3Crect width='800' height='450' fill='%231e1b4b'/%3E%3Ccircle cx='400' cy='225' r='120' fill='%237c3aed'/%3E%3C/svg%3E",
|
||||
src: "/showcase-images/violet-circle.svg",
|
||||
alt: "Abstract violet circle on a dark surface",
|
||||
width: "800",
|
||||
height: "450",
|
||||
@@ -1823,7 +1822,7 @@ export const componentProfiles = {
|
||||
"Rounded thumbnail",
|
||||
"Use a rounded image in cards, directories, and compact summaries.",
|
||||
{
|
||||
src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Crect width='400' height='400' fill='%230284c7'/%3E%3Cpath d='M80 290 190 120l130 170z' fill='white' opacity='.7'/%3E%3C/svg%3E",
|
||||
src: "/showcase-images/blue-mountain.svg",
|
||||
alt: "Abstract blue thumbnail",
|
||||
width: "400",
|
||||
height: "400",
|
||||
@@ -1835,7 +1834,7 @@ export const componentProfiles = {
|
||||
"Eager hero image",
|
||||
"Use explicit dimensions and eager loading for an above-the-fold visual.",
|
||||
{
|
||||
src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Crect width='1200' height='600' fill='%23059669'/%3E%3Crect x='150' y='120' width='900' height='360' rx='36' fill='white' opacity='.18'/%3E%3C/svg%3E",
|
||||
src: "/showcase-images/green-hero.svg",
|
||||
alt: "Abstract green hero visual",
|
||||
width: "1200",
|
||||
height: "600",
|
||||
|
||||
@@ -196,6 +196,18 @@
|
||||
"events": ["click", "select", "change"],
|
||||
"profiled": false
|
||||
},
|
||||
{
|
||||
"name": "CTASection",
|
||||
"mount": "CTASection",
|
||||
"slug": "ctasection",
|
||||
"category": "marketing",
|
||||
"purpose": "Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.",
|
||||
"demoCount": 3,
|
||||
"propCount": 25,
|
||||
"slots": ["default", "actions", "visual", "footer"],
|
||||
"events": [],
|
||||
"profiled": true
|
||||
},
|
||||
{
|
||||
"name": "Card",
|
||||
"mount": "Card",
|
||||
@@ -375,18 +387,6 @@
|
||||
"events": ["copy", "success", "error"],
|
||||
"profiled": false
|
||||
},
|
||||
{
|
||||
"name": "CTASection",
|
||||
"mount": "CTASection",
|
||||
"slug": "ctasection",
|
||||
"category": "marketing",
|
||||
"purpose": "Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.",
|
||||
"demoCount": 3,
|
||||
"propCount": 25,
|
||||
"slots": ["default", "actions", "visual", "footer"],
|
||||
"events": [],
|
||||
"profiled": true
|
||||
},
|
||||
{
|
||||
"name": "CustomScrollbar",
|
||||
"mount": "CustomScrollbar",
|
||||
@@ -1167,18 +1167,6 @@
|
||||
"events": [],
|
||||
"profiled": true
|
||||
},
|
||||
{
|
||||
"name": "Textarea",
|
||||
"mount": "Textarea",
|
||||
"slug": "textarea",
|
||||
"category": "forms",
|
||||
"purpose": "Theme-aware, responsive textarea component.",
|
||||
"demoCount": 3,
|
||||
"propCount": 23,
|
||||
"slots": [],
|
||||
"events": ["input", "change", "focus", "blur", "invalid"],
|
||||
"profiled": false
|
||||
},
|
||||
{
|
||||
"name": "TextLink",
|
||||
"mount": "TextLink",
|
||||
@@ -1192,16 +1180,16 @@
|
||||
"profiled": true
|
||||
},
|
||||
{
|
||||
"name": "Timeline",
|
||||
"mount": "Timeline",
|
||||
"slug": "timeline",
|
||||
"category": "base",
|
||||
"purpose": "Present responsive chronological activity, milestones, or workflow status with rich item metadata.",
|
||||
"name": "Textarea",
|
||||
"mount": "Textarea",
|
||||
"slug": "textarea",
|
||||
"category": "forms",
|
||||
"purpose": "Theme-aware, responsive textarea component.",
|
||||
"demoCount": 3,
|
||||
"propCount": 7,
|
||||
"slots": ["default"],
|
||||
"events": [],
|
||||
"profiled": true
|
||||
"propCount": 23,
|
||||
"slots": [],
|
||||
"events": ["input", "change", "focus", "blur", "invalid"],
|
||||
"profiled": false
|
||||
},
|
||||
{
|
||||
"name": "TimePicker",
|
||||
@@ -1215,6 +1203,18 @@
|
||||
"events": ["input", "change", "focus", "blur", "open", "close", "invalid"],
|
||||
"profiled": false
|
||||
},
|
||||
{
|
||||
"name": "Timeline",
|
||||
"mount": "Timeline",
|
||||
"slug": "timeline",
|
||||
"category": "base",
|
||||
"purpose": "Present responsive chronological activity, milestones, or workflow status with rich item metadata.",
|
||||
"demoCount": 3,
|
||||
"propCount": 7,
|
||||
"slots": ["default"],
|
||||
"events": [],
|
||||
"profiled": true
|
||||
},
|
||||
{
|
||||
"name": "Toast",
|
||||
"mount": "Toast",
|
||||
|
||||
+11
-2
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "wrnexus",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"description": "An SSR-first full-stack web framework with server-rendered reactive components. Bun-first, Node-friendly.",
|
||||
@@ -32,7 +32,16 @@
|
||||
"auth:dev": "bun run --cwd examples/auth-showcase dev",
|
||||
"auth:check": "bun run --cwd packages/auth check",
|
||||
"validate:auth": "node scripts/validate-auth.mjs",
|
||||
"validate:0.6": "node scripts/validate-0.6.mjs"
|
||||
"validate:0.6": "node scripts/validate-0.6.mjs",
|
||||
"validate:0.7": "node scripts/validate-0.7.mjs",
|
||||
"security:framework": "node scripts/security-performance-audit.mjs",
|
||||
"sbom": "node scripts/generate-sbom.mjs",
|
||||
"benchmark:framework": "node --experimental-transform-types scripts/benchmark-framework.mjs",
|
||||
"check:production": "bun run check:workspace && bun run validate:0.7 && bun run security:framework && bun run check",
|
||||
"validate:staging": "node --experimental-transform-types scripts/test-package-integrity.mjs",
|
||||
"repair:workspace": "node scripts/repair-workspace.mjs",
|
||||
"test:workspace-repair": "node scripts/test-workspace-repair.mjs",
|
||||
"check:workspace": "node scripts/repair-workspace.mjs --check"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "latest",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/ai",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"description": "Zero-dependency Claude (Anthropic) client for WrNexus apps.",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/auth",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"description": "Complete authentication, account security, MFA, passkeys, recovery, devices, risk, and audit system for WRNexusJS.",
|
||||
"type": "module",
|
||||
"sideEffects": false,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/authz",
|
||||
"version": "0.6.0",
|
||||
"version": "0.7.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
# @wrnexus/benchmark
|
||||
|
||||
Deterministic benchmark execution, percentiles, baseline comparisons, and regression budgets for builds, SSR, hydration, stores, and application hot paths.
|
||||
|
||||
```ts
|
||||
import { runBenchmark, assertBenchmarkBudget } from "@wrnexus/benchmark";
|
||||
const result = await runBenchmark("render", render, { iterations: 100 });
|
||||
assertBenchmarkBudget(result, baseline, { p95Percent: 5 });
|
||||
```
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"name": "@wrnexus/benchmark",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "Deterministic benchmark runner and performance regression budgets for WRNexusJS.",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
".": "./src/index.ts"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
export interface BenchmarkOptions {
|
||||
iterations?: number;
|
||||
warmup?: number;
|
||||
clock?: () => number;
|
||||
setup?: () => void | Promise<void>;
|
||||
teardown?: () => void | Promise<void>;
|
||||
}
|
||||
|
||||
export interface BenchmarkResult {
|
||||
name: string;
|
||||
iterations: number;
|
||||
totalMs: number;
|
||||
meanMs: number;
|
||||
minMs: number;
|
||||
maxMs: number;
|
||||
p50Ms: number;
|
||||
p95Ms: number;
|
||||
p99Ms: number;
|
||||
operationsPerSecond: number;
|
||||
samples: number[];
|
||||
}
|
||||
|
||||
export interface RegressionBudget {
|
||||
meanPercent?: number;
|
||||
p95Percent?: number;
|
||||
maxAbsoluteMs?: number;
|
||||
minOperationsPerSecond?: number;
|
||||
}
|
||||
|
||||
export interface RegressionViolation {
|
||||
metric: "meanMs" | "p95Ms" | "maxMs" | "operationsPerSecond";
|
||||
baseline?: number;
|
||||
current: number;
|
||||
limit: number;
|
||||
message: string;
|
||||
}
|
||||
|
||||
export function percentile(values: readonly number[], quantile: number): number {
|
||||
if (!values.length) return 0;
|
||||
const sorted = [...values].sort((a, b) => a - b);
|
||||
const index = Math.min(sorted.length - 1, Math.max(0, Math.ceil(quantile * sorted.length) - 1));
|
||||
return sorted[index]!;
|
||||
}
|
||||
|
||||
export async function runBenchmark(
|
||||
name: string,
|
||||
operation: () => void | Promise<void>,
|
||||
options: BenchmarkOptions = {},
|
||||
): Promise<BenchmarkResult> {
|
||||
const iterations = Math.max(1, Math.floor(options.iterations ?? 100));
|
||||
const warmup = Math.max(0, Math.floor(options.warmup ?? Math.min(10, iterations)));
|
||||
const clock = options.clock ?? (() => performance.now());
|
||||
await options.setup?.();
|
||||
try {
|
||||
for (let index = 0; index < warmup; index++) await operation();
|
||||
const samples: number[] = [];
|
||||
for (let index = 0; index < iterations; index++) {
|
||||
const start = clock();
|
||||
await operation();
|
||||
samples.push(Math.max(0, clock() - start));
|
||||
}
|
||||
const totalMs = samples.reduce((sum, sample) => sum + sample, 0);
|
||||
const meanMs = totalMs / samples.length;
|
||||
return {
|
||||
name,
|
||||
iterations,
|
||||
totalMs,
|
||||
meanMs,
|
||||
minMs: Math.min(...samples),
|
||||
maxMs: Math.max(...samples),
|
||||
p50Ms: percentile(samples, 0.5),
|
||||
p95Ms: percentile(samples, 0.95),
|
||||
p99Ms: percentile(samples, 0.99),
|
||||
operationsPerSecond: meanMs === 0 ? Number.POSITIVE_INFINITY : 1000 / meanMs,
|
||||
samples,
|
||||
};
|
||||
} finally {
|
||||
await options.teardown?.();
|
||||
}
|
||||
}
|
||||
|
||||
export function compareBenchmark(
|
||||
current: BenchmarkResult,
|
||||
baseline: BenchmarkResult | undefined,
|
||||
budget: RegressionBudget = {},
|
||||
): RegressionViolation[] {
|
||||
const violations: RegressionViolation[] = [];
|
||||
if (baseline && budget.meanPercent !== undefined) {
|
||||
const limit = baseline.meanMs * (1 + budget.meanPercent / 100);
|
||||
if (current.meanMs > limit) {
|
||||
violations.push({
|
||||
metric: "meanMs",
|
||||
baseline: baseline.meanMs,
|
||||
current: current.meanMs,
|
||||
limit,
|
||||
message: `Mean latency regressed by more than ${budget.meanPercent}%.`,
|
||||
});
|
||||
}
|
||||
}
|
||||
if (baseline && budget.p95Percent !== undefined) {
|
||||
const limit = baseline.p95Ms * (1 + budget.p95Percent / 100);
|
||||
if (current.p95Ms > limit) {
|
||||
violations.push({
|
||||
metric: "p95Ms",
|
||||
baseline: baseline.p95Ms,
|
||||
current: current.p95Ms,
|
||||
limit,
|
||||
message: `P95 latency regressed by more than ${budget.p95Percent}%.`,
|
||||
});
|
||||
}
|
||||
}
|
||||
if (budget.maxAbsoluteMs !== undefined && current.maxMs > budget.maxAbsoluteMs) {
|
||||
violations.push({
|
||||
metric: "maxMs",
|
||||
current: current.maxMs,
|
||||
limit: budget.maxAbsoluteMs,
|
||||
message: `Maximum latency exceeds ${budget.maxAbsoluteMs} ms.`,
|
||||
});
|
||||
}
|
||||
if (
|
||||
budget.minOperationsPerSecond !== undefined &&
|
||||
current.operationsPerSecond < budget.minOperationsPerSecond
|
||||
) {
|
||||
violations.push({
|
||||
metric: "operationsPerSecond",
|
||||
current: current.operationsPerSecond,
|
||||
limit: budget.minOperationsPerSecond,
|
||||
message: `Throughput is below ${budget.minOperationsPerSecond} operations/second.`,
|
||||
});
|
||||
}
|
||||
return violations;
|
||||
}
|
||||
|
||||
export function assertBenchmarkBudget(
|
||||
current: BenchmarkResult,
|
||||
baseline: BenchmarkResult | undefined,
|
||||
budget: RegressionBudget,
|
||||
): void {
|
||||
const violations = compareBenchmark(current, baseline, budget);
|
||||
if (violations.length) {
|
||||
throw new Error(
|
||||
`Benchmark '${current.name}' failed:\n${violations.map((item) => `- ${item.message}`).join("\n")}`,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { describe, expect, test } from "bun:test";
|
||||
import { compareBenchmark, percentile, runBenchmark } from "../src/index.ts";
|
||||
|
||||
describe("@wrnexus/benchmark", () => {
|
||||
test("calculates percentiles and deterministic samples", async () => {
|
||||
let now = 0;
|
||||
const result = await runBenchmark(
|
||||
"clock",
|
||||
() => {
|
||||
now += 2;
|
||||
},
|
||||
{
|
||||
iterations: 3,
|
||||
warmup: 0,
|
||||
clock: () => now,
|
||||
},
|
||||
);
|
||||
expect(result.samples).toEqual([2, 2, 2]);
|
||||
expect(result.p95Ms).toBe(2);
|
||||
expect(percentile([1, 2, 3, 4], 0.5)).toBe(2);
|
||||
});
|
||||
|
||||
test("reports regression budget violations", () => {
|
||||
const baseline = { meanMs: 10, p95Ms: 20 } as any;
|
||||
const current = { meanMs: 12, p95Ms: 30, maxMs: 40, operationsPerSecond: 50 } as any;
|
||||
expect(compareBenchmark(current, baseline, { meanPercent: 10, p95Percent: 20 })).toHaveLength(
|
||||
2,
|
||||
);
|
||||
});
|
||||
});
|
||||
Vendored
+9
@@ -0,0 +1,9 @@
|
||||
# @wrnexus/cache
|
||||
|
||||
Bounded in-memory/tag caching and HTTP response caching for WRNexusJS. Supports request deduplication, tag invalidation, ETags, fresh/stale states, and optional detached stale revalidation.
|
||||
|
||||
```ts
|
||||
import { TagCache, responseCache } from "@wrnexus/cache";
|
||||
const cache = new TagCache({ ttlMs: 60_000, staleWhileRevalidateMs: 300_000 });
|
||||
export default responseCache({ cache, tags: ["products"] });
|
||||
```
|
||||
Vendored
+13
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"name": "@wrnexus/cache",
|
||||
"version": "0.7.0",
|
||||
"type": "module",
|
||||
"description": "Tag-aware memory and response caching with stale-while-revalidate for WRNexusJS.",
|
||||
"main": "src/index.ts",
|
||||
"exports": {
|
||||
".": "./src/index.ts"
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*"
|
||||
}
|
||||
}
|
||||
Vendored
+4
@@ -0,0 +1,4 @@
|
||||
export { TagCache } from "./memory.ts";
|
||||
export type { CacheEntry, CacheLookup, CacheSetOptions, TagCacheOptions } from "./memory.ts";
|
||||
export { responseCache } from "./response.ts";
|
||||
export type { CachedResponse, ResponseCacheOptions } from "./response.ts";
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user