Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Clintchiz
|
cc98bccd6c |
@@ -1,11 +0,0 @@
|
||||
{
|
||||
"version": "0.0.1",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "component-showcase",
|
||||
"runtimeExecutable": "bun",
|
||||
"runtimeArgs": ["run", "--cwd", "examples/component-showcase", "dev"],
|
||||
"port": 3000
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/ai",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "Zero-dependency Claude (Anthropic) client for WrNexus apps.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -149,156 +149,3 @@ app.put(
|
||||
- **Bun-only** — like the rest of WrNexus, this package targets the Bun runtime; Node is not supported.
|
||||
- Works with [`@wrnexus/core`](../core) — the guards return `Middleware` and read the subject from `ctx.user` on the request `Context`. Both types are imported from `@wrnexus/core`.
|
||||
- Policy combinators (`any`, `all`) and `authorize` are async-aware, so policies may return a `Promise<boolean>` (e.g. for a database ownership check).
|
||||
|
||||
## Declaring permissions
|
||||
|
||||
The RBAC/PBAC/ABAC surface above is the low-level toolkit. On top of it sits a
|
||||
declarative **registry + catalog + store + engine**: permissions, roles, and
|
||||
policies are declared once in code, merged into a frozen catalog at boot, and
|
||||
resolved per-request against a pluggable `PermissionStore` that holds who has
|
||||
what.
|
||||
|
||||
Put declarations in `app/authz/<name>.ts`; they are discovered automatically
|
||||
and merged (conflicting declarations of the same permission/role/policy across
|
||||
files fail the boot loudly, naming both source files).
|
||||
|
||||
```ts
|
||||
import { defineAuthz, owner } from "@wrnexus/authz";
|
||||
|
||||
export default defineAuthz({
|
||||
permissions: {
|
||||
"post:read": { title: "View posts", public: true },
|
||||
"post:delete": { title: "Delete posts", risk: "high" },
|
||||
},
|
||||
// "post:*" is a namespace wildcard grant, valid inside a role's list — it is
|
||||
// not itself a registered permission, so it can only ever grant permissions
|
||||
// that ARE declared above (e.g. "post:read", "post:delete").
|
||||
roles: { editor: ["post:*"], admin: ["role:editor"] },
|
||||
policies: { ownsPost: owner("id", "authorId") },
|
||||
bindings: { "post:delete": ["ownsPost"] },
|
||||
});
|
||||
```
|
||||
|
||||
`public: true` means anonymous callers may hold the permission — but any
|
||||
policy bound to it still runs, and can still veto the anonymous caller (e.g. a
|
||||
`notBanned` policy on a public `post:preview` permission).
|
||||
|
||||
## Checking permissions
|
||||
|
||||
Register `authzMiddleware` once, in `app/middleware/`, with the merged
|
||||
catalog and a `PermissionStore`. Like every other `app/middleware/*.ts` file,
|
||||
the registration is an eager, module-scope call — the same shape as
|
||||
`authzMiddleware({ catalog, store })` requires — so it must run after the
|
||||
catalog has been populated. Both the dev server and `wrnexus build`'s
|
||||
generated production entry guarantee `getAuthzCatalog()` is populated before
|
||||
any app middleware module evaluates. Name the file so it sorts after whatever
|
||||
middleware sets `ctx.user` (middleware runs in alphabetical filename order —
|
||||
`authz.ts` after `auth.ts`, for instance).
|
||||
|
||||
```ts
|
||||
// app/middleware/authz.ts
|
||||
import { authzMiddleware, getAuthzCatalog } from "@wrnexus/authz";
|
||||
import { dbPermissionStore } from "@wrnexus/authz/db";
|
||||
import { getDb } from "@wrnexus/db";
|
||||
|
||||
export default authzMiddleware({ catalog: getAuthzCatalog(), store: dbPermissionStore(getDb()) });
|
||||
```
|
||||
|
||||
> **`subject.id` must be a non-empty string.** The engine denies (and logs to
|
||||
> stderr) whenever `ctx.user.id` is present but not a non-empty string — this
|
||||
> includes the common case of an integer primary key. Coerce it before it
|
||||
> reaches `ctx.user`, e.g. `user.id = String(row.id)`, or every request for
|
||||
> that user denies with "Invalid subject" instead of resolving normally.
|
||||
> `owner()` (the built-in ownership policy) compares subject and resource ids
|
||||
> with `Object.is`, so both sides must be the same type too — `owner()` on a
|
||||
> numeric `resource.authorId` against a stringified `subject.id` never
|
||||
> matches even when they represent "the same" id.
|
||||
|
||||
There is no per-route `middleware` export — `app/middleware/*.ts` is the only
|
||||
place middleware is registered. To gate part of the app, branch on the
|
||||
request the same way any other conditional middleware does (compare
|
||||
`app/middleware/captcha-login.ts` in the auth showcase, which branches on
|
||||
method + path the same way):
|
||||
|
||||
```ts
|
||||
// app/middleware/protect-posts.ts
|
||||
import type { Context, Next } from "@wrnexus/core";
|
||||
import { guardPermission } from "@wrnexus/authz";
|
||||
|
||||
const guardPostWrite = guardPermission("post:write");
|
||||
|
||||
export default function protectPosts(ctx: Context, next: Next) {
|
||||
return ctx.url.pathname.startsWith("/api/posts") && ctx.req.method !== "GET"
|
||||
? guardPostWrite(ctx, next)
|
||||
: next();
|
||||
}
|
||||
```
|
||||
|
||||
Or check inline inside a route handler with the free function `can()`:
|
||||
|
||||
```ts
|
||||
// app/api/posts/[id].ts
|
||||
import type { Context } from "@wrnexus/core";
|
||||
import { can } from "@wrnexus/authz";
|
||||
|
||||
export const DELETE = async (ctx: Context) => {
|
||||
const post = { id: "1", authorId: "alice" }; // load your own resource here
|
||||
if (!(await can(ctx, "post:delete", post))) {
|
||||
return Response.json({ ok: false, error: "Forbidden" }, { status: 403 });
|
||||
}
|
||||
return Response.json({ ok: true });
|
||||
};
|
||||
```
|
||||
|
||||
`can()` is a free function taking `ctx`, not `ctx.can` — `@wrnexus/core` must
|
||||
not depend on `@wrnexus/authz`, so the per-request resolver lives in
|
||||
`ctx.locals` instead, reached through `can()` / `decideFor()` /
|
||||
`guardPermission()` / `filterCan()`. Calling any of them before
|
||||
`authzMiddleware` has run for that request throws a `WRN-AUTHZ-SETUP` error
|
||||
naming the missing registration, rather than silently denying.
|
||||
|
||||
See `examples/auth-showcase/app/authz/showcase.ts` and
|
||||
`examples/auth-showcase/app/middleware/authz.ts` for a complete, runnable
|
||||
version of this wiring.
|
||||
|
||||
## Precedence
|
||||
|
||||
1. An explicit deny wins over everything, including `*` — and honours the
|
||||
same namespace-wildcard matching as grants (denying `post:*` blocks
|
||||
`post:comment:delete`, not just `post:*` itself).
|
||||
2. A bound policy can veto a permission a role grants, and runs even for a
|
||||
`public: true` permission — including for an anonymous caller.
|
||||
3. Otherwise the permission must be held via a role or an explicit grant.
|
||||
4. Default deny.
|
||||
|
||||
Every failure — an unknown permission (outside strict/dev mode), a store
|
||||
outage, a thrown policy — denies rather than throwing through to the caller.
|
||||
|
||||
`permissionsFor()` (on the resolver returned by `createAuthzResolver`) is a
|
||||
coarse hint for hiding UI (e.g. a menu section), **never authoritative**. A
|
||||
`Set<string>` cannot represent "granted `post:*` except `post:delete`", so a
|
||||
narrow deny beneath a broad grant is invisible to it — the set still contains
|
||||
`post:*` while `can()` / `decide()` correctly refuse `post:delete`. Gate real
|
||||
actions with `can()`, `decideFor()`, or `filterCan()`; never by matching
|
||||
against `permissionsFor()`'s result.
|
||||
|
||||
## CLI
|
||||
|
||||
```bash
|
||||
wrnexus authz list # every registered permission, role, and policy
|
||||
wrnexus authz generate # app/authz/permissions.gen.ts type unions
|
||||
wrnexus authz init # scaffold the assignment-table migration
|
||||
```
|
||||
|
||||
`wrnexus authz generate`'s output is a plain `Permission | Role` string-literal
|
||||
union — `can()`, `guardPermission()`, and `decideFor()` all take a bare
|
||||
`string` and nothing reads this file automatically, so import it to type your
|
||||
own helpers/constants against the registered catalog, e.g.:
|
||||
|
||||
```ts
|
||||
import type { Permission } from "app/authz/permissions.gen.ts";
|
||||
|
||||
function guard(permission: Permission) {
|
||||
return guardPermission(permission);
|
||||
}
|
||||
```
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/authz",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/authz — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -34,16 +34,8 @@
|
||||
".": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"import": "./dist/index.js"
|
||||
},
|
||||
"./db": {
|
||||
"types": "./dist/db.d.ts",
|
||||
"import": "./dist/db.js"
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.5",
|
||||
"@wrnexus/db": "^0.8.5"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"README.md"
|
||||
|
||||
+17
-18
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/cli",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/cli — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -44,23 +44,22 @@
|
||||
"wrnexus": "./dist/index.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.5",
|
||||
"@wrnexus/router": "^0.8.5",
|
||||
"@wrnexus/csr": "^0.8.5",
|
||||
"@wrnexus/compiler": "^0.8.5",
|
||||
"@wrnexus/styles": "^0.8.5",
|
||||
"@wrnexus/dev-server": "^0.8.5",
|
||||
"@wrnexus/ui": "^0.8.5",
|
||||
"@wrnexus/validation": "^0.8.5",
|
||||
"@wrnexus/i18n": "^0.8.5",
|
||||
"@wrnexus/mcp": "^0.8.5",
|
||||
"@wrnexus/playground": "^0.8.5",
|
||||
"@wrnexus/db": "^0.8.5",
|
||||
"@wrnexus/authz": "^0.8.5",
|
||||
"@wrnexus/plugin": "^0.8.5",
|
||||
"@wrnexus/syntax": "^0.8.5",
|
||||
"@wrnexus/typecheck": "^0.8.5",
|
||||
"@wrnexus/security": "^0.8.5",
|
||||
"@wrnexus/core": "^0.8.4",
|
||||
"@wrnexus/router": "^0.8.4",
|
||||
"@wrnexus/csr": "^0.8.4",
|
||||
"@wrnexus/compiler": "^0.8.4",
|
||||
"@wrnexus/styles": "^0.8.4",
|
||||
"@wrnexus/dev-server": "^0.8.4",
|
||||
"@wrnexus/ui": "^0.8.4",
|
||||
"@wrnexus/validation": "^0.8.4",
|
||||
"@wrnexus/i18n": "^0.8.4",
|
||||
"@wrnexus/mcp": "^0.8.4",
|
||||
"@wrnexus/playground": "^0.8.4",
|
||||
"@wrnexus/db": "^0.8.4",
|
||||
"@wrnexus/plugin": "^0.8.4",
|
||||
"@wrnexus/syntax": "^0.8.4",
|
||||
"@wrnexus/typecheck": "^0.8.4",
|
||||
"@wrnexus/security": "^0.8.4",
|
||||
"selfsigned": "^5.5.0"
|
||||
},
|
||||
"files": [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/compiler",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/compiler — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -37,10 +37,10 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/csr": "^0.8.5",
|
||||
"@wrnexus/syntax": "^0.8.5",
|
||||
"@wrnexus/store": "^0.8.5",
|
||||
"@wrnexus/validation": "^0.8.5"
|
||||
"@wrnexus/csr": "^0.8.4",
|
||||
"@wrnexus/syntax": "^0.8.4",
|
||||
"@wrnexus/store": "^0.8.4",
|
||||
"@wrnexus/validation": "^0.8.4"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/core",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/core — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/csr",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/csr — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -37,7 +37,7 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.5"
|
||||
"@wrnexus/core": "^0.8.4"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/db",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "Typed database drivers, migrations, instrumentation, repositories, pagination, and transaction helpers.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/dev-server",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/dev-server — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -41,27 +41,25 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/authz": "^0.8.5",
|
||||
"@wrnexus/rpc": "^0.8.5",
|
||||
"@wrnexus/core": "^0.8.5",
|
||||
"@wrnexus/dev-toolbar": "^0.8.5",
|
||||
"@wrnexus/router": "^0.8.5",
|
||||
"@wrnexus/ssr": "^0.8.5",
|
||||
"@wrnexus/csr": "^0.8.5",
|
||||
"@wrnexus/compiler": "^0.8.5",
|
||||
"@wrnexus/styles": "^0.8.5",
|
||||
"@wrnexus/ui": "^0.8.5",
|
||||
"@wrnexus/validation": "^0.8.5",
|
||||
"@wrnexus/i18n": "^0.8.5",
|
||||
"@wrnexus/db": "^0.8.5",
|
||||
"@wrnexus/pubsub": "^0.8.5",
|
||||
"@wrnexus/uploader": "^0.8.5",
|
||||
"@wrnexus/plugin": "^0.8.5",
|
||||
"@wrnexus/store": "^0.8.5",
|
||||
"@wrnexus/security": "^0.8.5",
|
||||
"@wrnexus/observability": "^0.8.5",
|
||||
"@wrnexus/cache": "^0.8.5",
|
||||
"@wrnexus/pwa": "^0.8.5"
|
||||
"@wrnexus/core": "^0.8.4",
|
||||
"@wrnexus/dev-toolbar": "^0.8.4",
|
||||
"@wrnexus/router": "^0.8.4",
|
||||
"@wrnexus/ssr": "^0.8.4",
|
||||
"@wrnexus/csr": "^0.8.4",
|
||||
"@wrnexus/compiler": "^0.8.4",
|
||||
"@wrnexus/styles": "^0.8.4",
|
||||
"@wrnexus/ui": "^0.8.4",
|
||||
"@wrnexus/validation": "^0.8.4",
|
||||
"@wrnexus/i18n": "^0.8.4",
|
||||
"@wrnexus/db": "^0.8.4",
|
||||
"@wrnexus/pubsub": "^0.8.4",
|
||||
"@wrnexus/uploader": "^0.8.4",
|
||||
"@wrnexus/plugin": "^0.8.4",
|
||||
"@wrnexus/store": "^0.8.4",
|
||||
"@wrnexus/security": "^0.8.4",
|
||||
"@wrnexus/observability": "^0.8.4",
|
||||
"@wrnexus/cache": "^0.8.4",
|
||||
"@wrnexus/pwa": "^0.8.4"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/dev-toolbar",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/dev-toolbar — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/encryption",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "Authenticated encryption, key rotation, hashing, and optional application-layer encrypted HTTP envelopes.",
|
||||
"license": "MIT",
|
||||
@@ -37,7 +37,7 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.5"
|
||||
"@wrnexus/core": "^0.8.4"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/helpers",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "Safe convenience helpers for WrNexus request contexts and common application flows.",
|
||||
"license": "MIT",
|
||||
@@ -37,7 +37,7 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.5"
|
||||
"@wrnexus/core": "^0.8.4"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/i18n",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "Locale loading, fallback resolution, SSR/browser translations, formatters, and WRNexusJS language components.",
|
||||
"license": "MIT",
|
||||
@@ -42,9 +42,9 @@
|
||||
"./components/*": "./components/*"
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.5",
|
||||
"@wrnexus/plugin": "^0.8.5",
|
||||
"@wrnexus/ui": "^0.8.5"
|
||||
"@wrnexus/core": "^0.8.4",
|
||||
"@wrnexus/plugin": "^0.8.4",
|
||||
"@wrnexus/ui": "^0.8.4"
|
||||
},
|
||||
"wrnexus": {
|
||||
"plugin": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/jwt",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "HS256 JSON Web Tokens, key rotation, access/refresh helpers, scopes, cookies, and auth middleware.",
|
||||
"license": "MIT",
|
||||
@@ -37,7 +37,7 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.5"
|
||||
"@wrnexus/core": "^0.8.4"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/mobile",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/mobile — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -37,7 +37,7 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/native": "^0.8.5"
|
||||
"@wrnexus/native": "^0.8.4"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/native",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/native — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/oauth",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/oauth — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -37,7 +37,7 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/jwt": "^0.8.5"
|
||||
"@wrnexus/jwt": "^0.8.4"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/plugin",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/plugin — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -49,7 +49,7 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/syntax": "^0.8.5"
|
||||
"@wrnexus/syntax": "^0.8.4"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/pubsub",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/pubsub — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/queue",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/queue — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -37,7 +37,7 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.5"
|
||||
"@wrnexus/core": "^0.8.4"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/reactive",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/reactive — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/router",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/router — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -37,8 +37,8 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/compiler": "^0.8.5",
|
||||
"@wrnexus/core": "^0.8.5"
|
||||
"@wrnexus/compiler": "^0.8.4",
|
||||
"@wrnexus/core": "^0.8.4"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/ssr",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/ssr — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -45,9 +45,9 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.5",
|
||||
"@wrnexus/store": "^0.8.5",
|
||||
"@wrnexus/security": "^0.8.5"
|
||||
"@wrnexus/core": "^0.8.4",
|
||||
"@wrnexus/store": "^0.8.4",
|
||||
"@wrnexus/security": "^0.8.4"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/styles",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/styles — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -37,9 +37,9 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/uploader": "^0.8.5",
|
||||
"@wrnexus/core": "^0.8.5",
|
||||
"@wrnexus/plugin": "^0.8.5"
|
||||
"@wrnexus/uploader": "^0.8.4",
|
||||
"@wrnexus/core": "^0.8.4",
|
||||
"@wrnexus/plugin": "^0.8.4"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/syntax",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/syntax — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/test",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/test — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/tracking",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/tracking — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
|
||||
+16
-16
@@ -359,15 +359,6 @@ Reusable preference switcher component.
|
||||
- Slots: None
|
||||
- Outputs: `theme({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `color({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`, `language({ sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])`
|
||||
|
||||
### Toaster
|
||||
|
||||
Reusable toaster component.
|
||||
|
||||
- Mount: `data-component="Toaster"`
|
||||
- Props: `color: string = "info"`, `size: string = "default"`, `position: string = "bottom-right"`, `duration: number = 4500`, `max: number = 4`, `pauseOnHover: boolean = true`, `showIcon: boolean = true`, `successIcon: string = ""`, `dangerIcon: string = ""`, `warningIcon: string = ""`, `infoIcon: string = ""`, `closable: boolean = true`, `showProgress: boolean = true`, `closeLabel: string = "Dismiss notification"`, `class: string = ""`
|
||||
- Slots: None
|
||||
- Outputs: `show({ id: number; message: string; tone: string })`, `dismiss({ id: number; reason: string })`, `action({ id: number; sourceEvent: Event })`
|
||||
|
||||
## Data
|
||||
|
||||
### MetricCard
|
||||
@@ -563,6 +554,15 @@ Theme-aware, responsive data map component.
|
||||
- Slots: `default`
|
||||
- Outputs: `select({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`
|
||||
|
||||
### DataTable
|
||||
|
||||
Theme-aware, responsive data table component.
|
||||
|
||||
- Mount: `data-component="DataTable"`
|
||||
- Props: `size: string = "default"`, `color: string = "primary"`, `caption: string = "Data Table"`, `columns: unknown[] = []`, `rows: unknown[] = []`, `striped: boolean = true`, `class: string = ""`
|
||||
- Slots: `default`
|
||||
- Outputs: `sort({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `select({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `rowClick({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `pageChange({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`
|
||||
|
||||
### DragAndDrop
|
||||
|
||||
Theme-aware, responsive drag and drop component.
|
||||
@@ -945,7 +945,7 @@ Open an accessible keyboard-aware action menu from pointer or keyboard context i
|
||||
Present responsive modal side or bottom content with focus management, backdrop behavior, slots, and close events.
|
||||
|
||||
- Mount: `data-component="Drawer"`
|
||||
- Props: `open: boolean = false`, `defaultOpen: boolean = false`, `placement: string = "right"`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "default"`, `title: string = "Drawer"`, `description: string = ""`, `icon: string = ""`, `label: string = "Drawer"`, `closeLabel: string = "Close drawer"`, `showClose: boolean = true`, `closeOnBackdrop: boolean = true`, `closeOnEscape: boolean = true`, `duration: number = 260`, `overlay: boolean = true`, `scrollable: boolean = true`, `triggerLabel: string = ""`, `triggerIcon: string = ""`, `class: string = ""`
|
||||
- Props: `open: boolean = false`, `defaultOpen: boolean = false`, `placement: string = "right"`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "default"`, `title: string = "Drawer"`, `description: string = ""`, `icon: string = ""`, `label: string = "Drawer"`, `closeLabel: string = "Close drawer"`, `showClose: boolean = true`, `closeOnBackdrop: boolean = true`, `closeOnEscape: boolean = true`, `overlay: boolean = true`, `scrollable: boolean = true`, `triggerLabel: string = ""`, `triggerIcon: string = ""`, `class: string = ""`
|
||||
- Slots: `trigger`, `header`, `default`, `footer`
|
||||
- Outputs: `open({ placement: string; sourceEvent: Event })`, `close({ reason: string; placement: string; sourceEvent: Event })`, `cancel({ placement: string; sourceEvent: Event })`
|
||||
|
||||
@@ -963,7 +963,7 @@ Open an accessible anchored menu with keyboard navigation, item selection, actio
|
||||
Present an accessible modal dialog with focus management, confirmation, cancellation, slots, and responsive sizing.
|
||||
|
||||
- Mount: `data-component="Modal"`
|
||||
- Props: `open: boolean = false`, `defaultOpen: boolean = false`, `title: string = "Modal"`, `description: string = ""`, `icon: string = ""`, `label: string = "Modal dialog"`, `size: string = "md"`, `placement: string = "center"`, `color: string = "primary"`, `variant: string = "default"`, `showClose: boolean = true`, `closeLabel: string = "Close modal"`, `closeOnBackdrop: boolean = true`, `closeOnEscape: boolean = true`, `closeOnCancel: boolean = true`, `closeOnConfirm: boolean = false`, `showFooter: boolean = true`, `cancelLabel: string = "Cancel"`, `cancelIcon: string = ""`, `confirmLabel: string = "Confirm"`, `confirmIcon: string = ""`, `confirmDisabled: boolean = false`, `confirmLoading: boolean = false`, `destructive: boolean = false`, `triggerLabel: string = ""`, `triggerIcon: string = ""`, `scrollable: boolean = true`, `scrollBehavior: string = "inside"`, `class: string = ""`
|
||||
- Props: `open: boolean = false`, `defaultOpen: boolean = false`, `title: string = "Modal"`, `description: string = ""`, `icon: string = ""`, `label: string = "Modal dialog"`, `size: string = "md"`, `placement: string = "center"`, `color: string = "primary"`, `variant: string = "default"`, `showClose: boolean = true`, `closeLabel: string = "Close modal"`, `closeOnBackdrop: boolean = true`, `closeOnEscape: boolean = true`, `closeOnCancel: boolean = true`, `closeOnConfirm: boolean = false`, `showFooter: boolean = true`, `cancelLabel: string = "Cancel"`, `cancelIcon: string = ""`, `confirmLabel: string = "Confirm"`, `confirmIcon: string = ""`, `confirmDisabled: boolean = false`, `confirmLoading: boolean = false`, `destructive: boolean = false`, `triggerLabel: string = ""`, `triggerIcon: string = ""`, `scrollable: boolean = true`, `class: string = ""`
|
||||
- Slots: `trigger`, `header`, `default`, `footer`
|
||||
- Outputs: `open({ sourceEvent: Event })`, `close({ reason: string; sourceEvent: Event })`, `cancel({ sourceEvent: Event })`, `confirm({ sourceEvent: Event })`
|
||||
|
||||
@@ -987,11 +987,11 @@ Show concise accessible contextual help on hover, focus, click, or controlled op
|
||||
|
||||
## Tables
|
||||
|
||||
### DataTable
|
||||
### Table
|
||||
|
||||
Sortable, filterable, paginated data table with row selection.
|
||||
Theme-aware, responsive table component.
|
||||
|
||||
- Mount: `data-component="DataTable"`
|
||||
- Props: `color: string = "primary"`, `size: string = "default"`, `columns: unknown[] = []`, `rows: unknown[] = []`, `rowKey: string = "id"`, `remote: boolean = false`, `loadingLabel: string = "Loading"`, `errorLabel: string = "Could not load this data"`, `retryLabel: string = "Try again"`, `caption: string = ""`, `description: string = ""`, `searchable: boolean = true`, `searchPlaceholder: string = "Search"`, `paginated: boolean = true`, `pageSize: number = 10`, `paginationStyle: string = "compact"`, `pageSizes: number[] = [10, 25, 50]`, `selectable: boolean = false`, `actions: unknown[] = []`, `striped: boolean = true`, `bordered: boolean = true`, `gridlines: string = "rows"`, `density: string = "default"`, `emptyLabel: string = "No records to show"`, `noResultsLabel: string = "No records match your search"`, `clearSearchLabel: string = "Clear search"`, `stickyFirstColumn: boolean = false`, `layout: string = "rows"`, `class: string = ""`
|
||||
- Mount: `data-component="Table"`
|
||||
- Props: `size: string = "default"`, `color: string = "primary"`, `caption: string = "Table"`, `columns: unknown[] = []`, `rows: unknown[] = []`, `striped: boolean = true`, `class: string = ""`
|
||||
- Slots: `default`
|
||||
- Outputs: `sort({ key: string; direction: string })`, `search({ query: string })`, `pageChange({ page: number; pageSize: number })`, `select({ selected: Array<string | number>; all: boolean })`, `change({ page: number; pageSize: number; total: number; query: string; sortKey: string; sortDirection: string })`, `rowClick({ row: object; sourceEvent: Event })`, `action({ id: string; selected: Array<string | number>; rows: object[]; sourceEvent: Event })`, `request({ instanceId: number; page: number; pageSize: number; sortKey: string; sortDirection: string; query: string })`
|
||||
- Outputs: `sort({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `select({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `rowClick({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`
|
||||
|
||||
@@ -168,8 +168,8 @@
|
||||
},
|
||||
{
|
||||
"name": "DataTable",
|
||||
"category": "tables",
|
||||
"purpose": "Sortable, filterable, paginated data table with row selection."
|
||||
"category": "integrations",
|
||||
"purpose": "Theme-aware, responsive data table component."
|
||||
},
|
||||
{
|
||||
"name": "DatePicker",
|
||||
@@ -471,6 +471,11 @@
|
||||
"category": "forms",
|
||||
"purpose": "Theme-aware, responsive switch component."
|
||||
},
|
||||
{
|
||||
"name": "Table",
|
||||
"category": "tables",
|
||||
"purpose": "Theme-aware, responsive table component."
|
||||
},
|
||||
{
|
||||
"name": "Tabs",
|
||||
"category": "navigation",
|
||||
@@ -506,11 +511,6 @@
|
||||
"category": "integrations",
|
||||
"purpose": "Theme-aware, responsive toast notifications component."
|
||||
},
|
||||
{
|
||||
"name": "Toaster",
|
||||
"category": "core",
|
||||
"purpose": "Reusable toaster component."
|
||||
},
|
||||
{
|
||||
"name": "ToggleCount",
|
||||
"category": "advanced-forms",
|
||||
|
||||
@@ -4569,9 +4569,16 @@
|
||||
{
|
||||
"name": "DataTable",
|
||||
"mount": "DataTable",
|
||||
"category": "tables",
|
||||
"purpose": "Sortable, filterable, paginated data table with row selection.",
|
||||
"category": "integrations",
|
||||
"purpose": "Theme-aware, responsive data table component.",
|
||||
"props": [
|
||||
{
|
||||
"name": "size",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"default\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "color",
|
||||
"type": "string",
|
||||
@@ -4580,10 +4587,10 @@
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "size",
|
||||
"name": "caption",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"default\"",
|
||||
"default": "\"Data Table\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
@@ -4600,111 +4607,6 @@
|
||||
"default": "[]",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "rowKey",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"id\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "remote",
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": "false",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "loadingLabel",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"Loading\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "errorLabel",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"Could not load this data\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "retryLabel",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"Try again\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "caption",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "description",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "searchable",
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": "true",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "searchPlaceholder",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"Search\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "paginated",
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": "true",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "pageSize",
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"default": "10",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "paginationStyle",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"compact\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "pageSizes",
|
||||
"type": "number[]",
|
||||
"required": false,
|
||||
"default": "[10, 25, 50]",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "selectable",
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": "false",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "actions",
|
||||
"type": "unknown[]",
|
||||
"required": false,
|
||||
"default": "[]",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "striped",
|
||||
"type": "boolean",
|
||||
@@ -4712,62 +4614,6 @@
|
||||
"default": "true",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "bordered",
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": "true",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "gridlines",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"rows\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "density",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"default\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "emptyLabel",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"No records to show\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "noResultsLabel",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"No records match your search\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "clearSearchLabel",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"Clear search\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "stickyFirstColumn",
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": "false",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "layout",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"rows\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "class",
|
||||
"type": "string",
|
||||
@@ -4780,47 +4626,26 @@
|
||||
"outputs": [
|
||||
{
|
||||
"name": "sort",
|
||||
"payloadType": "{ key: string; direction: string }"
|
||||
},
|
||||
{
|
||||
"name": "search",
|
||||
"payloadType": "{ query: string }"
|
||||
},
|
||||
{
|
||||
"name": "pageChange",
|
||||
"payloadType": "{ page: number; pageSize: number }"
|
||||
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
|
||||
},
|
||||
{
|
||||
"name": "select",
|
||||
"payloadType": "{ selected: Array<string | number>; all: boolean }"
|
||||
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
|
||||
},
|
||||
{
|
||||
"name": "change",
|
||||
"payloadType": "{ page: number; pageSize: number; total: number; query: string; sortKey: string; sortDirection: string }"
|
||||
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
|
||||
},
|
||||
{
|
||||
"name": "rowClick",
|
||||
"payloadType": "{ row: object; sourceEvent: Event }"
|
||||
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
|
||||
},
|
||||
{
|
||||
"name": "action",
|
||||
"payloadType": "{ id: string; selected: Array<string | number>; rows: object[]; sourceEvent: Event }"
|
||||
},
|
||||
{
|
||||
"name": "request",
|
||||
"payloadType": "{ instanceId: number; page: number; pageSize: number; sortKey: string; sortDirection: string; query: string }"
|
||||
"name": "pageChange",
|
||||
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
"sort",
|
||||
"search",
|
||||
"pageChange",
|
||||
"select",
|
||||
"change",
|
||||
"rowClick",
|
||||
"action",
|
||||
"request"
|
||||
],
|
||||
"events": ["sort", "select", "change", "rowClick", "pageChange"],
|
||||
"source": "components/DataTable.wrn"
|
||||
},
|
||||
{
|
||||
@@ -5395,13 +5220,6 @@
|
||||
"default": "true",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "duration",
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"default": "260",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "overlay",
|
||||
"type": "boolean",
|
||||
@@ -8918,13 +8736,6 @@
|
||||
"default": "true",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "scrollBehavior",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"inside\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "class",
|
||||
"type": "string",
|
||||
@@ -12198,6 +12009,80 @@
|
||||
"events": ["input", "change", "focus", "blur"],
|
||||
"source": "components/Switch.wrn"
|
||||
},
|
||||
{
|
||||
"name": "Table",
|
||||
"mount": "Table",
|
||||
"category": "tables",
|
||||
"purpose": "Theme-aware, responsive table component.",
|
||||
"props": [
|
||||
{
|
||||
"name": "size",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"default\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "color",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"primary\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "caption",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"Table\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "columns",
|
||||
"type": "unknown[]",
|
||||
"required": false,
|
||||
"default": "[]",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "rows",
|
||||
"type": "unknown[]",
|
||||
"required": false,
|
||||
"default": "[]",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "striped",
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": "true",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "class",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"\"",
|
||||
"options": []
|
||||
}
|
||||
],
|
||||
"slots": ["default"],
|
||||
"outputs": [
|
||||
{
|
||||
"name": "sort",
|
||||
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
|
||||
},
|
||||
{
|
||||
"name": "select",
|
||||
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
|
||||
},
|
||||
{
|
||||
"name": "rowClick",
|
||||
"payloadType": "{ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null"
|
||||
}
|
||||
],
|
||||
"events": ["sort", "select", "rowClick"],
|
||||
"source": "components/table.wrn"
|
||||
},
|
||||
{
|
||||
"name": "Tabs",
|
||||
"mount": "Tabs",
|
||||
@@ -13008,136 +12893,6 @@
|
||||
"events": ["add", "dismiss", "clear", "action"],
|
||||
"source": "components/ToastNotifications.wrn"
|
||||
},
|
||||
{
|
||||
"name": "Toaster",
|
||||
"mount": "Toaster",
|
||||
"category": "core",
|
||||
"purpose": "Reusable toaster component.",
|
||||
"props": [
|
||||
{
|
||||
"name": "color",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"info\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "size",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"default\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "position",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"bottom-right\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "duration",
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"default": "4500",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "max",
|
||||
"type": "number",
|
||||
"required": false,
|
||||
"default": "4",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "pauseOnHover",
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": "true",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "showIcon",
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": "true",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "successIcon",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "dangerIcon",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "warningIcon",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "infoIcon",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "closable",
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": "true",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "showProgress",
|
||||
"type": "boolean",
|
||||
"required": false,
|
||||
"default": "true",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "closeLabel",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"Dismiss notification\"",
|
||||
"options": []
|
||||
},
|
||||
{
|
||||
"name": "class",
|
||||
"type": "string",
|
||||
"required": false,
|
||||
"default": "\"\"",
|
||||
"options": []
|
||||
}
|
||||
],
|
||||
"slots": [],
|
||||
"outputs": [
|
||||
{
|
||||
"name": "show",
|
||||
"payloadType": "{ id: number; message: string; tone: string }"
|
||||
},
|
||||
{
|
||||
"name": "dismiss",
|
||||
"payloadType": "{ id: number; reason: string }"
|
||||
},
|
||||
{
|
||||
"name": "action",
|
||||
"payloadType": "{ id: number; sourceEvent: Event }"
|
||||
}
|
||||
],
|
||||
"events": ["show", "dismiss", "action"],
|
||||
"source": "components/Toaster.wrn"
|
||||
},
|
||||
{
|
||||
"name": "ToggleCount",
|
||||
"mount": "ToggleCount",
|
||||
|
||||
@@ -45,12 +45,8 @@ component ContextMenu {
|
||||
sourceEvent.preventDefault()
|
||||
}
|
||||
if (placement === "pointer" && sourceEvent) {
|
||||
// Place the menu at the pointer and let the anchored clamp in the
|
||||
// runtime pull it back on screen once it has been laid out and can
|
||||
// actually be measured. Subtracting a guessed 340x420 here instead
|
||||
// pushed every menu that was not that size away from the pointer.
|
||||
positionX = Math.max(12, sourceEvent.clientX || 12)
|
||||
positionY = Math.max(12, sourceEvent.clientY || 12)
|
||||
positionX = Math.max(12, Math.min(sourceEvent.clientX || 12, window.innerWidth - 340))
|
||||
positionY = Math.max(12, Math.min(sourceEvent.clientY || 12, window.innerHeight - 420))
|
||||
}
|
||||
visible = true
|
||||
output.open({
|
||||
@@ -165,7 +161,6 @@ component ContextMenu {
|
||||
|
||||
<div
|
||||
class="wire-context-menu__panel"
|
||||
data-wrn-anchored="true"
|
||||
data-show='{open || visible}'
|
||||
role="menu"
|
||||
aria-label='{label}'
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -20,8 +20,6 @@ open: boolean = false
|
||||
showClose: boolean = true
|
||||
closeOnBackdrop: boolean = true
|
||||
closeOnEscape: boolean = true
|
||||
// Open/close animation length in ms. 0 disables the animation entirely.
|
||||
duration: number = 260
|
||||
overlay: boolean = true
|
||||
scrollable: boolean = true
|
||||
triggerLabel: string = ""
|
||||
@@ -81,9 +79,7 @@ open: boolean = false
|
||||
data-overlay='{overlay ? "true" : "false"}'
|
||||
data-scrollable='{scrollable ? "true" : "false"}'
|
||||
class='wire-drawer {class}'
|
||||
style='--drawer-duration: {duration}ms'
|
||||
>
|
||||
|
||||
{#if triggerLabel}
|
||||
<button
|
||||
type="button"
|
||||
@@ -105,6 +101,7 @@ open: boolean = false
|
||||
|
||||
<div
|
||||
class="wire-drawer__layer"
|
||||
data-show='{open || visible}'
|
||||
role="presentation"
|
||||
@keydown='handleKeydown(event)'
|
||||
>
|
||||
@@ -221,32 +218,12 @@ open: boolean = false
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*
|
||||
* The layer stays in the layout and is revealed by [data-open]; it used to
|
||||
* be toggled with data-show, which sets display:none, and display cannot
|
||||
* be transitioned -- the drawer simply snapped in and out. visibility is
|
||||
* delayed by the duration on the way out so the panel can finish sliding
|
||||
* before the layer is taken out of the hit-testing tree.
|
||||
*/
|
||||
.wire-drawer__layer {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1200;
|
||||
display: flex;
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity var(--drawer-duration, 260ms) ease,
|
||||
visibility 0s linear var(--drawer-duration, 260ms);
|
||||
}
|
||||
|
||||
.wire-drawer[data-open="true"] .wire-drawer__layer {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition:
|
||||
opacity var(--drawer-duration, 260ms) ease,
|
||||
visibility 0s linear 0s;
|
||||
}
|
||||
|
||||
.wire-drawer__backdrop {
|
||||
@@ -285,38 +262,6 @@ open: boolean = false
|
||||
box-shadow: -28px 0 80px color-mix(in srgb, black 28%, transparent);
|
||||
pointer-events: auto;
|
||||
overflow: hidden;
|
||||
/* Slides in from whichever edge the placement puts it on. */
|
||||
transform: translateX(100%);
|
||||
transition: transform var(--drawer-duration, 260ms) cubic-bezier(0.32, 0.72, 0, 1);
|
||||
}
|
||||
|
||||
.wire-drawer[data-open="true"] .wire-drawer__panel {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.wire-drawer[data-placement="left"] .wire-drawer__panel {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.wire-drawer[data-placement="top"] .wire-drawer__panel {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
.wire-drawer[data-placement="bottom"] .wire-drawer__panel {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
.wire-drawer[data-open="true"][data-placement="left"] .wire-drawer__panel,
|
||||
.wire-drawer[data-open="true"][data-placement="top"] .wire-drawer__panel,
|
||||
.wire-drawer[data-open="true"][data-placement="bottom"] .wire-drawer__panel {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.wire-drawer__layer,
|
||||
.wire-drawer__panel {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.wire-drawer[data-size="sm"] .wire-drawer__panel {
|
||||
@@ -450,19 +395,12 @@ open: boolean = false
|
||||
color: color-mix(in srgb, currentColor 76%, transparent);
|
||||
}
|
||||
|
||||
/*
|
||||
* padding is reset explicitly: an app-level `button { padding: ... }` rule
|
||||
* outranks the browser default and leaves this fixed-size button with a
|
||||
* content box of a couple of pixels, which squeezes the icon to a sliver
|
||||
* and reads as "the close button has no icon". Same trap as Modal.
|
||||
*/
|
||||
.wire-drawer__close {
|
||||
appearance: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
padding: 0;
|
||||
width: 2.35rem;
|
||||
height: 2.35rem;
|
||||
color: var(--wire-color-text-muted);
|
||||
@@ -479,30 +417,10 @@ open: boolean = false
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Never let the glyph be shrunk by the flex container. */
|
||||
.wire-drawer__close svg {
|
||||
flex: 0 0 auto;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Slot content is authored by the host app, so the app global stylesheet
|
||||
* styles it too. A bare element selector there (p { color: ... }) beats
|
||||
* anything the panel merely *inherits*, which is how modal body copy ended
|
||||
* up muted grey on a saturated background. State the colour explicitly;
|
||||
* :where() keeps the specificity low enough that any class the app puts on
|
||||
* its own slot content still wins.
|
||||
*/
|
||||
.wire-drawer__body {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
padding: 1.35rem;
|
||||
color: var(--wire-color-text);
|
||||
}
|
||||
|
||||
.wire-drawer__body :where(p, li, dd, dt, h1, h2, h3, h4, h5, h6, span, label, code) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.wire-drawer[data-scrollable="true"] .wire-drawer__body {
|
||||
|
||||
@@ -171,7 +171,6 @@ items: unknown[] = []
|
||||
|
||||
<div
|
||||
class="wire-dropdown__panel"
|
||||
data-wrn-anchored="true"
|
||||
data-show='{open || visible}'
|
||||
role="menu"
|
||||
aria-label='{menuLabel}'
|
||||
|
||||
@@ -35,7 +35,6 @@ component Modal {
|
||||
triggerLabel: string = ""
|
||||
triggerIcon: string = ""
|
||||
scrollable: boolean = true
|
||||
scrollBehavior: string = "inside"
|
||||
class: string = ""
|
||||
}
|
||||
|
||||
@@ -51,16 +50,6 @@ component Modal {
|
||||
output.open({ sourceEvent: sourceEvent })
|
||||
}
|
||||
|
||||
// Slot content can close the modal it sits in by dispatching a bubbling
|
||||
// wrnexus:modal:close event, e.g. from a form success handler:
|
||||
//
|
||||
// event.target.dispatchEvent(
|
||||
// new CustomEvent("wrnexus:modal:close", { bubbles: true })
|
||||
// )
|
||||
//
|
||||
// The listener is on the modal root, so the event only ever closes the
|
||||
// modal the dispatching element is actually inside -- no ids to wire up
|
||||
// and no way to close somebody else's modal by accident.
|
||||
client function hideModal(reason, sourceEvent) {
|
||||
visible = false
|
||||
output.close({
|
||||
@@ -98,23 +87,21 @@ component Modal {
|
||||
<div
|
||||
{...attrs}
|
||||
data-ui-component="Modal"
|
||||
data-open='{isOpen() ? "true" : "false"}'
|
||||
data-open='{open || visible ? "true" : "false"}'
|
||||
data-size='{size}'
|
||||
data-placement='{placement}'
|
||||
data-color='{color}'
|
||||
data-variant='{variant}'
|
||||
data-scrollable='{scrollable ? "true" : "false"}'
|
||||
data-scroll='{scrollBehavior}'
|
||||
data-destructive='{destructive ? "true" : "false"}'
|
||||
class='wire-modal {class}'
|
||||
@wrnexus:modal:close='hideModal("api", event)'
|
||||
>
|
||||
{#if triggerLabel}
|
||||
<button
|
||||
type="button"
|
||||
class="wire-modal__trigger"
|
||||
aria-haspopup="dialog"
|
||||
aria-expanded='{isOpen() ? "true" : "false"}'
|
||||
aria-expanded='{open || visible ? "true" : "false"}'
|
||||
@click='showModal(event)'
|
||||
>
|
||||
{#if triggerIcon}
|
||||
@@ -140,7 +127,7 @@ component Modal {
|
||||
|
||||
<div
|
||||
class="wire-modal__layer"
|
||||
data-show="isOpen()"
|
||||
data-show='{open || visible}'
|
||||
role="presentation"
|
||||
@keydown='handleKeydown(event)'
|
||||
>
|
||||
@@ -196,20 +183,11 @@ component Modal {
|
||||
aria-label='{closeLabel}'
|
||||
@click='hideModal("close-button", event)'
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
<span
|
||||
class="icon-[lucide--x]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M18 6 6 18" />
|
||||
<path d="M6 6 18 18" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
{/if}
|
||||
</header>
|
||||
@@ -299,26 +277,16 @@ component Modal {
|
||||
--modal-contrast: var(--wire-color-secondary-contrast);
|
||||
}
|
||||
|
||||
/*
|
||||
* Fallbacks below (the second var() argument): the theme token generator
|
||||
* (packages/styles/src/theme.ts) only emits a real -contrast token for
|
||||
* primary and secondary. info, success, and danger have no contrast
|
||||
* token defined at all, so var(--wire-color-info-contrast) with no
|
||||
* fallback resolves to nothing, and --modal-contrast becomes invalid --
|
||||
* which made confirm-button and solid-panel text unreadable. White is a
|
||||
* safe default against these saturated colors until the theme package
|
||||
* defines real tokens for them.
|
||||
*/
|
||||
.wire-modal[data-color="info"] {
|
||||
--modal-accent: var(--wire-color-info);
|
||||
--modal-soft: var(--wire-color-info-soft);
|
||||
--modal-contrast: var(--wire-color-info-contrast, white);
|
||||
--modal-contrast: var(--wire-color-info-contrast);
|
||||
}
|
||||
|
||||
.wire-modal[data-color="success"] {
|
||||
--modal-accent: var(--wire-color-success);
|
||||
--modal-soft: var(--wire-color-success-soft);
|
||||
--modal-contrast: var(--wire-color-success-contrast, white);
|
||||
--modal-contrast: var(--wire-color-success-contrast);
|
||||
}
|
||||
|
||||
.wire-modal[data-color="warning"] {
|
||||
@@ -331,7 +299,7 @@ component Modal {
|
||||
.wire-modal[data-destructive="true"] {
|
||||
--modal-accent: var(--wire-color-danger);
|
||||
--modal-soft: var(--wire-color-danger-soft);
|
||||
--modal-contrast: var(--wire-color-on-danger, white);
|
||||
--modal-contrast: var(--wire-color-on-danger);
|
||||
}
|
||||
|
||||
.wire-modal__trigger,
|
||||
@@ -353,35 +321,8 @@ component Modal {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 650;
|
||||
cursor: pointer;
|
||||
transition: opacity 150ms ease, transform 150ms ease, box-shadow 150ms ease;
|
||||
}
|
||||
|
||||
.wire-modal__trigger:hover {
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.wire-modal__trigger:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
|
||||
.wire-modal__trigger:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--modal-accent) 40%, transparent);
|
||||
}
|
||||
|
||||
/*
|
||||
* Hidden by default so the SSR-rendered HTML never paints the layer before
|
||||
* hydration runs. data-open on the wire-modal root is evaluated and
|
||||
* serialized to a real true or false string at render time -- a plain
|
||||
* bind, not the raw-expression data-show directive -- so this selector
|
||||
* is correct on first paint with zero flash, with no dependency on
|
||||
* client JS having run yet. The data-show attribute and client directive
|
||||
* still run after hydration to keep things in sync for state changes,
|
||||
* but visibility itself is driven by CSS here. visibility (rather than
|
||||
* display) is used so the open and close transitions below can actually
|
||||
* animate -- a box that starts at display: none has no prior frame to
|
||||
* transition from.
|
||||
*/
|
||||
.wire-modal__layer {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
@@ -390,15 +331,6 @@ component Modal {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 180ms ease, visibility 0s linear 180ms;
|
||||
}
|
||||
|
||||
.wire-modal[data-open="true"] .wire-modal__layer {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: opacity 180ms ease, visibility 0s linear 0s;
|
||||
}
|
||||
|
||||
.wire-modal[data-placement="top"] .wire-modal__layer {
|
||||
@@ -406,12 +338,6 @@ component Modal {
|
||||
padding-top: clamp(1rem, 8vh, 5rem);
|
||||
}
|
||||
|
||||
.wire-modal[data-scroll="page"] .wire-modal__layer {
|
||||
align-items: flex-start;
|
||||
overflow-y: auto;
|
||||
padding: 2.5rem 1rem;
|
||||
}
|
||||
|
||||
.wire-modal__backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
@@ -444,18 +370,6 @@ component Modal {
|
||||
0 1px 0 color-mix(in srgb, white 5%, transparent) inset,
|
||||
0 40px 110px color-mix(in srgb, black 38%, transparent);
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transform: scale(0.96) translateY(10px);
|
||||
transition: opacity 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
.wire-modal[data-open="true"] .wire-modal__panel {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.wire-modal[data-size="xs"] .wire-modal__panel {
|
||||
width: min(19rem, calc(100vw - 2rem));
|
||||
}
|
||||
|
||||
.wire-modal[data-size="sm"] .wire-modal__panel {
|
||||
@@ -476,10 +390,6 @@ component Modal {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.wire-modal[data-scroll="page"] .wire-modal__panel {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.wire-modal[data-variant="soft"] .wire-modal__panel {
|
||||
background:
|
||||
linear-gradient(145deg, var(--modal-soft), transparent 68%),
|
||||
@@ -537,7 +447,6 @@ component Modal {
|
||||
}
|
||||
|
||||
.wire-modal__heading-copy h2 {
|
||||
color: inherit;
|
||||
font-size: 1.08rem;
|
||||
font-weight: 650;
|
||||
line-height: 1.3;
|
||||
@@ -553,100 +462,32 @@ component Modal {
|
||||
color: color-mix(in srgb, currentColor 76%, transparent);
|
||||
}
|
||||
|
||||
/*
|
||||
* padding is reset explicitly: an app-level `button { padding: … }` rule
|
||||
* outranks the browser default, and 1rem of horizontal padding left this
|
||||
* 2.15rem button with a ~2px content box -- which squeezed the icon to
|
||||
* 0.4px wide and read as "the close button has no icon".
|
||||
*/
|
||||
.wire-modal__close {
|
||||
appearance: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
padding: 0;
|
||||
width: 2.15rem;
|
||||
height: 2.15rem;
|
||||
width: 2.35rem;
|
||||
height: 2.35rem;
|
||||
color: var(--wire-color-text-muted);
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
|
||||
}
|
||||
|
||||
/*
|
||||
* On a solid panel the background is the accent color, so the muted-grey
|
||||
* default is close to invisible -- the dismiss affordance reads as
|
||||
* missing rather than subtle. Derive it from the panel contrast color
|
||||
* instead, and give it a faint ring so it is unmistakably a control.
|
||||
*/
|
||||
.wire-modal[data-variant="solid"] .wire-modal__close {
|
||||
color: color-mix(in srgb, currentColor 82%, transparent);
|
||||
border-color: color-mix(in srgb, currentColor 35%, transparent);
|
||||
}
|
||||
|
||||
.wire-modal[data-variant="solid"] .wire-modal__close:hover {
|
||||
color: currentColor;
|
||||
background: color-mix(in srgb, black 18%, transparent);
|
||||
border-color: color-mix(in srgb, currentColor 55%, transparent);
|
||||
}
|
||||
|
||||
.wire-modal__close:hover {
|
||||
color: var(--wire-color-text);
|
||||
background: var(--wire-color-surface-soft);
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: 0.75rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wire-modal__close:hover,
|
||||
.wire-modal__close:focus-visible {
|
||||
color: var(--modal-accent);
|
||||
border-color: color-mix(in srgb, var(--modal-accent) 45%, transparent);
|
||||
border-color: color-mix(in srgb, var(--modal-accent) 34%, var(--wire-color-border));
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.wire-modal__close:active {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
/* Never let the glyph be shrunk by the flex container. */
|
||||
.wire-modal__close svg {
|
||||
flex: 0 0 auto;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Slot content is authored by the host app, so the app global stylesheet
|
||||
* styles it too. A bare element selector there (p { color: ... }) beats
|
||||
* anything the panel merely *inherits*, which is how solid-variant modals
|
||||
* ended up with muted grey body copy on a saturated accent background --
|
||||
* unreadable, and worst exactly where contrast matters most (the
|
||||
* destructive confirm). Setting the color on the body makes the panel
|
||||
* choice explicit instead of leaving it to inheritance.
|
||||
*
|
||||
* NOTE: apostrophes are avoided in .wrn style comments on purpose -- the
|
||||
* block scanner treats a quote as a string delimiter while it counts
|
||||
* braces, so a stray one breaks parsing of the whole component.
|
||||
*/
|
||||
.wire-modal__body {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
padding: 1.4rem;
|
||||
color: var(--wire-color-text);
|
||||
}
|
||||
|
||||
/*
|
||||
* :where() keeps this at the specificity of .wire-modal__body alone, so it
|
||||
* outranks a global element selector but still yields to any class the app
|
||||
* puts on its own slot content (an error message, a muted caption). A
|
||||
* plain .wire-modal__body p list would have quietly overridden those.
|
||||
*/
|
||||
.wire-modal__body :where(p, li, dd, dt, h1, h2, h3, h4, h5, h6, span, label, code) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.wire-modal[data-variant="solid"] .wire-modal__body {
|
||||
color: var(--modal-contrast);
|
||||
}
|
||||
|
||||
.wire-modal[data-scrollable="true"] .wire-modal__body {
|
||||
@@ -707,18 +548,6 @@ component Modal {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
/*
|
||||
* On a solid-variant panel the panel background is also --modal-accent,
|
||||
* so a plain primary button (same color) has no visible edge against it.
|
||||
* Darken the fill slightly and add a light border so the button still
|
||||
* reads as a distinct, clickable pill instead of blending into the panel.
|
||||
*/
|
||||
.wire-modal[data-variant="solid"] .wire-modal__button--primary {
|
||||
background: color-mix(in srgb, black 18%, var(--modal-accent));
|
||||
border-color: color-mix(in srgb, white 32%, transparent);
|
||||
box-shadow: 0 1px 0 color-mix(in srgb, white 12%, transparent) inset;
|
||||
}
|
||||
|
||||
.wire-modal__button:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
@@ -746,7 +575,6 @@ component Modal {
|
||||
}
|
||||
|
||||
.wire-modal__panel,
|
||||
.wire-modal[data-size="xs"] .wire-modal__panel,
|
||||
.wire-modal[data-size="sm"] .wire-modal__panel,
|
||||
.wire-modal[data-size="lg"] .wire-modal__panel,
|
||||
.wire-modal[data-size="xl"] .wire-modal__panel {
|
||||
@@ -771,17 +599,10 @@ component Modal {
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.wire-modal__button,
|
||||
.wire-modal__spinner,
|
||||
.wire-modal__layer,
|
||||
.wire-modal__panel,
|
||||
.wire-modal__close {
|
||||
.wire-modal__spinner {
|
||||
animation: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.wire-modal__panel {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -123,13 +123,12 @@ component Popover {
|
||||
|
||||
<section
|
||||
class="wire-popover__panel"
|
||||
data-wrn-anchored="true"
|
||||
data-show='{open || visible}'
|
||||
role="dialog"
|
||||
aria-label='{title || triggerLabel}'
|
||||
>
|
||||
{#if showArrow}
|
||||
<span class="wire-popover__arrow" data-wrn-anchor-arrow="true" aria-hidden="true"></span>
|
||||
<span class="wire-popover__arrow" aria-hidden="true"></span>
|
||||
{/if}
|
||||
|
||||
{#if title || description || icon || showClose}
|
||||
@@ -472,13 +471,7 @@ component Popover {
|
||||
color: color-mix(in srgb, currentColor 76%, transparent);
|
||||
}
|
||||
|
||||
/*
|
||||
* padding is reset explicitly: an app-level `button { padding: ... }` rule
|
||||
* outranks the browser default and crushes the icon inside this
|
||||
* fixed-size button. Same trap as Modal and Drawer.
|
||||
*/
|
||||
.wire-popover__close {
|
||||
padding: 0;
|
||||
appearance: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
component Table {
|
||||
outputs {
|
||||
sort(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
|
||||
select(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
|
||||
rowClick(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
|
||||
}
|
||||
|
||||
props {
|
||||
size: string = "default"
|
||||
color: string = "primary"
|
||||
caption: string = "Table"
|
||||
columns: unknown[] = []
|
||||
rows: unknown[] = []
|
||||
striped: boolean = true
|
||||
class: string = ""
|
||||
}
|
||||
view {
|
||||
<div class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--table {class}"><table><caption>{caption}</caption><thead><tr>{#each columns as column}<th>{column.label}</th>{/each}</tr></thead><tbody>{#each rows as row}<tr>{#each columns as column}<td>{row[column.key]}</td>{/each}</tr>{/each}</tbody></table><slot /></div>
|
||||
}
|
||||
}
|
||||
@@ -97,12 +97,11 @@ id: string = ""
|
||||
<span
|
||||
id='{id}'
|
||||
class="wire-tooltip__content"
|
||||
data-wrn-anchored="true"
|
||||
data-show='{open || visible}'
|
||||
role="tooltip"
|
||||
>
|
||||
{#if showArrow}
|
||||
<span class="wire-tooltip__arrow" data-wrn-anchor-arrow="true" aria-hidden="true"></span>
|
||||
<span class="wire-tooltip__arrow" aria-hidden="true"></span>
|
||||
{/if}
|
||||
|
||||
{#if title}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/ui",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "@wrnexus/ui — part of the WrNexus framework.",
|
||||
"license": "MIT",
|
||||
@@ -35,10 +35,6 @@
|
||||
"types": "./dist/index.d.ts",
|
||||
"import": "./dist/index.js"
|
||||
},
|
||||
"./registry": {
|
||||
"types": "./dist/registry.d.ts",
|
||||
"import": "./dist/registry.js"
|
||||
},
|
||||
"./components/*": "./components/*",
|
||||
"./component-catalog.json": "./component-catalog.json",
|
||||
"./component-migrations.json": "./component-migrations.json",
|
||||
@@ -46,7 +42,7 @@
|
||||
"./ui.css": "./ui.css"
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.5"
|
||||
"@wrnexus/core": "^0.8.4"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
|
||||
@@ -8037,6 +8037,28 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wire-next--table {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
border: 1px solid var(--wire-color-border);
|
||||
border-radius: var(--wire-radius-md);
|
||||
}
|
||||
.wire-next--table table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.wire-next--table caption,
|
||||
.wire-next--table th,
|
||||
.wire-next--table td {
|
||||
padding: 0.75rem;
|
||||
border-bottom: 1px solid var(--wire-color-border);
|
||||
text-align: left;
|
||||
}
|
||||
.wire-next--table caption,
|
||||
.wire-next--table th {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@keyframes wire-shimmer {
|
||||
to {
|
||||
background-position: -200% 0;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/uploader",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "Secure upload drivers, policies, client runtime, helper functions, and reusable upload components.",
|
||||
"license": "MIT",
|
||||
@@ -42,9 +42,9 @@
|
||||
"./components/*": "./components/*"
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.5",
|
||||
"@wrnexus/plugin": "^0.8.5",
|
||||
"@wrnexus/ui": "^0.8.5"
|
||||
"@wrnexus/core": "^0.8.4",
|
||||
"@wrnexus/plugin": "^0.8.4",
|
||||
"@wrnexus/ui": "^0.8.4"
|
||||
},
|
||||
"wrnexus": {
|
||||
"plugin": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@wrnexus/validation",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"type": "module",
|
||||
"description": "Shared server/browser schemas, validation helpers, form runtime, and reusable error components.",
|
||||
"license": "MIT",
|
||||
@@ -42,9 +42,9 @@
|
||||
"./components/*": "./components/*"
|
||||
},
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "^0.8.5",
|
||||
"@wrnexus/plugin": "^0.8.5",
|
||||
"@wrnexus/ui": "^0.8.5"
|
||||
"@wrnexus/core": "^0.8.4",
|
||||
"@wrnexus/plugin": "^0.8.4",
|
||||
"@wrnexus/ui": "^0.8.4"
|
||||
},
|
||||
"wrnexus": {
|
||||
"plugin": {
|
||||
|
||||
@@ -107,11 +107,11 @@
|
||||
},
|
||||
"packages/ai": {
|
||||
"name": "@wrnexus/ai",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
},
|
||||
"packages/auth": {
|
||||
"name": "@wrnexus/auth",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/authz": "workspace:*",
|
||||
"@wrnexus/captcha": "workspace:*",
|
||||
@@ -133,7 +133,7 @@
|
||||
},
|
||||
"packages/authz": {
|
||||
"name": "@wrnexus/authz",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
"@wrnexus/db": "workspace:*",
|
||||
@@ -141,18 +141,18 @@
|
||||
},
|
||||
"packages/benchmark": {
|
||||
"name": "@wrnexus/benchmark",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
},
|
||||
"packages/cache": {
|
||||
"name": "@wrnexus/cache",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
},
|
||||
},
|
||||
"packages/captcha": {
|
||||
"name": "@wrnexus/captcha",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
"@wrnexus/plugin": "workspace:*",
|
||||
@@ -167,7 +167,7 @@
|
||||
},
|
||||
"packages/cli": {
|
||||
"name": "@wrnexus/cli",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"bin": {
|
||||
"wrnexus": "src/index.ts",
|
||||
},
|
||||
@@ -194,7 +194,7 @@
|
||||
},
|
||||
"packages/compiler": {
|
||||
"name": "@wrnexus/compiler",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/csr": "workspace:*",
|
||||
"@wrnexus/store": "workspace:*",
|
||||
@@ -204,7 +204,7 @@
|
||||
},
|
||||
"packages/content": {
|
||||
"name": "@wrnexus/content",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"devDependencies": {
|
||||
"@types/bun": "^1.3.14",
|
||||
"typescript": "^5.9.2",
|
||||
@@ -212,18 +212,18 @@
|
||||
},
|
||||
"packages/core": {
|
||||
"name": "@wrnexus/core",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
},
|
||||
"packages/csr": {
|
||||
"name": "@wrnexus/csr",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
},
|
||||
},
|
||||
"packages/db": {
|
||||
"name": "@wrnexus/db",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"devDependencies": {
|
||||
"@types/bun": "^1.3.14",
|
||||
"typescript": "^5.9.2",
|
||||
@@ -231,7 +231,7 @@
|
||||
},
|
||||
"packages/dev-server": {
|
||||
"name": "@wrnexus/dev-server",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/authz": "workspace:*",
|
||||
"@wrnexus/cache": "workspace:*",
|
||||
@@ -258,7 +258,7 @@
|
||||
},
|
||||
"packages/dev-toolbar": {
|
||||
"name": "@wrnexus/dev-toolbar",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"devDependencies": {
|
||||
"@types/bun": "^1.3.14",
|
||||
"typescript": "^5.9.2",
|
||||
@@ -266,7 +266,7 @@
|
||||
},
|
||||
"packages/encryption": {
|
||||
"name": "@wrnexus/encryption",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
},
|
||||
@@ -277,21 +277,21 @@
|
||||
},
|
||||
"packages/graphql": {
|
||||
"name": "@wrnexus/graphql",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/plugin": "workspace:*",
|
||||
},
|
||||
},
|
||||
"packages/helpers": {
|
||||
"name": "@wrnexus/helpers",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
},
|
||||
},
|
||||
"packages/i18n": {
|
||||
"name": "@wrnexus/i18n",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
"@wrnexus/plugin": "workspace:*",
|
||||
@@ -305,7 +305,7 @@
|
||||
},
|
||||
"packages/identity": {
|
||||
"name": "@wrnexus/identity",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/auth": "workspace:*",
|
||||
"@wrnexus/authz": "workspace:*",
|
||||
@@ -314,7 +314,7 @@
|
||||
},
|
||||
"packages/image": {
|
||||
"name": "@wrnexus/image",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/plugin": "workspace:*",
|
||||
"@wrnexus/security": "workspace:*",
|
||||
@@ -334,7 +334,7 @@
|
||||
},
|
||||
"packages/jwt": {
|
||||
"name": "@wrnexus/jwt",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
},
|
||||
@@ -345,7 +345,7 @@
|
||||
},
|
||||
"packages/language-server": {
|
||||
"name": "@wrnexus/language-server",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"bin": {
|
||||
"wrnexus-language-server": "src/server.ts",
|
||||
},
|
||||
@@ -356,39 +356,39 @@
|
||||
},
|
||||
"packages/mcp": {
|
||||
"name": "@wrnexus/mcp",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"bin": {
|
||||
"wrnexus-mcp": "src/stdio.ts",
|
||||
},
|
||||
},
|
||||
"packages/mobile": {
|
||||
"name": "@wrnexus/mobile",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/native": "workspace:*",
|
||||
},
|
||||
},
|
||||
"packages/native": {
|
||||
"name": "@wrnexus/native",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
},
|
||||
"packages/oauth": {
|
||||
"name": "@wrnexus/oauth",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/jwt": "workspace:*",
|
||||
},
|
||||
},
|
||||
"packages/observability": {
|
||||
"name": "@wrnexus/observability",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
},
|
||||
},
|
||||
"packages/playground": {
|
||||
"name": "@wrnexus/playground",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/compiler": "workspace:*",
|
||||
"@wrnexus/syntax": "workspace:*",
|
||||
@@ -396,18 +396,18 @@
|
||||
},
|
||||
"packages/plugin": {
|
||||
"name": "@wrnexus/plugin",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/syntax": "workspace:*",
|
||||
},
|
||||
},
|
||||
"packages/pubsub": {
|
||||
"name": "@wrnexus/pubsub",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
},
|
||||
"packages/pwa": {
|
||||
"name": "@wrnexus/pwa",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"devDependencies": {
|
||||
"@types/bun": "^1.3.14",
|
||||
"typescript": "^5.9.2",
|
||||
@@ -415,18 +415,18 @@
|
||||
},
|
||||
"packages/queue": {
|
||||
"name": "@wrnexus/queue",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
},
|
||||
},
|
||||
"packages/reactive": {
|
||||
"name": "@wrnexus/reactive",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
},
|
||||
"packages/realtime": {
|
||||
"name": "@wrnexus/realtime",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
"@wrnexus/plugin": "workspace:*",
|
||||
@@ -440,7 +440,7 @@
|
||||
},
|
||||
"packages/router": {
|
||||
"name": "@wrnexus/router",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/compiler": "workspace:*",
|
||||
"@wrnexus/core": "workspace:*",
|
||||
@@ -448,7 +448,7 @@
|
||||
},
|
||||
"packages/rpc": {
|
||||
"name": "@wrnexus/rpc",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/authz": "workspace:*",
|
||||
"@wrnexus/core": "workspace:*",
|
||||
@@ -463,14 +463,14 @@
|
||||
},
|
||||
"packages/security": {
|
||||
"name": "@wrnexus/security",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
},
|
||||
},
|
||||
"packages/ssr": {
|
||||
"name": "@wrnexus/ssr",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
"@wrnexus/security": "workspace:*",
|
||||
@@ -479,11 +479,11 @@
|
||||
},
|
||||
"packages/store": {
|
||||
"name": "@wrnexus/store",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
},
|
||||
"packages/styles": {
|
||||
"name": "@wrnexus/styles",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
"@wrnexus/plugin": "workspace:*",
|
||||
@@ -492,19 +492,19 @@
|
||||
},
|
||||
"packages/syntax": {
|
||||
"name": "@wrnexus/syntax",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
},
|
||||
"packages/test": {
|
||||
"name": "@wrnexus/test",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
},
|
||||
"packages/tracking": {
|
||||
"name": "@wrnexus/tracking",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
},
|
||||
"packages/typecheck": {
|
||||
"name": "@wrnexus/typecheck",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/syntax": "workspace:*",
|
||||
"typescript": "^5.5.0",
|
||||
@@ -512,14 +512,14 @@
|
||||
},
|
||||
"packages/ui": {
|
||||
"name": "@wrnexus/ui",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
},
|
||||
},
|
||||
"packages/uploader": {
|
||||
"name": "@wrnexus/uploader",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
"@wrnexus/plugin": "workspace:*",
|
||||
@@ -533,7 +533,7 @@
|
||||
},
|
||||
"packages/validation": {
|
||||
"name": "@wrnexus/validation",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"dependencies": {
|
||||
"@wrnexus/core": "workspace:*",
|
||||
"@wrnexus/plugin": "workspace:*",
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,184 +0,0 @@
|
||||
# Navigation component group — design
|
||||
|
||||
Date: 2026-08-07
|
||||
Status: approved, not yet implemented
|
||||
|
||||
## Problem
|
||||
|
||||
The navigation group has nine components. Five of them — Nav, MegaMenu,
|
||||
Scrollspy, Pagination, Stepper — are byte-identical scaffold stubs that differ
|
||||
only in one CSS class name. Each renders `{#each items}<a href>{label}</a>{/each}`
|
||||
and nothing else. MegaMenu has no panel, Scrollspy never observes scroll,
|
||||
Stepper has no steps or progress, Pagination has no pages.
|
||||
|
||||
Of the remaining four, Breadcrumb is genuinely built (323 lines, own style
|
||||
block). Navbar and Sidebar render but have no keyboard handling and keep their
|
||||
styles in `ui.css`. Tabs works but is off-pattern in three ways: it is the only
|
||||
component in the library using Tailwind utility classes rather than `wire-*` +
|
||||
a local style block, it has no `outputs` block and fires raw `CustomEvent`s via
|
||||
`dispatchEvent`, and it sets a roving `tabindex` with no `@keydown` handler at
|
||||
all — which is worse than having no keyboard support, because the roving
|
||||
tabindex makes every inactive tab unreachable by Tab while arrows do nothing.
|
||||
|
||||
## Scope
|
||||
|
||||
All nine components, delivered in three phases.
|
||||
|
||||
## Decisions
|
||||
|
||||
### Styling
|
||||
|
||||
Every navigation component gets a local `style {}` block using `wire-*`
|
||||
classes. This matches DataTable, Toaster, Modal, Drawer, ContextMenu and
|
||||
Breadcrumb — the 22 of 108 components that carry local styles are exactly the
|
||||
recently built ones. Navbar and Sidebar styles move out of `ui.css` as part of
|
||||
this work.
|
||||
|
||||
### Dropdowns: Nav vs MegaMenu
|
||||
|
||||
Both get dropdowns, of deliberately different kinds.
|
||||
|
||||
- **Nav** gets multi-level cascading submenus. It is the link bar, so nested
|
||||
submenus are its job.
|
||||
- **MegaMenu** gets a single-level rich panel: columns of grouped links with
|
||||
headings, descriptions and icons. This is deliberate, not a shortcut. A mega
|
||||
menu exists to show breadth flat so everything is one click away; nesting
|
||||
inside the panel buries content behind hover-within-hover and is close to
|
||||
unusable by keyboard and touch.
|
||||
|
||||
Neither reuses the existing Dropdown component: Dropdown is click-triggered and
|
||||
has no nesting support.
|
||||
|
||||
**Depth limit.** There is no recursive-component precedent in this library, so
|
||||
multi-level means fixed depth via nested `{#each}` loops — the pattern Navbar
|
||||
(4 loops) and Sidebar (2 loops) already use. Depth is **3 levels**. Unlimited
|
||||
nesting would require proving out component self-reference, which is out of
|
||||
scope here.
|
||||
|
||||
### Roving focus lives in the runtime
|
||||
|
||||
Arrow-key roving focus is identical logic for Tabs, Nav, MegaMenu, Sidebar and
|
||||
Stepper. It goes in the reactive runtime as a declarative attribute rather than
|
||||
five near-identical client functions:
|
||||
|
||||
- `data-wrn-roving="horizontal|vertical|both"` on the container
|
||||
- `[data-wrn-roving-item]` on each focusable child
|
||||
|
||||
The runtime owns arrow keys, Home/End, wrap-around, skip-disabled, and
|
||||
maintenance of the roving `tabindex`. Components declare intent only.
|
||||
|
||||
This follows the modal-dialog focus work already in the runtime, and for the
|
||||
same reason: a client function cannot hold focus state across callbacks,
|
||||
because state written after the function returns is dropped.
|
||||
|
||||
### Scrollspy needs runtime support too
|
||||
|
||||
`data-wrn-scrollspy` backed by `IntersectionObserver`. It cannot be a client
|
||||
function — the observer callback fires long after the function returns, and
|
||||
that state write would be lost.
|
||||
|
||||
### Runtime budget
|
||||
|
||||
Roving focus is roughly 3–4k, scrollspy roughly 1.5k. The runtime is at 167k
|
||||
against the 175k ceiling raised on 2026-08-07. This fits, but leaves little
|
||||
room. The group after this one forces the decision about splitting the runtime
|
||||
into loadable chunks so pages pay only for behaviour they use.
|
||||
|
||||
### Tabs URL mode
|
||||
|
||||
`mode="client" | "url"`. URL mode uses a query parameter (`?tab=value`) driven
|
||||
by `history.pushState`, so content swaps with no page load and the back button
|
||||
works.
|
||||
|
||||
Query parameter rather than hash: it is shareable, survives reload, and does
|
||||
not collide with in-page anchors or with Scrollspy, which wants the hash.
|
||||
|
||||
Tabs also gets a panel transition on change.
|
||||
|
||||
### Sidebar composes Drawer
|
||||
|
||||
Sidebar does not reimplement off-canvas behaviour. Desktop renders a static
|
||||
rail; mobile renders inside Drawer. This inherits Drawer's focus trap and
|
||||
scroll lock rather than duplicating them.
|
||||
|
||||
### Cross-cutting requirements
|
||||
|
||||
- Icons on every menu item, tab, and step
|
||||
- Dropdown arrows that animate on open
|
||||
- Responsive behaviour per component: Nav collapses to a toggle, MegaMenu
|
||||
stacks its panel, Tabs becomes a scrollable strip, Stepper goes vertical,
|
||||
Pagination goes compact
|
||||
- Full ARIA Authoring Practices patterns for each role, including correct
|
||||
`aria-current` / `aria-selected` / `aria-expanded`
|
||||
|
||||
## Components
|
||||
|
||||
| Component | Work |
|
||||
| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| Nav | Build. Flat or multi-level (3 deep), horizontal/vertical, `items[{label,href,value,icon,badge,disabled,items}]`, `aria-current="page"`, roving focus, animated arrows, collapses on mobile. `outputs: select` |
|
||||
| Tabs | Rewrite off Tailwind onto `wire-*` + local styles. Real `outputs {change, select}` replacing raw `dispatchEvent`. Roving + Home/End. `mode="client"\|"url"`. Panel transition. Fix the `<slot>` that renders regardless of active tab |
|
||||
| Pagination | Build standalone. `page`/`pageSize`/`total`, compact + numbered styles, windowed page numbers. `outputs: change, previous, next` |
|
||||
| Stepper | Build. `<ol>`/`<li>`, status derived from `active` index, horizontal/vertical, optionally clickable, `aria-current="step"`. Indexed named slots (`data-slot="step-0"`, `step-1`, …) for custom per-step content, falling back to built-in rendering |
|
||||
| MegaMenu | Build. Trigger plus a single-level panel of link columns. Panel marked `data-wrn-anchored` so the existing clamp handles viewport containment. Hover and focus open, Escape closes, click-outside closes |
|
||||
| Scrollspy | Build. Observes section ids, moves `aria-current` to the matching link |
|
||||
| Navbar | Audit. Styles move to a local block, roving focus on the link group, keyboard for the mobile toggle |
|
||||
| Sidebar | Audit and extend. Local styles, composes Drawer for mobile, single items / labelled groups / multi-level (3 deep), vertical roving |
|
||||
| Breadcrumb | Audit only — already the strongest of the nine |
|
||||
|
||||
Component count stays at 108; all nine files already exist.
|
||||
|
||||
## Data flow
|
||||
|
||||
Props in, outputs out, no global state. Every component takes its data as props
|
||||
and reports interaction through declared `outputs`.
|
||||
|
||||
## Error handling
|
||||
|
||||
`items` arrives as an HTML attribute and is frequently a JSON string, so:
|
||||
|
||||
- A non-array `items` renders empty rather than throwing
|
||||
- Out-of-range `active` / `page` clamps to bounds
|
||||
|
||||
## Testing
|
||||
|
||||
- Per-component entries in `packages/ui/test/ui.test.ts` covering names,
|
||||
declared outputs and props
|
||||
- Showcase profiles for each so every component gets live demos
|
||||
- Regenerate component reference, catalog, showcase, and the UI visual contract
|
||||
- Each phase ends with `bun run check:production` green
|
||||
|
||||
## Phases
|
||||
|
||||
Each phase ends green, committed and pushed.
|
||||
|
||||
1. **Runtime and primitives** — roving-focus runtime, Nav, Pagination, Stepper
|
||||
2. **Composed** — Tabs (rewrite, URL sync, animation), Sidebar (on Drawer),
|
||||
MegaMenu
|
||||
3. **Audit and polish** — Navbar, Breadcrumb, Scrollspy, responsive pass,
|
||||
showcase generation
|
||||
|
||||
## Risks
|
||||
|
||||
- **Scrollspy and MegaMenu** are the only two needing new runtime behaviour.
|
||||
MegaMenu leans on the anchored clamp, which could not be verified
|
||||
interactively on 2026-08-07 because the browser pane was degraded
|
||||
(screenshots timing out, `scrollIntoView` inert). Verify the pane works
|
||||
before starting phase 2.
|
||||
- **Tabs is a breaking change.** Replacing raw `CustomEvent`s with declared
|
||||
outputs changes its public contract; anything listening for the old events
|
||||
breaks. 0.8.5 shipped on 2026-08-07, so this needs a migration entry in
|
||||
`packages/cli/src/update.ts`.
|
||||
|
||||
## Codebase constraints to respect
|
||||
|
||||
Hazards this codebase has already hit:
|
||||
|
||||
- No apostrophes in `.wrn` comments — the brace scanner breaks on them
|
||||
- `/* */` only inside style blocks; `//` is not a CSS comment and silently eats
|
||||
the following rule
|
||||
- No deferred state writes in client functions; state written after the
|
||||
function returns is dropped
|
||||
- Never call a peer function after an application callback — the wrapper
|
||||
flushes the entry-time snapshot
|
||||
- No boolean attributes bound to loop variables
|
||||
- Package components need explicit imports
|
||||
@@ -13,7 +13,7 @@
|
||||
"packages/ui/components/BackToTop.wrn": "b12c56ec8b7aabad68cbdc47f4b3237e2c21a61398f0aa51f9add6229b7357cd",
|
||||
"packages/ui/components/Badge.wrn": "6b55b4d85100d605cf168857aec1dc57da62c1f6a0a5cd6dd877023f24b189cc",
|
||||
"packages/ui/components/Blockquote.wrn": "6016dd4450de7cbf5c3cb413599baa2e502321e8eedef54439a0df6d0aae8bcb",
|
||||
"packages/ui/components/Breadcrumb.wrn": "df27101d41cf018d55b6909e0399286a4661637140e341c8624615051d485142",
|
||||
"packages/ui/components/Breadcrumb.wrn": "8bf6239b95b382ce68f8411aac0d364f67a1c278dfbbf08f1501cd0482751e30",
|
||||
"packages/ui/components/ButtonGroup.wrn": "0d97fbeed531d1d8ef4b59531923b47b34100d0de71d7bf524b02c668920b3d8",
|
||||
"packages/ui/components/CTASection.wrn": "2d2241d4f1018cfd2f8ea1ddd5fa8c8fcb8d1bbb2d4e4498cb9f39ff47a3801c",
|
||||
"packages/ui/components/Card.wrn": "4370df341235819b8a968a3f812209c2e6c29e4471d06578aaa5b577fb6e2dc8",
|
||||
@@ -61,14 +61,14 @@
|
||||
"packages/ui/components/Map.wrn": "7b8a0d5412a464fd7cab8977d816542c506d8c5dab8230a3c984c2caee407c91",
|
||||
"packages/ui/components/MarketingSectionHeader.wrn": "7d6ffcc01a9331474475ea57ca58598be757abd9428b66bdfaf6f3603c5b145b",
|
||||
"packages/ui/components/Marquee.wrn": "b2b35eedf3297ba12ab3776385a9f3eab001027648d87a2a1968f576eee6c025",
|
||||
"packages/ui/components/MegaMenu.wrn": "48f4ced485df0e8de5217630c8bdcec0b2317bf04e6b279399f2c93d98d56995",
|
||||
"packages/ui/components/MegaMenu.wrn": "4a084eaf6aae77bb9023d2f3589bc6b80119b9be63982a90a80f9d280cc9c0a5",
|
||||
"packages/ui/components/MetricCard.wrn": "6451182739298691908f68258c0250cce2a78b0dc27c97115579ece30d7d9f92",
|
||||
"packages/ui/components/MetricGrid.wrn": "6018a98c10628ed240ed236ed916c0ff60994d192c3aadafd10bc876be0f9364",
|
||||
"packages/ui/components/Modal.wrn": "59d4ae9d6dd2700692d9edecfe53ee868e9f864363a4885961d1813cb2bee51f",
|
||||
"packages/ui/components/Nav.wrn": "7dc456b879e9248bde267b986cdcb138b8f3127d98b51e27bc9708129953f5e2",
|
||||
"packages/ui/components/Navbar.wrn": "7989d25819312014c0a0855370b80b925d53ff735d682fdb61e9677a9dacb7f3",
|
||||
"packages/ui/components/Nav.wrn": "78f215c94caf68e0968449a23e23bd3409a689e0c52a6c1770aa8373c767d080",
|
||||
"packages/ui/components/Navbar.wrn": "e68f9d3643e500e43124e9c7a6d4c7f6722657377ea7313f3e3cf5093a81b360",
|
||||
"packages/ui/components/PageHeader.wrn": "0761235a4924eec09877be40b292d27b70db22d210be7d8e989493165c20df86",
|
||||
"packages/ui/components/Pagination.wrn": "9ceb74745b159150b015bbbb1974c68e14a7d4b92bd03491cb23b8855aa07983",
|
||||
"packages/ui/components/Pagination.wrn": "9169e724f89992dacd10e9492a95438c8016affb39c0fd17a4f6fe26bd21d8b4",
|
||||
"packages/ui/components/PinInput.wrn": "5196f584de8d548a5dfa03688c3c95da3c948cead2662b05e927386ccea74299",
|
||||
"packages/ui/components/Popover.wrn": "167f6c476cf3114ac5062ecf7739bddd9b5a81b1d209396a3675067dad1577b2",
|
||||
"packages/ui/components/PortalDashboard.wrn": "037d4300b59c7d60543abc7d4aba5c738efc143e9b61abc48aad0ddfcfe6845b",
|
||||
@@ -77,19 +77,19 @@
|
||||
"packages/ui/components/Radio.wrn": "0b2d38a5aee3e859280e4590fa1d509d789cc2239082054872fa342817735f1b",
|
||||
"packages/ui/components/RangeSlider.wrn": "21eb7a5df0ee2cb5e78f628eb920265998eb9f1a4933d4e5c57db0323fd66b41",
|
||||
"packages/ui/components/Rating.wrn": "a2d74dc748fc7d98892684c760518b87fa65411b1102e3611252b87245b3ffcb",
|
||||
"packages/ui/components/Scrollspy.wrn": "76d1c17580c8d460f1222ce97585bdcac9779141f2f30d5460c84ff9f75413d8",
|
||||
"packages/ui/components/Scrollspy.wrn": "bbe0788f63c2bc8850649c1dee78391d485a1c93876015bc536d838273d5fae4",
|
||||
"packages/ui/components/SearchBox.wrn": "315f54f1feaaa47a815d1e2d7a35b492f09fbfadfc6d37228e1009e19e0652ad",
|
||||
"packages/ui/components/Section.wrn": "21485de07d8bb986837a65c61c5dd01ba6c2f3d4e37d58c154a584c7b58de0ed",
|
||||
"packages/ui/components/SectionHeader.wrn": "512cb96636ee1f0540a0f4b4c75603fc0fe7536e7ed7ed7dc82173a16f48a4d3",
|
||||
"packages/ui/components/Select.wrn": "7f046bb11b7c2470dae26d91a4b2261c66a40ae054d0e04c69b6748912d1e204",
|
||||
"packages/ui/components/Sidebar.wrn": "03f1bbce75ca6d50ed940e62df39c539610e89eadd2064fe24abc7d5470f98bf",
|
||||
"packages/ui/components/Sidebar.wrn": "05f4bd216ae8bfcee2460fe638e431174d5f3c8e10003f346644e5a2939e7ce5",
|
||||
"packages/ui/components/SplitHero.wrn": "70e843565ff869bcf413b11b6d9830b2e2bd229863a00904596f71e2dff0e76d",
|
||||
"packages/ui/components/StatsBar.wrn": "c7d1df3895f25b6d3a2e1012a18b97592c7f33e65418b880d486f20c2d490686",
|
||||
"packages/ui/components/Stepper.wrn": "09f216a44f888421091bd1bce760a076927500a573550d5b2b10c4f27f608e92",
|
||||
"packages/ui/components/Stepper.wrn": "4fec0c91a9006319ec27f3198d1176acdfd93abf62d76159aa55c0879bb081d9",
|
||||
"packages/ui/components/StrongPassword.wrn": "c7c5ef26ece6170dd7db9882f0dc98cb2e4607f1e5d43eb3fd39e5d15bbd3a2e",
|
||||
"packages/ui/components/StyledIcon.wrn": "4a4504e357dee9dd0418edbe85fc90b824ccdb3752123a2125da95b77bf0b336",
|
||||
"packages/ui/components/Switch.wrn": "ccb74599fab72b0d68b09a7f1f90b7732cb2f9cbed67a84219e897575ce30c28",
|
||||
"packages/ui/components/Tabs.wrn": "4fa0c0854700532960043290700d7cf99663ec41692068101f0aae4c2b1a1181",
|
||||
"packages/ui/components/Tabs.wrn": "8a1b98c7395b27b09f16f0ebdc14d3d84473b06023ec2b3ed0af495cc2f076bb",
|
||||
"packages/ui/components/TextLink.wrn": "30782039293eb36d63b7b3a4f32a71a47177a3a68c7e90184be7cf7b4385eb19",
|
||||
"packages/ui/components/Textarea.wrn": "ddf0b4f124b2cf0c0ab3d820d3ac0085f7c20466e977231949be264cd0cee8cf",
|
||||
"packages/ui/components/TimePicker.wrn": "2e8e7a90f6b6069a07e7ffd2725ba1e1031e84d55a4f1254025befbb314fa695",
|
||||
@@ -110,6 +110,6 @@
|
||||
"packages/ui/components/progress.wrn": "ba6f4dfcc00f04f34e9533be675bb4a6200c3cdcd7d03fc597377e48520fdec7",
|
||||
"packages/ui/components/skeleton.wrn": "ceec8af147b8be08155500e378393ac7c72d819da61b62191c076c80e943d5a9",
|
||||
"packages/ui/components/spinner.wrn": "abc4ee3ede2e019289257e9009eee012c880a85839cc220fac6dbe1b780caf52",
|
||||
"packages/ui/ui.css": "f71641efb0c98b673af70c10dbcea8e693de258ce8620b4f84c64553ea70204e"
|
||||
"packages/ui/ui.css": "eee7da4d1088703a61db8e78c43eb6ff7f1b6a02fd8082d8d722beb65bf78382"
|
||||
}
|
||||
}
|
||||
|
||||
Generated
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "wrnexus",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "wrnexus",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"license": "SEE LICENSE IN LICENSE",
|
||||
"dependencies": {
|
||||
"vscode-languageclient": "^10.1.0"
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
"name": "wrnexus",
|
||||
"displayName": "WRNexus Language Support",
|
||||
"description": "Complete WRNexus v0.8.3 language support for typed imports, props, state, outputs, runtime functions, stores, diagnostics, formatting, navigation, and migration assistance.",
|
||||
"version": "0.8.5",
|
||||
"version": "0.8.4",
|
||||
"publisher": "wrnexus",
|
||||
"private": true,
|
||||
"license": "SEE LICENSE IN LICENSE",
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// WRN editor extension source hash: 6afaf7958331407986761b491ad81d56458dcb162f56369a4cc29f86ff95d981
|
||||
// WRN editor extension source hash: 174fee91d6ec09c86f71f1204aeb46a20e5a563cc8af1484051d68dde01c8e10
|
||||
// WRN editor extension generator hash: 456d1d614e44e5fb1f19b784176c09cf2ade9b64ef73a17934c2698150b62728
|
||||
"use strict";
|
||||
var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
#!/usr/bin/env node
|
||||
// WRN editor language server source hash: c4362f7edf117e0c403c9bce9435bc02ae0febd963edb4af9a18d2d74d87eb47
|
||||
// WRN editor language server source hash: de46b5767d808fb99bb470ac9ccd0bc9504aa9ab40f0cf8ad9ec4e945303200d
|
||||
// WRN editor language server generator hash: f593a44aaf05495b789ce7a3086bee1eebb951b884d41c0e017bbcfe5f547e72
|
||||
// @bun @bun-cjs
|
||||
(function(exports, require, module, __filename, __dirname) {var __create = Object.create;
|
||||
|
||||
@@ -268,7 +268,7 @@ page AccordionDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>17 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-accordion-size"><span><strong>size</strong><small>string</small></span><select id="playground-accordion-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-accordion-color"><span><strong>color</strong><small>string</small></span><select id="playground-accordion-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-accordion-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-accordion-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-accordion-class"><span><strong>class</strong><small>string</small></span><input id="playground-accordion-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label><label class="playground-field" for="playground-accordion-id"><span><strong>id</strong><small>string</small></span><input id="playground-accordion-id" name="pg_id" type="text" value="accordion" /></label><label class="playground-field" for="playground-accordion-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-accordion-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "accordion-0-1",
|
||||
"key": "accordion-0-1",
|
||||
"value": "primary",
|
||||
@@ -297,31 +297,31 @@ page AccordionDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "accordion-0-2",
|
||||
"key": "accordion-0-2",
|
||||
"value": "secondary",
|
||||
@@ -350,32 +350,32 @@ page AccordionDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-accordion-defaultOpen"><span><strong>default Open</strong><small>unknown[]</small></span><textarea id="playground-accordion-defaultOpen" name="pg_defaultOpen" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "accordion-0-1",
|
||||
"key": "accordion-0-1",
|
||||
"value": "primary",
|
||||
@@ -404,31 +404,31 @@ page AccordionDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "accordion-0-2",
|
||||
"key": "accordion-0-2",
|
||||
"value": "secondary",
|
||||
@@ -457,30 +457,30 @@ page AccordionDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-accordion-multiple"><span><strong>multiple</strong><small>boolean</small></span><input id="playground-accordion-multiple" name="pg_multiple" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-accordion-alwaysOpen"><span><strong>always Open</strong><small>boolean</small></span><input id="playground-accordion-alwaysOpen" name="pg_alwaysOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-accordion-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-accordion-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-accordion-indicator"><span><strong>indicator</strong><small>string</small></span><input id="playground-accordion-indicator" name="pg_indicator" type="text" value="plus" /></label><label class="playground-field" for="playground-accordion-indicatorPosition"><span><strong>indicator Position</strong><small>string</small></span><input id="playground-accordion-indicatorPosition" name="pg_indicatorPosition" type="text" value="start" /></label><label class="playground-toggle" for="playground-accordion-showIndicator"><span><strong>show Indicator</strong><small>boolean</small></span><input id="playground-accordion-showIndicator" name="pg_showIndicator" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-accordion-bordered"><span><strong>bordered</strong><small>boolean</small></span><input id="playground-accordion-bordered" name="pg_bordered" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-accordion-separated"><span><strong>separated</strong><small>boolean</small></span><input id="playground-accordion-separated" name="pg_separated" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-accordion-flush"><span><strong>flush</strong><small>boolean</small></span><input id="playground-accordion-flush" name="pg_flush" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-accordion-contentItalic"><span><strong>content Italic</strong><small>boolean</small></span><input id="playground-accordion-contentItalic" name="pg_contentItalic" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -152,7 +152,7 @@ page AdvancedDatePickerDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-advanced-date-picker-size"><span><strong>size</strong><small>string</small></span><select id="playground-advanced-date-picker-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-advanced-date-picker-color"><span><strong>color</strong><small>string</small></span><select id="playground-advanced-date-picker-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-advanced-date-picker-title"><span><strong>title</strong><small>string</small></span><input id="playground-advanced-date-picker-title" name="pg_title" type="text" value="Advanced Date Picker example" /></label><label class="playground-field" for="playground-advanced-date-picker-description"><span><strong>description</strong><small>string</small></span><input id="playground-advanced-date-picker-description" name="pg_description" type="text" value="A polished default advanced date picker for a modern application." /></label><label class="playground-field" for="playground-advanced-date-picker-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-advanced-date-picker-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "advanced-date-picker-0-1",
|
||||
"key": "advanced-date-picker-0-1",
|
||||
"value": "primary",
|
||||
@@ -181,31 +181,31 @@ page AdvancedDatePickerDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "advanced-date-picker-0-2",
|
||||
"key": "advanced-date-picker-0-2",
|
||||
"value": "secondary",
|
||||
@@ -234,30 +234,30 @@ page AdvancedDatePickerDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-date-picker-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-advanced-date-picker-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-advanced-date-picker-class"><span><strong>class</strong><small>string</small></span><input id="playground-advanced-date-picker-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -152,7 +152,7 @@ page AdvancedRangeSliderDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-advanced-range-slider-size"><span><strong>size</strong><small>string</small></span><select id="playground-advanced-range-slider-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-advanced-range-slider-color"><span><strong>color</strong><small>string</small></span><select id="playground-advanced-range-slider-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-advanced-range-slider-title"><span><strong>title</strong><small>string</small></span><input id="playground-advanced-range-slider-title" name="pg_title" type="text" value="Advanced Range Slider example" /></label><label class="playground-field" for="playground-advanced-range-slider-description"><span><strong>description</strong><small>string</small></span><input id="playground-advanced-range-slider-description" name="pg_description" type="text" value="A polished default advanced range slider for a modern application." /></label><label class="playground-field" for="playground-advanced-range-slider-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-advanced-range-slider-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "advanced-range-slider-0-1",
|
||||
"key": "advanced-range-slider-0-1",
|
||||
"value": "primary",
|
||||
@@ -181,31 +181,31 @@ page AdvancedRangeSliderDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "advanced-range-slider-0-2",
|
||||
"key": "advanced-range-slider-0-2",
|
||||
"value": "secondary",
|
||||
@@ -234,30 +234,30 @@ page AdvancedRangeSliderDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-advanced-range-slider-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-advanced-range-slider-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-advanced-range-slider-class"><span><strong>class</strong><small>string</small></span><input id="playground-advanced-range-slider-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -281,7 +281,7 @@ page AlertDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>21 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-alert-size"><span><strong>size</strong><small>string</small></span><select id="playground-alert-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-alert-color"><span><strong>color</strong><small>string</small></span><select id="playground-alert-color" name="pg_color"><option value="info" selected>info</option><option value="primary">primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option></select></label><label class="playground-field" for="playground-alert-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-alert-variant" name="pg_variant" type="text" value="soft" /></label><label class="playground-field" for="playground-alert-class"><span><strong>class</strong><small>string</small></span><input id="playground-alert-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label><label class="playground-field" for="playground-alert-radius"><span><strong>radius</strong><small>string</small></span><input id="playground-alert-radius" name="pg_radius" type="text" value="md" /></label><label class="playground-field" for="playground-alert-shadow"><span><strong>shadow</strong><small>string</small></span><input id="playground-alert-shadow" name="pg_shadow" type="text" value="sm" /></label><label class="playground-field" for="playground-alert-title"><span><strong>title</strong><small>string</small></span><input id="playground-alert-title" name="pg_title" type="text" value="Alert example" /></label><label class="playground-field" for="playground-alert-description"><span><strong>description</strong><small>string</small></span><input id="playground-alert-description" name="pg_description" type="text" value="A polished default alert for a modern application." /></label><label class="playground-field" for="playground-alert-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-alert-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "alert-0-1",
|
||||
"key": "alert-0-1",
|
||||
"value": "primary",
|
||||
@@ -310,31 +310,31 @@ page AlertDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "alert-0-2",
|
||||
"key": "alert-0-2",
|
||||
"value": "secondary",
|
||||
@@ -363,32 +363,32 @@ page AlertDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-alert-actions"><span><strong>actions</strong><small>unknown[]</small></span><textarea id="playground-alert-actions" name="pg_actions" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "alert-0-1",
|
||||
"key": "alert-0-1",
|
||||
"value": "primary",
|
||||
@@ -417,31 +417,31 @@ page AlertDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "alert-0-2",
|
||||
"key": "alert-0-2",
|
||||
"value": "secondary",
|
||||
@@ -470,30 +470,30 @@ page AlertDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-alert-showIcon"><span><strong>show Icon</strong><small>boolean</small></span><input id="playground-alert-showIcon" name="pg_showIcon" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-alert-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-alert-icon" name="pg_icon" type="text" value="" /></label><label class="playground-toggle" for="playground-alert-dismissible"><span><strong>dismissible</strong><small>boolean</small></span><input id="playground-alert-dismissible" name="pg_dismissible" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-alert-dismissLabel"><span><strong>dismiss Label</strong><small>string</small></span><input id="playground-alert-dismissLabel" name="pg_dismissLabel" type="text" value="Alert" /></label><label class="playground-field" for="playground-alert-role"><span><strong>role</strong><small>string</small></span><input id="playground-alert-role" name="pg_role" type="text" value="alert" /></label><label class="playground-field" for="playground-alert-live"><span><strong>live</strong><small>string</small></span><input id="playground-alert-live" name="pg_live" type="text" value="polite" /></label><label class="playground-field" for="playground-alert-linkLabel"><span><strong>link Label</strong><small>string</small></span><input id="playground-alert-linkLabel" name="pg_linkLabel" type="text" value="Alert" /></label><label class="playground-field" for="playground-alert-linkHref"><span><strong>link Href</strong><small>string</small></span><input id="playground-alert-linkHref" name="pg_linkHref" type="text" value="#alert-demo" /></label><label class="playground-field" for="playground-alert-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-alert-actionLabel" name="pg_actionLabel" type="text" value="Alert" /></label><label class="playground-field" for="playground-alert-actionHref"><span><strong>action Href</strong><small>string</small></span><input id="playground-alert-actionHref" name="pg_actionHref" type="text" value="#alert-demo" /></label><label class="playground-toggle" for="playground-alert-compact"><span><strong>compact</strong><small>boolean</small></span><input id="playground-alert-compact" name="pg_compact" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -77,30 +77,30 @@ page AuthSplitLayoutDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-auth-split-layout-size"><span><strong>size</strong><small>string</small></span><select id="playground-auth-split-layout-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-auth-split-layout-color"><span><strong>color</strong><small>string</small></span><select id="playground-auth-split-layout-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-auth-split-layout-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-auth-split-layout-eyebrow" name="pg_eyebrow" type="text" value="Secure identity" /></label><label class="playground-field" for="playground-auth-split-layout-title"><span><strong>title</strong><small>string</small></span><input id="playground-auth-split-layout-title" name="pg_title" type="text" value="Auth Split Layout example" /></label><label class="playground-field" for="playground-auth-split-layout-description"><span><strong>description</strong><small>string</small></span><input id="playground-auth-split-layout-description" name="pg_description" type="text" value="A polished default auth split layout for a modern application." /></label><label class="playground-field" for="playground-auth-split-layout-brand"><span><strong>brand</strong><small>string</small></span><input id="playground-auth-split-layout-brand" name="pg_brand" type="text" value="Police Management System" /></label><label class="playground-field" for="playground-auth-split-layout-features"><span><strong>features</strong><small>unknown[]</small></span><textarea id="playground-auth-split-layout-features" name="pg_features" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"label": "Team members",
|
||||
"values": [
|
||||
"5",
|
||||
"Unlimited",
|
||||
"Unlimited"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Support",
|
||||
"values": [
|
||||
"Email",
|
||||
"Priority",
|
||||
"Dedicated"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Audit history",
|
||||
"values": [
|
||||
"7 days",
|
||||
"90 days",
|
||||
"Custom"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-auth-split-layout-class"><span><strong>class</strong><small>string</small></span><input id="playground-auth-split-layout-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -156,7 +156,7 @@ page AvatarGroupDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>12 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-avatar-group-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-avatar-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "avatar-group-0-1",
|
||||
"key": "avatar-group-0-1",
|
||||
"value": "primary",
|
||||
@@ -185,31 +185,31 @@ page AvatarGroupDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "avatar-group-0-2",
|
||||
"key": "avatar-group-0-2",
|
||||
"value": "secondary",
|
||||
@@ -238,30 +238,30 @@ page AvatarGroupDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-avatar-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-avatar-group-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-avatar-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-avatar-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-avatar-group-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-avatar-group-variant" name="pg_variant" type="text" value="solid" /></label><label class="playground-field" for="playground-avatar-group-shape"><span><strong>shape</strong><small>string</small></span><select id="playground-avatar-group-shape" name="pg_shape"><option value="circle" selected>circle</option><option value="round">round</option><option value="rounded">rounded</option><option value="pill">pill</option></select></label><label class="playground-field" for="playground-avatar-group-layout"><span><strong>layout</strong><small>string</small></span><select id="playground-avatar-group-layout" name="pg_layout"><option value="stack" selected>stack</option><option value="content">content</option><option value="split">split</option><option value="stacked">stacked</option><option value="balanced">balanced</option><option value="visual">visual</option></select></label><label class="playground-field" for="playground-avatar-group-maxVisible"><span><strong>max Visible</strong><small>number</small></span><input id="playground-avatar-group-maxVisible" name="pg_maxVisible" type="number" value="4" /></label><label class="playground-field" for="playground-avatar-group-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-avatar-group-columns" name="pg_columns" type="number" value="3" /></label><label class="playground-field" for="playground-avatar-group-borderColor"><span><strong>border Color</strong><small>string</small></span><input id="playground-avatar-group-borderColor" name="pg_borderColor" type="text" value="" /></label><label class="playground-toggle" for="playground-avatar-group-showTooltips"><span><strong>show Tooltips</strong><small>boolean</small></span><input id="playground-avatar-group-showTooltips" name="pg_showTooltips" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-avatar-group-overflowLabel"><span><strong>overflow Label</strong><small>string</small></span><input id="playground-avatar-group-overflowLabel" name="pg_overflowLabel" type="text" value="Avatar Group" /></label><label class="playground-field" for="playground-avatar-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-avatar-group-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -158,7 +158,7 @@ page BreadcrumbDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>12 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-breadcrumb-label"><span><strong>label</strong><small>string</small></span><input id="playground-breadcrumb-label" name="pg_label" type="text" value="Breadcrumb" /></label><label class="playground-field" for="playground-breadcrumb-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-breadcrumb-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "breadcrumb-0-1",
|
||||
"key": "breadcrumb-0-1",
|
||||
"value": "primary",
|
||||
@@ -187,31 +187,31 @@ page BreadcrumbDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "breadcrumb-0-2",
|
||||
"key": "breadcrumb-0-2",
|
||||
"value": "secondary",
|
||||
@@ -240,30 +240,30 @@ page BreadcrumbDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-breadcrumb-active"><span><strong>active</strong><small>string</small></span><input id="playground-breadcrumb-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-breadcrumb-separator"><span><strong>separator</strong><small>string</small></span><select id="playground-breadcrumb-separator" name="pg_separator"><option value="chevron" selected>chevron</option><option value="slash">slash</option><option value="dot">dot</option><option value="arrow">arrow</option></select></label><label class="playground-toggle" for="playground-breadcrumb-showHome"><span><strong>show Home</strong><small>boolean</small></span><input id="playground-breadcrumb-showHome" name="pg_showHome" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-breadcrumb-homeLabel"><span><strong>home Label</strong><small>string</small></span><input id="playground-breadcrumb-homeLabel" name="pg_homeLabel" type="text" value="Breadcrumb" /></label><label class="playground-field" for="playground-breadcrumb-homeHref"><span><strong>home Href</strong><small>string</small></span><input id="playground-breadcrumb-homeHref" name="pg_homeHref" type="text" value="#breadcrumb-demo" /></label><label class="playground-field" for="playground-breadcrumb-homeIcon"><span><strong>home Icon</strong><small>string</small></span><input id="playground-breadcrumb-homeIcon" name="pg_homeIcon" type="text" value="icon-[lucide--house]" /></label><label class="playground-field" for="playground-breadcrumb-size"><span><strong>size</strong><small>string</small></span><select id="playground-breadcrumb-size" name="pg_size"><option value="default" selected>default</option><option value="small">small</option><option value="medium">medium</option><option value="large">large</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-breadcrumb-color"><span><strong>color</strong><small>string</small></span><select id="playground-breadcrumb-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-breadcrumb-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-breadcrumb-variant" name="pg_variant"><option value="minimal" selected>minimal</option><option value="soft">soft</option><option value="outline">outline</option><option value="contrast">contrast</option></select></label><label class="playground-field" for="playground-breadcrumb-class"><span><strong>class</strong><small>string</small></span><input id="playground-breadcrumb-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -158,7 +158,7 @@ page ButtonGroupDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-button-group-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-button-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "button-group-0-1",
|
||||
"key": "button-group-0-1",
|
||||
"value": "primary",
|
||||
@@ -187,31 +187,31 @@ page ButtonGroupDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "button-group-0-2",
|
||||
"key": "button-group-0-2",
|
||||
"value": "secondary",
|
||||
@@ -240,30 +240,30 @@ page ButtonGroupDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-button-group-value"><span><strong>value</strong><small>string</small></span><input id="playground-button-group-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-button-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-button-group-size" name="pg_size"><option value="md" selected>md</option><option value="default">default</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-button-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-button-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-button-group-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-button-group-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-button-group-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-button-group-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-toggle" for="playground-button-group-responsive"><span><strong>responsive</strong><small>boolean</small></span><input id="playground-button-group-responsive" name="pg_responsive" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-attached"><span><strong>attached</strong><small>boolean</small></span><input id="playground-button-group-attached" name="pg_attached" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-selectable"><span><strong>selectable</strong><small>boolean</small></span><input id="playground-button-group-selectable" name="pg_selectable" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-toolbar"><span><strong>toolbar</strong><small>boolean</small></span><input id="playground-button-group-toolbar" name="pg_toolbar" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-button-group-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-button-group-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-button-group-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-button-group-ariaLabel" name="pg_ariaLabel" type="text" value="Button Group 1 example" /></label><label class="playground-field" for="playground-button-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-button-group-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -401,7 +401,7 @@ page CardDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>31 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-card-title"><span><strong>title</strong><small>string</small></span><input id="playground-card-title" name="pg_title" type="text" value="Card example" /></label><label class="playground-field" for="playground-card-subtitle"><span><strong>subtitle</strong><small>string</small></span><input id="playground-card-subtitle" name="pg_subtitle" type="text" value="Card example" /></label><label class="playground-field" for="playground-card-description"><span><strong>description</strong><small>string</small></span><input id="playground-card-description" name="pg_description" type="text" value="A polished default card for a modern application." /></label><label class="playground-field" for="playground-card-header"><span><strong>header</strong><small>string</small></span><input id="playground-card-header" name="pg_header" type="text" value="" /></label><label class="playground-field" for="playground-card-footer"><span><strong>footer</strong><small>string</small></span><input id="playground-card-footer" name="pg_footer" type="text" value="" /></label><label class="playground-field" for="playground-card-imageSrc"><span><strong>image Src</strong><small>string</small></span><input id="playground-card-imageSrc" name="pg_imageSrc" type="text" value="" /></label><label class="playground-field" for="playground-card-imageAlt"><span><strong>image Alt</strong><small>string</small></span><input id="playground-card-imageAlt" name="pg_imageAlt" type="text" value="" /></label><label class="playground-field" for="playground-card-imagePosition"><span><strong>image Position</strong><small>string</small></span><select id="playground-card-imagePosition" name="pg_imagePosition"><option value="top" selected>top</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-card-actionLabel"><span><strong>action Label</strong><small>string</small></span><input id="playground-card-actionLabel" name="pg_actionLabel" type="text" value="Card" /></label><label class="playground-field" for="playground-card-actionHref"><span><strong>action Href</strong><small>string</small></span><input id="playground-card-actionHref" name="pg_actionHref" type="text" value="#card-demo" /></label><label class="playground-field" for="playground-card-headerActions"><span><strong>header Actions</strong><small>unknown[]</small></span><textarea id="playground-card-headerActions" name="pg_headerActions" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "card-0-1",
|
||||
"key": "card-0-1",
|
||||
"value": "primary",
|
||||
@@ -430,31 +430,31 @@ page CardDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "card-0-2",
|
||||
"key": "card-0-2",
|
||||
"value": "secondary",
|
||||
@@ -483,32 +483,32 @@ page CardDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-card-navigation"><span><strong>navigation</strong><small>unknown[]</small></span><textarea id="playground-card-navigation" name="pg_navigation" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "card-0-1",
|
||||
"key": "card-0-1",
|
||||
"value": "primary",
|
||||
@@ -537,31 +537,31 @@ page CardDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "card-0-2",
|
||||
"key": "card-0-2",
|
||||
"value": "secondary",
|
||||
@@ -590,32 +590,32 @@ page CardDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-card-activeNav"><span><strong>active Nav</strong><small>string</small></span><input id="playground-card-activeNav" name="pg_activeNav" type="text" value="" /></label><label class="playground-toggle" for="playground-card-mobileNavigation"><span><strong>mobile Navigation</strong><small>boolean</small></span><input id="playground-card-mobileNavigation" name="pg_mobileNavigation" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-card-alertTitle"><span><strong>alert Title</strong><small>string</small></span><input id="playground-card-alertTitle" name="pg_alertTitle" type="text" value="Card example" /></label><label class="playground-field" for="playground-card-alertDescription"><span><strong>alert Description</strong><small>string</small></span><input id="playground-card-alertDescription" name="pg_alertDescription" type="text" value="A polished default card for a modern application." /></label><label class="playground-toggle" for="playground-card-empty"><span><strong>empty</strong><small>boolean</small></span><input id="playground-card-empty" name="pg_empty" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-card-emptyTitle"><span><strong>empty Title</strong><small>string</small></span><input id="playground-card-emptyTitle" name="pg_emptyTitle" type="text" value="Card example" /></label><label class="playground-field" for="playground-card-emptyIcon"><span><strong>empty Icon</strong><small>string</small></span><input id="playground-card-emptyIcon" name="pg_emptyIcon" type="text" value="icon-[lucide--inbox]" /></label><label class="playground-field" for="playground-card-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-card-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "card-0-1",
|
||||
"key": "card-0-1",
|
||||
"value": "primary",
|
||||
@@ -644,31 +644,31 @@ page CardDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "card-0-2",
|
||||
"key": "card-0-2",
|
||||
"value": "secondary",
|
||||
@@ -697,30 +697,30 @@ page CardDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-card-size"><span><strong>size</strong><small>string</small></span><select id="playground-card-size" name="pg_size"><option value="md" selected>md</option><option value="compact">compact</option><option value="default">default</option><option value="spacious">spacious</option><option value="xs">xs</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-card-color"><span><strong>color</strong><small>string</small></span><select id="playground-card-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-card-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-card-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option><option value="minimal">minimal</option></select></label><label class="playground-field" for="playground-card-layout"><span><strong>layout</strong><small>string</small></span><select id="playground-card-layout" name="pg_layout"><option value="vertical" selected>vertical</option><option value="content">content</option><option value="split">split</option><option value="stacked">stacked</option><option value="balanced">balanced</option><option value="visual">visual</option></select></label><label class="playground-field" for="playground-card-align"><span><strong>align</strong><small>string</small></span><select id="playground-card-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-card-hover"><span><strong>hover</strong><small>string</small></span><input id="playground-card-hover" name="pg_hover" type="text" value="none" /></label><label class="playground-toggle" for="playground-card-scrollable"><span><strong>scrollable</strong><small>boolean</small></span><input id="playground-card-scrollable" name="pg_scrollable" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-card-maxHeight"><span><strong>max Height</strong><small>string</small></span><input id="playground-card-maxHeight" name="pg_maxHeight" type="text" value="18rem" /></label><label class="playground-toggle" for="playground-card-dismissible"><span><strong>dismissible</strong><small>boolean</small></span><input id="playground-card-dismissible" name="pg_dismissible" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-card-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-card-ariaLabel" name="pg_ariaLabel" type="text" value="Card 1 example" /></label><label class="playground-field" for="playground-card-class"><span><strong>class</strong><small>string</small></span><input id="playground-card-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -170,7 +170,7 @@ page CarouselDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>22 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-carousel-size"><span><strong>size</strong><small>string</small></span><select id="playground-carousel-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-carousel-color"><span><strong>color</strong><small>string</small></span><select id="playground-carousel-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-carousel-title"><span><strong>title</strong><small>string</small></span><input id="playground-carousel-title" name="pg_title" type="text" value="Carousel example" /></label><label class="playground-field" for="playground-carousel-description"><span><strong>description</strong><small>string</small></span><input id="playground-carousel-description" name="pg_description" type="text" value="A polished default carousel for a modern application." /></label><label class="playground-field" for="playground-carousel-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-carousel-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "carousel-0-1",
|
||||
"key": "carousel-0-1",
|
||||
"value": "primary",
|
||||
@@ -199,31 +199,31 @@ page CarouselDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "carousel-0-2",
|
||||
"key": "carousel-0-2",
|
||||
"value": "secondary",
|
||||
@@ -252,30 +252,30 @@ page CarouselDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-carousel-activeIndex"><span><strong>active Index</strong><small>number</small></span><input id="playground-carousel-activeIndex" name="pg_activeIndex" type="number" value="0" /></label><label class="playground-field" for="playground-carousel-slidesPerView"><span><strong>slides Per View</strong><small>number</small></span><input id="playground-carousel-slidesPerView" name="pg_slidesPerView" type="number" value="1" /></label><label class="playground-field" for="playground-carousel-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-carousel-gap" name="pg_gap"><option value="0.75rem" selected>0.75rem</option><option value="none">none</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="2xl">2xl</option></select></label><label class="playground-toggle" for="playground-carousel-showPagination"><span><strong>show Pagination</strong><small>boolean</small></span><input id="playground-carousel-showPagination" name="pg_showPagination" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isAutoPlay"><span><strong>is Auto Play</strong><small>boolean</small></span><input id="playground-carousel-isAutoPlay" name="pg_isAutoPlay" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-carousel-autoplayInterval"><span><strong>autoplay Interval</strong><small>number</small></span><input id="playground-carousel-autoplayInterval" name="pg_autoplayInterval" type="number" value="4000" /></label><label class="playground-toggle" for="playground-carousel-isInfiniteLoop"><span><strong>is Infinite Loop</strong><small>boolean</small></span><input id="playground-carousel-isInfiniteLoop" name="pg_isInfiniteLoop" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isRTL"><span><strong>is RTL</strong><small>boolean</small></span><input id="playground-carousel-isRTL" name="pg_isRTL" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isCentered"><span><strong>is Centered</strong><small>boolean</small></span><input id="playground-carousel-isCentered" name="pg_isCentered" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isDraggable"><span><strong>is Draggable</strong><small>boolean</small></span><input id="playground-carousel-isDraggable" name="pg_isDraggable" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isAutoHeight"><span><strong>is Auto Height</strong><small>boolean</small></span><input id="playground-carousel-isAutoHeight" name="pg_isAutoHeight" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-isSnap"><span><strong>is Snap</strong><small>boolean</small></span><input id="playground-carousel-isSnap" name="pg_isSnap" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-carousel-showCounter"><span><strong>show Counter</strong><small>boolean</small></span><input id="playground-carousel-showCounter" name="pg_showCounter" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-carousel-thumbnails"><span><strong>thumbnails</strong><small>string</small></span><input id="playground-carousel-thumbnails" name="pg_thumbnails" type="text" value="none" /></label><label class="playground-field" for="playground-carousel-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-carousel-ariaLabel" name="pg_ariaLabel" type="text" value="Carousel 1 example" /></label><label class="playground-field" for="playground-carousel-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-carousel-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-carousel-class"><span><strong>class</strong><small>string</small></span><input id="playground-carousel-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -152,7 +152,7 @@ page ChartDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-chart-size"><span><strong>size</strong><small>string</small></span><select id="playground-chart-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-chart-color"><span><strong>color</strong><small>string</small></span><select id="playground-chart-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-chart-title"><span><strong>title</strong><small>string</small></span><input id="playground-chart-title" name="pg_title" type="text" value="Chart example" /></label><label class="playground-field" for="playground-chart-description"><span><strong>description</strong><small>string</small></span><input id="playground-chart-description" name="pg_description" type="text" value="A polished default chart for a modern application." /></label><label class="playground-field" for="playground-chart-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-chart-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "chart-0-1",
|
||||
"key": "chart-0-1",
|
||||
"value": "primary",
|
||||
@@ -181,31 +181,31 @@ page ChartDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "chart-0-2",
|
||||
"key": "chart-0-2",
|
||||
"value": "secondary",
|
||||
@@ -234,30 +234,30 @@ page ChartDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-chart-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-chart-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-chart-class"><span><strong>class</strong><small>string</small></span><input id="playground-chart-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -159,7 +159,7 @@ page ChatBubbleDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>11 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-chat-bubble-size"><span><strong>size</strong><small>string</small></span><select id="playground-chat-bubble-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-chat-bubble-color"><span><strong>color</strong><small>string</small></span><select id="playground-chat-bubble-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-chat-bubble-title"><span><strong>title</strong><small>string</small></span><input id="playground-chat-bubble-title" name="pg_title" type="text" value="Chat Bubble example" /></label><label class="playground-field" for="playground-chat-bubble-description"><span><strong>description</strong><small>string</small></span><input id="playground-chat-bubble-description" name="pg_description" type="text" value="A polished default chat bubble for a modern application." /></label><label class="playground-field" for="playground-chat-bubble-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-chat-bubble-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "chat-bubble-0-1",
|
||||
"key": "chat-bubble-0-1",
|
||||
"value": "primary",
|
||||
@@ -188,31 +188,31 @@ page ChatBubbleDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "chat-bubble-0-2",
|
||||
"key": "chat-bubble-0-2",
|
||||
"value": "secondary",
|
||||
@@ -241,30 +241,30 @@ page ChatBubbleDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-chat-bubble-oneSided"><span><strong>one Sided</strong><small>boolean</small></span><input id="playground-chat-bubble-oneSided" name="pg_oneSided" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showAvatars"><span><strong>show Avatars</strong><small>boolean</small></span><input id="playground-chat-bubble-showAvatars" name="pg_showAvatars" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-chat-bubble-showMetadata"><span><strong>show Metadata</strong><small>boolean</small></span><input id="playground-chat-bubble-showMetadata" name="pg_showMetadata" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-chat-bubble-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-chat-bubble-ariaLabel" name="pg_ariaLabel" type="text" value="Chat Bubble 1 example" /></label><label class="playground-field" for="playground-chat-bubble-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-chat-bubble-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-chat-bubble-class"><span><strong>class</strong><small>string</small></span><input id="playground-chat-bubble-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -280,7 +280,7 @@ page CheckboxDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>27 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-checkbox-size"><span><strong>size</strong><small>string</small></span><select id="playground-checkbox-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-checkbox-color"><span><strong>color</strong><small>string</small></span><select id="playground-checkbox-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-checkbox-id"><span><strong>id</strong><small>string</small></span><input id="playground-checkbox-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-checkbox-name"><span><strong>name</strong><small>string</small></span><input id="playground-checkbox-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-checkbox-label"><span><strong>label</strong><small>string</small></span><input id="playground-checkbox-label" name="pg_label" type="text" value="Checkbox" /></label><label class="playground-toggle" for="playground-checkbox-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-checkbox-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-checkbox-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-checkbox-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-checkbox-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-checkbox-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-checkbox-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-checkbox-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-checkbox-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-checkbox-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-checkbox-value"><span><strong>value</strong><small>string</small></span><input id="playground-checkbox-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-checkbox-values"><span><strong>values</strong><small>unknown[]</small></span><textarea id="playground-checkbox-values" name="pg_values" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "checkbox-0-1",
|
||||
"key": "checkbox-0-1",
|
||||
"value": "primary",
|
||||
@@ -309,31 +309,31 @@ page CheckboxDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "checkbox-0-2",
|
||||
"key": "checkbox-0-2",
|
||||
"value": "secondary",
|
||||
@@ -362,32 +362,32 @@ page CheckboxDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-checkbox-options"><span><strong>options</strong><small>unknown[]</small></span><textarea id="playground-checkbox-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "checkbox-0-1",
|
||||
"key": "checkbox-0-1",
|
||||
"value": "primary",
|
||||
@@ -416,31 +416,31 @@ page CheckboxDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "checkbox-0-2",
|
||||
"key": "checkbox-0-2",
|
||||
"value": "secondary",
|
||||
@@ -469,30 +469,30 @@ page CheckboxDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-checkbox-checked"><span><strong>checked</strong><small>boolean</small></span><input id="playground-checkbox-checked" name="pg_checked" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-indeterminate"><span><strong>indeterminate</strong><small>boolean</small></span><input id="playground-checkbox-indeterminate" name="pg_indeterminate" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-checkbox-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-checkbox-orientation" name="pg_orientation"><option value="vertical" selected>vertical</option><option value="horizontal">horizontal</option></select></label><label class="playground-toggle" for="playground-checkbox-card"><span><strong>card</strong><small>boolean</small></span><input id="playground-checkbox-card" name="pg_card" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-rightAligned"><span><strong>right Aligned</strong><small>boolean</small></span><input id="playground-checkbox-rightAligned" name="pg_rightAligned" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-list"><span><strong>list</strong><small>boolean</small></span><input id="playground-checkbox-list" name="pg_list" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-checkbox-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-checkbox-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-checkbox-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-checkbox-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-checkbox-error"><span><strong>error</strong><small>string</small></span><input id="playground-checkbox-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-checkbox-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-checkbox-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-checkbox-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-checkbox-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-checkbox-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-checkbox-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-checkbox-class"><span><strong>class</strong><small>string</small></span><input id="playground-checkbox-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -152,7 +152,7 @@ page ClipboardDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-clipboard-size"><span><strong>size</strong><small>string</small></span><select id="playground-clipboard-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-clipboard-color"><span><strong>color</strong><small>string</small></span><select id="playground-clipboard-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-clipboard-title"><span><strong>title</strong><small>string</small></span><input id="playground-clipboard-title" name="pg_title" type="text" value="Clipboard example" /></label><label class="playground-field" for="playground-clipboard-description"><span><strong>description</strong><small>string</small></span><input id="playground-clipboard-description" name="pg_description" type="text" value="A polished default clipboard for a modern application." /></label><label class="playground-field" for="playground-clipboard-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-clipboard-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "clipboard-0-1",
|
||||
"key": "clipboard-0-1",
|
||||
"value": "primary",
|
||||
@@ -181,31 +181,31 @@ page ClipboardDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "clipboard-0-2",
|
||||
"key": "clipboard-0-2",
|
||||
"value": "secondary",
|
||||
@@ -234,30 +234,30 @@ page ClipboardDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-clipboard-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-clipboard-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-clipboard-class"><span><strong>class</strong><small>string</small></span><input id="playground-clipboard-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -260,7 +260,7 @@ page CollapseDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-collapse-size"><span><strong>size</strong><small>string</small></span><select id="playground-collapse-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-collapse-color"><span><strong>color</strong><small>string</small></span><select id="playground-collapse-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-collapse-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-collapse-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "collapse-0-1",
|
||||
"key": "collapse-0-1",
|
||||
"value": "primary",
|
||||
@@ -289,31 +289,31 @@ page CollapseDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "collapse-0-2",
|
||||
"key": "collapse-0-2",
|
||||
"value": "secondary",
|
||||
@@ -342,32 +342,32 @@ page CollapseDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-collapse-multiple"><span><strong>multiple</strong><small>boolean</small></span><input id="playground-collapse-multiple" name="pg_multiple" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-collapse-mode"><span><strong>mode</strong><small>string</small></span><input id="playground-collapse-mode" name="pg_mode" type="text" value="panel" /></label><label class="playground-field" for="playground-collapse-initialOpenIndexes"><span><strong>initial Open Indexes</strong><small>unknown[]</small></span><textarea id="playground-collapse-initialOpenIndexes" name="pg_initialOpenIndexes" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "collapse-0-1",
|
||||
"key": "collapse-0-1",
|
||||
"value": "primary",
|
||||
@@ -396,31 +396,31 @@ page CollapseDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "collapse-0-2",
|
||||
"key": "collapse-0-2",
|
||||
"value": "secondary",
|
||||
@@ -449,30 +449,30 @@ page CollapseDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-collapse-ariaLabel"><span><strong>aria Label</strong><small>string</small></span><input id="playground-collapse-ariaLabel" name="pg_ariaLabel" type="text" value="Collapse 1 example" /></label><label class="playground-field" for="playground-collapse-class"><span><strong>class</strong><small>string</small></span><input id="playground-collapse-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -152,7 +152,7 @@ page ConfettiDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-confetti-size"><span><strong>size</strong><small>string</small></span><select id="playground-confetti-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-confetti-color"><span><strong>color</strong><small>string</small></span><select id="playground-confetti-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-confetti-title"><span><strong>title</strong><small>string</small></span><input id="playground-confetti-title" name="pg_title" type="text" value="Confetti example" /></label><label class="playground-field" for="playground-confetti-description"><span><strong>description</strong><small>string</small></span><input id="playground-confetti-description" name="pg_description" type="text" value="A polished default confetti for a modern application." /></label><label class="playground-field" for="playground-confetti-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-confetti-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "confetti-0-1",
|
||||
"key": "confetti-0-1",
|
||||
"value": "primary",
|
||||
@@ -181,31 +181,31 @@ page ConfettiDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "confetti-0-2",
|
||||
"key": "confetti-0-2",
|
||||
"value": "secondary",
|
||||
@@ -234,30 +234,30 @@ page ConfettiDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-confetti-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-confetti-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-confetti-class"><span><strong>class</strong><small>string</small></span><input id="playground-confetti-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -152,7 +152,7 @@ page DataMapDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-data-map-size"><span><strong>size</strong><small>string</small></span><select id="playground-data-map-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-data-map-color"><span><strong>color</strong><small>string</small></span><select id="playground-data-map-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-data-map-title"><span><strong>title</strong><small>string</small></span><input id="playground-data-map-title" name="pg_title" type="text" value="Data Map example" /></label><label class="playground-field" for="playground-data-map-description"><span><strong>description</strong><small>string</small></span><input id="playground-data-map-description" name="pg_description" type="text" value="A polished default data map for a modern application." /></label><label class="playground-field" for="playground-data-map-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-data-map-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "data-map-0-1",
|
||||
"key": "data-map-0-1",
|
||||
"value": "primary",
|
||||
@@ -181,31 +181,31 @@ page DataMapDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "data-map-0-2",
|
||||
"key": "data-map-0-2",
|
||||
"value": "secondary",
|
||||
@@ -234,30 +234,30 @@ page DataMapDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-data-map-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-data-map-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-data-map-class"><span><strong>class</strong><small>string</small></span><input id="playground-data-map-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -160,7 +160,7 @@ page DeviceFrameDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>14 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-device-frame-size"><span><strong>size</strong><small>string</small></span><select id="playground-device-frame-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-device-frame-color"><span><strong>color</strong><small>string</small></span><select id="playground-device-frame-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-device-frame-title"><span><strong>title</strong><small>string</small></span><input id="playground-device-frame-title" name="pg_title" type="text" value="Device Frame example" /></label><label class="playground-field" for="playground-device-frame-description"><span><strong>description</strong><small>string</small></span><input id="playground-device-frame-description" name="pg_description" type="text" value="A polished default device frame for a modern application." /></label><label class="playground-field" for="playground-device-frame-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-device-frame-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "device-frame-0-1",
|
||||
"key": "device-frame-0-1",
|
||||
"value": "primary",
|
||||
@@ -189,31 +189,31 @@ page DeviceFrameDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "device-frame-0-2",
|
||||
"key": "device-frame-0-2",
|
||||
"value": "secondary",
|
||||
@@ -242,30 +242,30 @@ page DeviceFrameDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-device-frame-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-device-frame-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-device-frame-device"><span><strong>device</strong><small>string</small></span><input id="playground-device-frame-device" name="pg_device" type="text" value="phone" /></label><label class="playground-field" for="playground-device-frame-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-device-frame-orientation" name="pg_orientation"><option value="portrait" selected>portrait</option><option value="horizontal">horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-device-frame-src"><span><strong>src</strong><small>string</small></span><input id="playground-device-frame-src" name="pg_src" type="text" value="" /></label><label class="playground-field" for="playground-device-frame-srcdoc"><span><strong>srcdoc</strong><small>string</small></span><input id="playground-device-frame-srcdoc" name="pg_srcdoc" type="text" value="" /></label><label class="playground-field" for="playground-device-frame-frameTitle"><span><strong>frame Title</strong><small>string</small></span><input id="playground-device-frame-frameTitle" name="pg_frameTitle" type="text" value="Device Frame example" /></label><label class="playground-toggle" for="playground-device-frame-showToolbar"><span><strong>show Toolbar</strong><small>boolean</small></span><input id="playground-device-frame-showToolbar" name="pg_showToolbar" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-device-frame-allow"><span><strong>allow</strong><small>string</small></span><input id="playground-device-frame-allow" name="pg_allow" type="text" value="" /></label><label class="playground-field" for="playground-device-frame-class"><span><strong>class</strong><small>string</small></span><input id="playground-device-frame-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -152,7 +152,7 @@ page DragAndDropDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-drag-and-drop-size"><span><strong>size</strong><small>string</small></span><select id="playground-drag-and-drop-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-drag-and-drop-color"><span><strong>color</strong><small>string</small></span><select id="playground-drag-and-drop-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-drag-and-drop-title"><span><strong>title</strong><small>string</small></span><input id="playground-drag-and-drop-title" name="pg_title" type="text" value="Drag And Drop example" /></label><label class="playground-field" for="playground-drag-and-drop-description"><span><strong>description</strong><small>string</small></span><input id="playground-drag-and-drop-description" name="pg_description" type="text" value="A polished default drag and drop for a modern application." /></label><label class="playground-field" for="playground-drag-and-drop-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-drag-and-drop-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "drag-and-drop-0-1",
|
||||
"key": "drag-and-drop-0-1",
|
||||
"value": "primary",
|
||||
@@ -181,31 +181,31 @@ page DragAndDropDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "drag-and-drop-0-2",
|
||||
"key": "drag-and-drop-0-2",
|
||||
"value": "secondary",
|
||||
@@ -234,30 +234,30 @@ page DragAndDropDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-drag-and-drop-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-drag-and-drop-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-drag-and-drop-class"><span><strong>class</strong><small>string</small></span><input id="playground-drag-and-drop-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -159,7 +159,7 @@ page FeatureGridDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>14 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-feature-grid-size"><span><strong>size</strong><small>string</small></span><select id="playground-feature-grid-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-feature-grid-color"><span><strong>color</strong><small>string</small></span><select id="playground-feature-grid-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-feature-grid-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-feature-grid-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"icon": "icon-[lucide--shield-check]",
|
||||
"eyebrow": "Citizen support",
|
||||
"title": "Citizen services",
|
||||
@@ -170,8 +170,8 @@ page FeatureGridDetail {
|
||||
"color": "primary",
|
||||
"variant": "default",
|
||||
"hover": "lift"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"icon": "icon-[lucide--map-pin]",
|
||||
"eyebrow": "Directory",
|
||||
"title": "Station directory",
|
||||
@@ -182,8 +182,8 @@ page FeatureGridDetail {
|
||||
"color": "info",
|
||||
"variant": "soft",
|
||||
"hover": "border"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"icon": "icon-[lucide--radio-tower]",
|
||||
"eyebrow": "Verified",
|
||||
"title": "Public updates",
|
||||
@@ -194,7 +194,7 @@ page FeatureGridDetail {
|
||||
"color": "success",
|
||||
"variant": "gradient",
|
||||
"hover": "glow"
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-feature-grid-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-feature-grid-columns" name="pg_columns" type="number" value="3" /></label><label class="playground-field" for="playground-feature-grid-tabletColumns"><span><strong>tablet Columns</strong><small>number</small></span><input id="playground-feature-grid-tabletColumns" name="pg_tabletColumns" type="number" value="2" /></label><label class="playground-field" for="playground-feature-grid-mobileColumns"><span><strong>mobile Columns</strong><small>number</small></span><input id="playground-feature-grid-mobileColumns" name="pg_mobileColumns" type="number" value="1" /></label><label class="playground-field" for="playground-feature-grid-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-feature-grid-gap" name="pg_gap"><option value="md" selected>md</option><option value="none">none</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="xs">xs</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-feature-grid-minItemWidth"><span><strong>min Item Width</strong><small>string</small></span><input id="playground-feature-grid-minItemWidth" name="pg_minItemWidth" type="text" value="" /></label><label class="playground-toggle" for="playground-feature-grid-equalHeight"><span><strong>equal Height</strong><small>boolean</small></span><input id="playground-feature-grid-equalHeight" name="pg_equalHeight" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-feature-grid-align"><span><strong>align</strong><small>string</small></span><select id="playground-feature-grid-align" name="pg_align"><option value="start" selected>start</option><option value="stretch">stretch</option><option value="center">center</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-feature-grid-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-feature-grid-maxWidth" name="pg_maxWidth"><option value="full" selected>full</option><option value="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="wide">wide</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-feature-grid-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-feature-grid-variant" name="pg_variant"><option value="default" selected>default</option><option value="panel">panel</option><option value="soft">soft</option></select></label><label class="playground-field" for="playground-feature-grid-label"><span><strong>label</strong><small>string</small></span><input id="playground-feature-grid-label" name="pg_label" type="text" value="Feature Grid" /></label><label class="playground-field" for="playground-feature-grid-class"><span><strong>class</strong><small>string</small></span><input id="playground-feature-grid-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -152,7 +152,7 @@ page FileUploadDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-file-upload-size"><span><strong>size</strong><small>string</small></span><select id="playground-file-upload-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-file-upload-color"><span><strong>color</strong><small>string</small></span><select id="playground-file-upload-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-file-upload-title"><span><strong>title</strong><small>string</small></span><input id="playground-file-upload-title" name="pg_title" type="text" value="File Upload example" /></label><label class="playground-field" for="playground-file-upload-description"><span><strong>description</strong><small>string</small></span><input id="playground-file-upload-description" name="pg_description" type="text" value="A polished default file upload for a modern application." /></label><label class="playground-field" for="playground-file-upload-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-file-upload-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "file-upload-0-1",
|
||||
"key": "file-upload-0-1",
|
||||
"value": "primary",
|
||||
@@ -181,31 +181,31 @@ page FileUploadDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "file-upload-0-2",
|
||||
"key": "file-upload-0-2",
|
||||
"value": "secondary",
|
||||
@@ -234,30 +234,30 @@ page FileUploadDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-file-upload-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-file-upload-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-file-upload-class"><span><strong>class</strong><small>string</small></span><input id="playground-file-upload-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -164,77 +164,77 @@ page FooterDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-footer-size"><span><strong>size</strong><small>string</small></span><select id="playground-footer-size" name="pg_size"><option value="default" selected>default</option><option value="compact">compact</option><option value="spacious">spacious</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-footer-color"><span><strong>color</strong><small>string</small></span><select id="playground-footer-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-footer-label"><span><strong>label</strong><small>string</small></span><input id="playground-footer-label" name="pg_label" type="text" value="Footer" /></label><label class="playground-field" for="playground-footer-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-footer-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"type": "header",
|
||||
"label": "Product",
|
||||
"description": "Build consistent interfaces with WRNexusJS.",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Components",
|
||||
"href": "/base"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Themes",
|
||||
"href": "/themes"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Examples",
|
||||
"href": "/blocks"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"label": "Developers",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "/docs"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Installation",
|
||||
"href": "/installation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Framework guides",
|
||||
"href": "/framework-guides"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"label": "Resources",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Accessibility",
|
||||
"href": "/accessibility"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Design tokens",
|
||||
"href": "/colors"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Typography",
|
||||
"href": "/fonts"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"type": "header",
|
||||
"label": "Company",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "WorkRoot",
|
||||
"href": "https://workroot.in",
|
||||
"external": true
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "WRNexusJS",
|
||||
"href": "https://wrnexusjs.dev",
|
||||
"external": true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-footer-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-footer-columns" name="pg_columns" type="number" value="4" /></label><label class="playground-field" for="playground-footer-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-footer-maxWidth" name="pg_maxWidth"><option value="wide" selected>wide</option><option value="compact">compact</option><option value="xl">xl</option><option value="full">full</option><option value="lg">lg</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-footer-copyright"><span><strong>copyright</strong><small>string</small></span><input id="playground-footer-copyright" name="pg_copyright" type="text" value="" /></label><label class="playground-field" for="playground-footer-class"><span><strong>class</strong><small>string</small></span><input id="playground-footer-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -152,18 +152,18 @@ page HeroActionsDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-hero-actions-actions"><span><strong>actions</strong><small>unknown[]</small></span><textarea id="playground-hero-actions-actions" name="pg_actions" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"label": "Browse components",
|
||||
"href": "#components",
|
||||
"icon": "icon-[lucide--blocks]",
|
||||
"variant": "primary"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "View metrics",
|
||||
"href": "#metrics",
|
||||
"icon": "icon-[lucide--chart-no-axes-column-increasing]",
|
||||
"variant": "outline"
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-hero-actions-align"><span><strong>align</strong><small>string</small></span><select id="playground-hero-actions-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-field" for="playground-hero-actions-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-hero-actions-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-toggle" for="playground-hero-actions-stackOnMobile"><span><strong>stack On Mobile</strong><small>boolean</small></span><input id="playground-hero-actions-stackOnMobile" name="pg_stackOnMobile" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-hero-actions-fullWidthMobile"><span><strong>full Width Mobile</strong><small>boolean</small></span><input id="playground-hero-actions-fullWidthMobile" name="pg_fullWidthMobile" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-hero-actions-size"><span><strong>size</strong><small>string</small></span><select id="playground-hero-actions-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-hero-actions-color"><span><strong>color</strong><small>string</small></span><select id="playground-hero-actions-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-hero-actions-class"><span><strong>class</strong><small>string</small></span><input id="playground-hero-actions-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -152,7 +152,7 @@ page LegendIndicatorDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-legend-indicator-size"><span><strong>size</strong><small>string</small></span><select id="playground-legend-indicator-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-legend-indicator-color"><span><strong>color</strong><small>string</small></span><select id="playground-legend-indicator-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-legend-indicator-title"><span><strong>title</strong><small>string</small></span><input id="playground-legend-indicator-title" name="pg_title" type="text" value="Legend Indicator example" /></label><label class="playground-field" for="playground-legend-indicator-description"><span><strong>description</strong><small>string</small></span><input id="playground-legend-indicator-description" name="pg_description" type="text" value="A polished default legend indicator for a modern application." /></label><label class="playground-field" for="playground-legend-indicator-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-legend-indicator-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "legend-indicator-0-1",
|
||||
"key": "legend-indicator-0-1",
|
||||
"value": "primary",
|
||||
@@ -181,31 +181,31 @@ page LegendIndicatorDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "legend-indicator-0-2",
|
||||
"key": "legend-indicator-0-2",
|
||||
"value": "secondary",
|
||||
@@ -234,30 +234,30 @@ page LegendIndicatorDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-legend-indicator-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-legend-indicator-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-legend-indicator-class"><span><strong>class</strong><small>string</small></span><input id="playground-legend-indicator-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -152,7 +152,7 @@ page ListGroupDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-list-group-size"><span><strong>size</strong><small>string</small></span><select id="playground-list-group-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-list-group-color"><span><strong>color</strong><small>string</small></span><select id="playground-list-group-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-list-group-title"><span><strong>title</strong><small>string</small></span><input id="playground-list-group-title" name="pg_title" type="text" value="List Group example" /></label><label class="playground-field" for="playground-list-group-description"><span><strong>description</strong><small>string</small></span><input id="playground-list-group-description" name="pg_description" type="text" value="A polished default list group for a modern application." /></label><label class="playground-field" for="playground-list-group-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-list-group-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "list-group-0-1",
|
||||
"key": "list-group-0-1",
|
||||
"value": "primary",
|
||||
@@ -181,31 +181,31 @@ page ListGroupDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "list-group-0-2",
|
||||
"key": "list-group-0-2",
|
||||
"value": "secondary",
|
||||
@@ -234,30 +234,30 @@ page ListGroupDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-list-group-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-list-group-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-list-group-class"><span><strong>class</strong><small>string</small></span><input id="playground-list-group-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -152,7 +152,7 @@ page ListDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-list-size"><span><strong>size</strong><small>string</small></span><select id="playground-list-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-list-color"><span><strong>color</strong><small>string</small></span><select id="playground-list-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-list-title"><span><strong>title</strong><small>string</small></span><input id="playground-list-title" name="pg_title" type="text" value="List example" /></label><label class="playground-field" for="playground-list-description"><span><strong>description</strong><small>string</small></span><input id="playground-list-description" name="pg_description" type="text" value="A polished default list for a modern application." /></label><label class="playground-field" for="playground-list-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-list-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "list-0-1",
|
||||
"key": "list-0-1",
|
||||
"value": "primary",
|
||||
@@ -181,31 +181,31 @@ page ListDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "list-0-2",
|
||||
"key": "list-0-2",
|
||||
"value": "secondary",
|
||||
@@ -234,30 +234,30 @@ page ListDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-list-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-list-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-list-class"><span><strong>class</strong><small>string</small></span><input id="playground-list-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -152,7 +152,7 @@ page MapDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-map-size"><span><strong>size</strong><small>string</small></span><select id="playground-map-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-map-color"><span><strong>color</strong><small>string</small></span><select id="playground-map-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-map-title"><span><strong>title</strong><small>string</small></span><input id="playground-map-title" name="pg_title" type="text" value="Map example" /></label><label class="playground-field" for="playground-map-description"><span><strong>description</strong><small>string</small></span><input id="playground-map-description" name="pg_description" type="text" value="A polished default map for a modern application." /></label><label class="playground-field" for="playground-map-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-map-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "map-0-1",
|
||||
"key": "map-0-1",
|
||||
"value": "primary",
|
||||
@@ -181,31 +181,31 @@ page MapDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "map-0-2",
|
||||
"key": "map-0-2",
|
||||
"value": "secondary",
|
||||
@@ -234,30 +234,30 @@ page MapDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-map-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-map-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-map-class"><span><strong>class</strong><small>string</small></span><input id="playground-map-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -152,7 +152,7 @@ page MarqueeDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-marquee-size"><span><strong>size</strong><small>string</small></span><select id="playground-marquee-size" name="pg_size"><option value="default" selected>default</option><option value="sm">sm</option><option value="lg">lg</option><option value="xs">xs</option><option value="md">md</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-marquee-color"><span><strong>color</strong><small>string</small></span><select id="playground-marquee-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-marquee-title"><span><strong>title</strong><small>string</small></span><input id="playground-marquee-title" name="pg_title" type="text" value="Marquee example" /></label><label class="playground-field" for="playground-marquee-description"><span><strong>description</strong><small>string</small></span><input id="playground-marquee-description" name="pg_description" type="text" value="A polished default marquee for a modern application." /></label><label class="playground-field" for="playground-marquee-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-marquee-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "marquee-0-1",
|
||||
"key": "marquee-0-1",
|
||||
"value": "primary",
|
||||
@@ -181,31 +181,31 @@ page MarqueeDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "marquee-0-2",
|
||||
"key": "marquee-0-2",
|
||||
"value": "secondary",
|
||||
@@ -234,30 +234,30 @@ page MarqueeDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-marquee-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-marquee-variant" name="pg_variant"><option value="default" selected>default</option><option value="soft">soft</option><option value="raised">raised</option><option value="outline">outline</option></select></label><label class="playground-field" for="playground-marquee-class"><span><strong>class</strong><small>string</small></span><input id="playground-marquee-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||
page MegaMenuDetail {
|
||||
layout = "showcase"
|
||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Mega Menu"
|
||||
state playground_icon = ctx.url.searchParams.get("pg_icon") ?? ""
|
||||
state playground_columns = JSON.parse(ctx.url.searchParams.get("pg_columns") ?? "[{\"id\":\"mega-menu-0-1\",\"key\":\"mega-menu-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#mega-menu-demo\",\"actionHref\":\"#mega-menu-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"mega-menu-0-2\",\"key\":\"mega-menu-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#mega-menu-demo\",\"actionHref\":\"#mega-menu-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
|
||||
state playground_footer = ctx.url.searchParams.get("pg_footer") ?? ""
|
||||
state playground_defaultOpen = (ctx.url.searchParams.get("pg_defaultOpen") ?? "false") === "true"
|
||||
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"mega-menu-0-1\",\"key\":\"mega-menu-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#mega-menu-demo\",\"actionHref\":\"#mega-menu-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"mega-menu-0-2\",\"key\":\"mega-menu-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#mega-menu-demo\",\"actionHref\":\"#mega-menu-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
|
||||
state playground_active = ctx.url.searchParams.get("pg_active") ?? ""
|
||||
state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
title = "Mega Menu"
|
||||
@@ -22,7 +21,7 @@ page MegaMenuDetail {
|
||||
<span class="showcase-eyebrow">Navigation component</span>
|
||||
<h1>Mega Menu</h1>
|
||||
<p>Theme-aware, responsive mega menu component.</p>
|
||||
<div class="detail-badges"><span>8 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
</div>
|
||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||
</header>
|
||||
@@ -31,12 +30,11 @@ page MegaMenuDetail {
|
||||
<div class="playground-workbench">
|
||||
<div class="playground-preview">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="playground-preview-source" data-playground-preview><MegaMenu color='{playground_color}' size='{playground_size}' label='{playground_label}' icon='{playground_icon}' columns='{playground_columns}' footer='{playground_footer}' defaultOpen='{playground_defaultOpen}' class='{playground_class}' /></div>
|
||||
<div class="playground-preview-source" data-playground-preview><MegaMenu size='{playground_size}' color='{playground_color}' label='{playground_label}' items='{playground_items}' active='{playground_active}' orientation='{playground_orientation}' class='{playground_class}' /></div>
|
||||
<section class="playground-code" aria-label="Current component code">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||
<pre><code data-playground-code><MegaMenu
|
||||
label="Mega Menu"
|
||||
columns='[
|
||||
items='[
|
||||
<span>{</span>
|
||||
"id": "mega-menu-0-1",
|
||||
"key": "mega-menu-0-1",
|
||||
@@ -150,9 +148,9 @@ page MegaMenuDetail {
|
||||
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-mega-menu-color"><span><strong>color</strong><small>string</small></span><select id="playground-mega-menu-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-mega-menu-size"><span><strong>size</strong><small>string</small></span><select id="playground-mega-menu-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-mega-menu-label"><span><strong>label</strong><small>string</small></span><input id="playground-mega-menu-label" name="pg_label" type="text" value="Mega Menu" /></label><label class="playground-field" for="playground-mega-menu-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-mega-menu-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-mega-menu-columns"><span><strong>columns</strong><small>unknown[]</small></span><textarea id="playground-mega-menu-columns" name="pg_columns" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-mega-menu-size"><span><strong>size</strong><small>string</small></span><select id="playground-mega-menu-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-mega-menu-color"><span><strong>color</strong><small>string</small></span><select id="playground-mega-menu-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-mega-menu-label"><span><strong>label</strong><small>string</small></span><input id="playground-mega-menu-label" name="pg_label" type="text" value="Mega Menu" /></label><label class="playground-field" for="playground-mega-menu-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-mega-menu-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
"id": "mega-menu-0-1",
|
||||
"key": "mega-menu-0-1",
|
||||
"value": "primary",
|
||||
@@ -181,31 +179,31 @@ page MegaMenuDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "mega-menu-0-2",
|
||||
"key": "mega-menu-0-2",
|
||||
"value": "secondary",
|
||||
@@ -234,31 +232,31 @@ page MegaMenuDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-mega-menu-footer"><span><strong>footer</strong><small>string</small></span><input id="playground-mega-menu-footer" name="pg_footer" type="text" value="" /></label><label class="playground-toggle" for="playground-mega-menu-defaultOpen"><span><strong>default Open</strong><small>boolean</small></span><input id="playground-mega-menu-defaultOpen" name="pg_defaultOpen" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-mega-menu-class"><span><strong>class</strong><small>string</small></span><input id="playground-mega-menu-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-mega-menu-active"><span><strong>active</strong><small>string</small></span><input id="playground-mega-menu-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-mega-menu-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-mega-menu-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-mega-menu-class"><span><strong>class</strong><small>string</small></span><input id="playground-mega-menu-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -267,49 +265,123 @@ page MegaMenuDetail {
|
||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Grouped columns</h2><p>One level deep by design: a mega menu shows breadth flat so everything is one click away. Nesting inside the panel would bury content behind hover-within-hover. Use Nav when you want cascading submenus.</p></div>
|
||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
||||
<span class="demo-case-number">01</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="mega-menu-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><MegaMenu size="default" label="Products" icon="icon-[lucide--box]" columns='[{"heading":"Platform","items":[{"label":"Runtime","href":"/runtime","description":"The browser half of the framework."},{"label":"Compiler","href":"/compiler","description":"WRN to JavaScript."}]},{"heading":"Tooling","items":[{"label":"CLI","href":"/cli","description":"Scaffold, build and deploy."},{"label":"Editor","href":"/editor","description":"Language server and syntax."}]}]' defaultOpen="false" class="showcase-instance showcase-instance--1" /></div>
|
||||
<div class="demo-render"><MegaMenu size="default" label="Mega Menu" items='[{"id":"mega-menu-0-1","key":"mega-menu-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#mega-menu-demo","actionHref":"#mega-menu-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"mega-menu-0-2","key":"mega-menu-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#mega-menu-demo","actionHref":"#mega-menu-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Grouped columns usage">
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><MegaMenu
|
||||
label="Products"
|
||||
icon="icon-[lucide--box]"
|
||||
columns='[
|
||||
items='[
|
||||
<span>{</span>
|
||||
"heading": "Platform",
|
||||
"id": "mega-menu-0-1",
|
||||
"key": "mega-menu-0-1",
|
||||
"value": "primary",
|
||||
"label": "Primary workflow",
|
||||
"title": "Primary workflow",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "A configurable sample message.",
|
||||
"href": "#mega-menu-demo",
|
||||
"actionHref": "#mega-menu-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--sparkles]",
|
||||
"iconClass": "icon-[lucide--sparkles]",
|
||||
"variant": "primary",
|
||||
"status": "Active",
|
||||
"time": "09:30",
|
||||
"current": true,
|
||||
"selected": true,
|
||||
"checked": true,
|
||||
"disabled": false,
|
||||
"outgoing": false,
|
||||
"open": true,
|
||||
"number": 1,
|
||||
"count": 16,
|
||||
"percentage": 72,
|
||||
"color": "#7c3aed",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Runtime",
|
||||
"href": "/runtime",
|
||||
"description": "The browser half of the framework."
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Compiler",
|
||||
"href": "/compiler",
|
||||
"description": "WRN to JavaScript."
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"heading": "Tooling",
|
||||
"id": "mega-menu-0-2",
|
||||
"key": "mega-menu-0-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#mega-menu-demo",
|
||||
"actionHref": "#mega-menu-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--sparkles]",
|
||||
"iconClass": "icon-[lucide--sparkles]",
|
||||
"variant": "primary",
|
||||
"status": "Active",
|
||||
"time": "09:30",
|
||||
"current": false,
|
||||
"selected": false,
|
||||
"checked": false,
|
||||
"disabled": false,
|
||||
"outgoing": true,
|
||||
"open": true,
|
||||
"number": 2,
|
||||
"count": 32,
|
||||
"percentage": 72,
|
||||
"color": "#7c3aed",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "CLI",
|
||||
"href": "/cli",
|
||||
"description": "Scaffold, build and deploy."
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Editor",
|
||||
"href": "/editor",
|
||||
"description": "Language server and syntax."
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>
|
||||
]'
|
||||
@@ -319,57 +391,256 @@ page MegaMenuDetail {
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Advanced</span><h2>With a footer note</h2><p>The panel is anchored, so the runtime clamp pulls it back inside the viewport instead of letting it hang off a wide layout. On a phone it stops floating and joins the flow.</p></div>
|
||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
||||
<span class="demo-case-number">02</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="mega-menu-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><MegaMenu size="sm" label="Solutions" icon="icon-[lucide--arrow-right]" columns='[{"heading":"By team","items":[{"label":"Engineering","href":"/eng","icon":"icon-[lucide--code]"},{"label":"Design","href":"/design","icon":"icon-[lucide--palette]"},{"label":"Support","href":"/support","icon":"icon-[lucide--life-buoy]"}]},{"heading":"By size","items":[{"label":"Startup","href":"/startup"},{"label":"Enterprise","href":"/enterprise"}]}]' footer="Not sure where to start? Talk to us." defaultOpen="false" class="showcase-instance showcase-instance--2" /></div>
|
||||
<div class="demo-render"><MegaMenu size="sm" label="Compact example" items='[{"id":"mega-menu-1-1","key":"mega-menu-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#mega-menu-demo","actionHref":"#mega-menu-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"mega-menu-1-2","key":"mega-menu-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#mega-menu-demo","actionHref":"#mega-menu-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="With a footer note usage">
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><MegaMenu
|
||||
size="sm"
|
||||
label="Solutions"
|
||||
icon="icon-[lucide--arrow-right]"
|
||||
columns='[
|
||||
label="Compact example"
|
||||
items='[
|
||||
<span>{</span>
|
||||
"heading": "By team",
|
||||
"id": "mega-menu-1-1",
|
||||
"key": "mega-menu-1-1",
|
||||
"value": "primary",
|
||||
"label": "Secondary workflow",
|
||||
"title": "Secondary workflow",
|
||||
"description": "A compact configuration designed for dense application layouts.",
|
||||
"text": "A configurable sample message.",
|
||||
"href": "#mega-menu-demo",
|
||||
"actionHref": "#mega-menu-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--zap]",
|
||||
"iconClass": "icon-[lucide--zap]",
|
||||
"variant": "secondary",
|
||||
"status": "Active",
|
||||
"time": "10:15",
|
||||
"current": true,
|
||||
"selected": true,
|
||||
"checked": true,
|
||||
"disabled": false,
|
||||
"outgoing": false,
|
||||
"open": true,
|
||||
"number": 1,
|
||||
"count": 24,
|
||||
"percentage": 48,
|
||||
"color": "#0284c7",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open secondary workflow 1",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Engineering",
|
||||
"href": "/eng",
|
||||
"icon": "icon-[lucide--code]"
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Design",
|
||||
"href": "/design",
|
||||
"icon": "icon-[lucide--palette]"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Support",
|
||||
"href": "/support",
|
||||
"icon": "icon-[lucide--life-buoy]"
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"heading": "By size",
|
||||
"id": "mega-menu-1-2",
|
||||
"key": "mega-menu-1-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A compact configuration designed for dense application layouts.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#mega-menu-demo",
|
||||
"actionHref": "#mega-menu-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--zap]",
|
||||
"iconClass": "icon-[lucide--zap]",
|
||||
"variant": "secondary",
|
||||
"status": "Active",
|
||||
"time": "10:15",
|
||||
"current": false,
|
||||
"selected": false,
|
||||
"checked": false,
|
||||
"disabled": false,
|
||||
"outgoing": true,
|
||||
"open": true,
|
||||
"number": 2,
|
||||
"count": 48,
|
||||
"percentage": 48,
|
||||
"color": "#0284c7",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open secondary workflow 2",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Startup",
|
||||
"href": "/startup"
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Enterprise",
|
||||
"href": "/enterprise"
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>
|
||||
]'
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
||||
<span class="demo-case-number">03</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="mega-menu-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><MegaMenu size="lg" label="Advanced example" items='[{"id":"mega-menu-2-1","key":"mega-menu-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#mega-menu-demo","actionHref":"#mega-menu-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"mega-menu-2-2","key":"mega-menu-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#mega-menu-demo","actionHref":"#mega-menu-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><MegaMenu
|
||||
size="lg"
|
||||
label="Advanced example"
|
||||
items='[
|
||||
<span>{</span>
|
||||
"id": "mega-menu-2-1",
|
||||
"key": "mega-menu-2-1",
|
||||
"value": "primary",
|
||||
"label": "Advanced workflow",
|
||||
"title": "Advanced workflow",
|
||||
"description": "A richer configuration with more supporting information and actions.",
|
||||
"text": "A configurable sample message.",
|
||||
"href": "#mega-menu-demo",
|
||||
"actionHref": "#mega-menu-demo",
|
||||
"actionLabel": "Explore workflow",
|
||||
"icon": "icon-[lucide--circle-check]",
|
||||
"iconClass": "icon-[lucide--circle-check]",
|
||||
"variant": "success",
|
||||
"status": "Complete",
|
||||
"time": "11:45",
|
||||
"current": true,
|
||||
"selected": true,
|
||||
"checked": true,
|
||||
"disabled": false,
|
||||
"outgoing": false,
|
||||
"open": true,
|
||||
"number": 1,
|
||||
"count": 32,
|
||||
"percentage": 91,
|
||||
"color": "#059669",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open advanced workflow 1",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Unlimited"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"id": "mega-menu-2-2",
|
||||
"key": "mega-menu-2-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A richer configuration with more supporting information and actions.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#mega-menu-demo",
|
||||
"actionHref": "#mega-menu-demo",
|
||||
"actionLabel": "Explore workflow",
|
||||
"icon": "icon-[lucide--circle-check]",
|
||||
"iconClass": "icon-[lucide--circle-check]",
|
||||
"variant": "success",
|
||||
"status": "Complete",
|
||||
"time": "11:45",
|
||||
"current": false,
|
||||
"selected": false,
|
||||
"checked": false,
|
||||
"disabled": true,
|
||||
"outgoing": true,
|
||||
"open": true,
|
||||
"number": 2,
|
||||
"count": 64,
|
||||
"percentage": 91,
|
||||
"color": "#059669",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open advanced workflow 2",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Unlimited"
|
||||
]
|
||||
<span>}</span>
|
||||
]'
|
||||
footer="Not sure where to start? Talk to us."
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
@@ -393,10 +664,10 @@ if (component) registerOutputHandler(component, "close", (payload) => <span>&
|
||||
if (component) registerOutputHandler(component, "select", (payload) => <span>{</span>
|
||||
console.log("select", payload)
|
||||
<span>}</span>)</code></pre></section></div></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Menu"</code></td><td>No</td></tr><tr><td><code>icon</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>columns</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>footer</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>defaultOpen</code></td><td>boolean</td><td><code>false</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Mega Menu"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#mega-menu-demo-1">Grouped columns</a><a href="#mega-menu-demo-2">With a footer note</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#mega-menu-demo-1">Production default</a><a href="#mega-menu-demo-2">Compact application</a><a href="#mega-menu-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
|
||||
@@ -156,7 +156,7 @@ page MetricGridDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-metric-grid-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-metric-grid-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"label": "Public services",
|
||||
"value": "24",
|
||||
"description": "Citizen-facing services available online.",
|
||||
@@ -165,8 +165,8 @@ page MetricGridDetail {
|
||||
"trendLabel": "this release",
|
||||
"trendDirection": "up",
|
||||
"color": "primary"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Police stations",
|
||||
"value": "126",
|
||||
"description": "Searchable station and jurisdiction entries.",
|
||||
@@ -174,8 +174,8 @@ page MetricGridDetail {
|
||||
"trend": "Updated",
|
||||
"trendLabel": "today",
|
||||
"color": "info"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Availability",
|
||||
"value": "99.9",
|
||||
"suffix": "%",
|
||||
@@ -185,7 +185,7 @@ page MetricGridDetail {
|
||||
"trendLabel": "30 days",
|
||||
"trendDirection": "positive",
|
||||
"color": "success"
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-metric-grid-columns"><span><strong>columns</strong><small>number</small></span><input id="playground-metric-grid-columns" name="pg_columns" type="number" value="3" /></label><label class="playground-field" for="playground-metric-grid-tabletColumns"><span><strong>tablet Columns</strong><small>number</small></span><input id="playground-metric-grid-tabletColumns" name="pg_tabletColumns" type="number" value="2" /></label><label class="playground-field" for="playground-metric-grid-mobileColumns"><span><strong>mobile Columns</strong><small>number</small></span><input id="playground-metric-grid-mobileColumns" name="pg_mobileColumns" type="number" value="1" /></label><label class="playground-field" for="playground-metric-grid-gap"><span><strong>gap</strong><small>string</small></span><select id="playground-metric-grid-gap" name="pg_gap"><option value="md" selected>md</option><option value="none">none</option><option value="sm">sm</option><option value="lg">lg</option><option value="xl">xl</option><option value="xs">xs</option><option value="2xl">2xl</option></select></label><label class="playground-toggle" for="playground-metric-grid-equalHeight"><span><strong>equal Height</strong><small>boolean</small></span><input id="playground-metric-grid-equalHeight" name="pg_equalHeight" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-metric-grid-dividers"><span><strong>dividers</strong><small>boolean</small></span><input id="playground-metric-grid-dividers" name="pg_dividers" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-metric-grid-size"><span><strong>size</strong><small>string</small></span><select id="playground-metric-grid-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-metric-grid-color"><span><strong>color</strong><small>string</small></span><select id="playground-metric-grid-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-metric-grid-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-metric-grid-variant" name="pg_variant"><option value="default" selected>default</option><option value="panel">panel</option><option value="soft">soft</option></select></label><label class="playground-field" for="playground-metric-grid-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-metric-grid-maxWidth" name="pg_maxWidth"><option value="full" selected>full</option><option value="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="wide">wide</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-metric-grid-minItemWidth"><span><strong>min Item Width</strong><small>string</small></span><input id="playground-metric-grid-minItemWidth" name="pg_minItemWidth" type="text" value="" /></label><label class="playground-field" for="playground-metric-grid-class"><span><strong>class</strong><small>string</small></span><input id="playground-metric-grid-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -1,14 +1,12 @@
|
||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||
page NavDetail {
|
||||
layout = "showcase"
|
||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Nav"
|
||||
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"nav-0-1\",\"key\":\"nav-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#nav-demo\",\"actionHref\":\"#nav-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"nav-0-2\",\"key\":\"nav-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#nav-demo\",\"actionHref\":\"#nav-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
|
||||
state playground_active = ctx.url.searchParams.get("pg_active") ?? ""
|
||||
state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal"
|
||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Nav"
|
||||
state playground_collapsible = (ctx.url.searchParams.get("pg_collapsible") ?? "true") === "true"
|
||||
state playground_toggleLabel = ctx.url.searchParams.get("pg_toggleLabel") ?? "Nav"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
title = "Nav"
|
||||
@@ -23,16 +21,16 @@ page NavDetail {
|
||||
<span class="showcase-eyebrow">Navigation component</span>
|
||||
<h1>Nav</h1>
|
||||
<p>Theme-aware, responsive nav component.</p>
|
||||
<div class="detail-badges"><span>9 props</span><span>1 slots</span><span>1 outputs</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>2 outputs</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
</div>
|
||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||
</header>
|
||||
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="Nav" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="select">
|
||||
<section id="playground" class="detail-section playground-section" data-playground data-playground-component="Nav" data-playground-public-tag="true" data-playground-has-slot="true" data-playground-events="select,change">
|
||||
<div class="detail-section-heading"><span>Interactive playground</span><h2>Configure Nav</h2><p>Change any prop and inspect the server-rendered component immediately.</p></div>
|
||||
<div class="playground-workbench">
|
||||
<div class="playground-preview">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="playground-preview-source" data-playground-preview><Nav color='{playground_color}' size='{playground_size}' items='{playground_items}' active='{playground_active}' orientation='{playground_orientation}' label='{playground_label}' collapsible='{playground_collapsible}' toggleLabel='{playground_toggleLabel}' class='{playground_class}' /></div>
|
||||
<div class="playground-preview-source" data-playground-preview><Nav size='{playground_size}' color='{playground_color}' label='{playground_label}' items='{playground_items}' active='{playground_active}' orientation='{playground_orientation}' class='{playground_class}' /></div>
|
||||
<section class="playground-code" aria-label="Current component code">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||
<pre><code data-playground-code><Nav
|
||||
@@ -144,17 +142,15 @@ page NavDetail {
|
||||
]
|
||||
<span>}</span>
|
||||
]'
|
||||
label="Nav"
|
||||
toggleLabel="Nav"
|
||||
/></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>9 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-nav-color"><span><strong>color</strong><small>string</small></span><select id="playground-nav-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-nav-size"><span><strong>size</strong><small>string</small></span><select id="playground-nav-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-nav-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-nav-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-nav-size"><span><strong>size</strong><small>string</small></span><select id="playground-nav-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-nav-color"><span><strong>color</strong><small>string</small></span><select id="playground-nav-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-nav-label"><span><strong>label</strong><small>string</small></span><input id="playground-nav-label" name="pg_label" type="text" value="Nav" /></label><label class="playground-field" for="playground-nav-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-nav-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
"id": "nav-0-1",
|
||||
"key": "nav-0-1",
|
||||
"value": "primary",
|
||||
@@ -183,31 +179,31 @@ page NavDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "nav-0-2",
|
||||
"key": "nav-0-2",
|
||||
"value": "secondary",
|
||||
@@ -236,31 +232,31 @@ page NavDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-nav-active"><span><strong>active</strong><small>string</small></span><input id="playground-nav-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-nav-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-nav-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-nav-label"><span><strong>label</strong><small>string</small></span><input id="playground-nav-label" name="pg_label" type="text" value="Nav" /></label><label class="playground-toggle" for="playground-nav-collapsible"><span><strong>collapsible</strong><small>boolean</small></span><input id="playground-nav-collapsible" name="pg_collapsible" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-nav-toggleLabel"><span><strong>toggle Label</strong><small>string</small></span><input id="playground-nav-toggleLabel" name="pg_toggleLabel" type="text" value="Nav" /></label><label class="playground-field" for="playground-nav-class"><span><strong>class</strong><small>string</small></span><input id="playground-nav-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-nav-active"><span><strong>active</strong><small>string</small></span><input id="playground-nav-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-nav-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-nav-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-nav-class"><span><strong>class</strong><small>string</small></span><input id="playground-nav-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -269,163 +265,404 @@ page NavDetail {
|
||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Horizontal links</h2><p>A flat link bar. The active item is marked with aria-current, and the arrow keys move between items.</p></div>
|
||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
||||
<span class="demo-case-number">01</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="nav-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Nav size="default" items='[{"label":"Home","href":"/","value":"home","icon":"icon-[lucide--house]"},{"label":"Inbox","href":"/inbox","value":"inbox","badge":"9"},{"label":"Reports","href":"/reports","value":"reports"},{"label":"Archive","href":"/archive","value":"archive","disabled":true}]' active="inbox" label="Nav" collapsible="true" toggleLabel="Nav" class="showcase-instance showcase-instance--1" /></div>
|
||||
<div class="demo-render"><Nav size="default" label="Nav" items='[{"id":"nav-0-1","key":"nav-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#nav-demo","actionHref":"#nav-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"nav-0-2","key":"nav-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#nav-demo","actionHref":"#nav-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Horizontal links usage">
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Nav
|
||||
items='[
|
||||
<span>{</span>
|
||||
"label": "Home",
|
||||
"href": "/",
|
||||
"value": "home",
|
||||
"icon": "icon-[lucide--house]"
|
||||
"id": "nav-0-1",
|
||||
"key": "nav-0-1",
|
||||
"value": "primary",
|
||||
"label": "Primary workflow",
|
||||
"title": "Primary workflow",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "A configurable sample message.",
|
||||
"href": "#nav-demo",
|
||||
"actionHref": "#nav-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--sparkles]",
|
||||
"iconClass": "icon-[lucide--sparkles]",
|
||||
"variant": "primary",
|
||||
"status": "Active",
|
||||
"time": "09:30",
|
||||
"current": true,
|
||||
"selected": true,
|
||||
"checked": true,
|
||||
"disabled": false,
|
||||
"outgoing": false,
|
||||
"open": true,
|
||||
"number": 1,
|
||||
"count": 16,
|
||||
"percentage": 72,
|
||||
"color": "#7c3aed",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Inbox",
|
||||
"href": "/inbox",
|
||||
"value": "inbox",
|
||||
"badge": "9"
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Reports",
|
||||
"href": "/reports",
|
||||
"value": "reports"
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Archive",
|
||||
"href": "/archive",
|
||||
"value": "archive",
|
||||
"disabled": true
|
||||
"id": "nav-0-2",
|
||||
"key": "nav-0-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#nav-demo",
|
||||
"actionHref": "#nav-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--sparkles]",
|
||||
"iconClass": "icon-[lucide--sparkles]",
|
||||
"variant": "primary",
|
||||
"status": "Active",
|
||||
"time": "09:30",
|
||||
"current": false,
|
||||
"selected": false,
|
||||
"checked": false,
|
||||
"disabled": false,
|
||||
"outgoing": true,
|
||||
"open": true,
|
||||
"number": 2,
|
||||
"count": 32,
|
||||
"percentage": 72,
|
||||
"color": "#7c3aed",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>
|
||||
]'
|
||||
active="inbox"
|
||||
label="Nav"
|
||||
toggleLabel="Nav"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Advanced</span><h2>Nested submenus</h2><p>An item carrying its own items array opens a submenu on hover or focus, to a maximum of three levels. On a phone the submenus stack inline instead of floating, because a hover-opened overlay is unreachable on touch.</p></div>
|
||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
||||
<span class="demo-case-number">02</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="nav-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Nav size="sm" items='[{"label":"Home","href":"/","value":"home"},{"label":"Products","value":"products","items":[{"label":"Overview","href":"/p","value":"p-overview"},{"label":"Platform","value":"p-platform","items":[{"label":"Runtime","href":"/p/runtime","value":"runtime"},{"label":"Compiler","href":"/p/compiler","value":"compiler"}]}]}]' active="p-overview" label="Compact example" collapsible="true" toggleLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
|
||||
<div class="demo-render"><Nav size="sm" label="Compact example" items='[{"id":"nav-1-1","key":"nav-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#nav-demo","actionHref":"#nav-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"nav-1-2","key":"nav-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#nav-demo","actionHref":"#nav-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Nested submenus usage">
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Nav
|
||||
size="sm"
|
||||
label="Compact example"
|
||||
items='[
|
||||
<span>{</span>
|
||||
"label": "Home",
|
||||
"href": "/",
|
||||
"value": "home"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Products",
|
||||
"value": "products",
|
||||
"id": "nav-1-1",
|
||||
"key": "nav-1-1",
|
||||
"value": "primary",
|
||||
"label": "Secondary workflow",
|
||||
"title": "Secondary workflow",
|
||||
"description": "A compact configuration designed for dense application layouts.",
|
||||
"text": "A configurable sample message.",
|
||||
"href": "#nav-demo",
|
||||
"actionHref": "#nav-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--zap]",
|
||||
"iconClass": "icon-[lucide--zap]",
|
||||
"variant": "secondary",
|
||||
"status": "Active",
|
||||
"time": "10:15",
|
||||
"current": true,
|
||||
"selected": true,
|
||||
"checked": true,
|
||||
"disabled": false,
|
||||
"outgoing": false,
|
||||
"open": true,
|
||||
"number": 1,
|
||||
"count": 24,
|
||||
"percentage": 48,
|
||||
"color": "#0284c7",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open secondary workflow 1",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Overview",
|
||||
"href": "/p",
|
||||
"value": "p-overview"
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Platform",
|
||||
"value": "p-platform",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Runtime",
|
||||
"href": "/p/runtime",
|
||||
"value": "runtime"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Compiler",
|
||||
"href": "/p/compiler",
|
||||
"value": "compiler"
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"id": "nav-1-2",
|
||||
"key": "nav-1-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A compact configuration designed for dense application layouts.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#nav-demo",
|
||||
"actionHref": "#nav-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--zap]",
|
||||
"iconClass": "icon-[lucide--zap]",
|
||||
"variant": "secondary",
|
||||
"status": "Active",
|
||||
"time": "10:15",
|
||||
"current": false,
|
||||
"selected": false,
|
||||
"checked": false,
|
||||
"disabled": false,
|
||||
"outgoing": true,
|
||||
"open": true,
|
||||
"number": 2,
|
||||
"count": 48,
|
||||
"percentage": 48,
|
||||
"color": "#0284c7",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open secondary workflow 2",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>
|
||||
]'
|
||||
active="p-overview"
|
||||
label="Compact example"
|
||||
toggleLabel="Compact example"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Vertical rail</h2><p>Vertical orientation switches the arrow keys to up and down.</p></div>
|
||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
||||
<span class="demo-case-number">03</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="nav-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Nav size="lg" items='[{"label":"Dashboard","href":"/","value":"dash","icon":"icon-[lucide--gauge]"},{"label":"Team","href":"/team","value":"team","icon":"icon-[lucide--users]"},{"label":"Settings","href":"/settings","value":"settings","icon":"icon-[lucide--settings]"}]' active="team" orientation="vertical" label="Advanced example" collapsible="false" toggleLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div>
|
||||
<div class="demo-render"><Nav size="lg" label="Advanced example" items='[{"id":"nav-2-1","key":"nav-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#nav-demo","actionHref":"#nav-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"nav-2-2","key":"nav-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#nav-demo","actionHref":"#nav-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Vertical rail usage">
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Nav
|
||||
size="lg"
|
||||
label="Advanced example"
|
||||
items='[
|
||||
<span>{</span>
|
||||
"label": "Dashboard",
|
||||
"href": "/",
|
||||
"value": "dash",
|
||||
"icon": "icon-[lucide--gauge]"
|
||||
"id": "nav-2-1",
|
||||
"key": "nav-2-1",
|
||||
"value": "primary",
|
||||
"label": "Advanced workflow",
|
||||
"title": "Advanced workflow",
|
||||
"description": "A richer configuration with more supporting information and actions.",
|
||||
"text": "A configurable sample message.",
|
||||
"href": "#nav-demo",
|
||||
"actionHref": "#nav-demo",
|
||||
"actionLabel": "Explore workflow",
|
||||
"icon": "icon-[lucide--circle-check]",
|
||||
"iconClass": "icon-[lucide--circle-check]",
|
||||
"variant": "success",
|
||||
"status": "Complete",
|
||||
"time": "11:45",
|
||||
"current": true,
|
||||
"selected": true,
|
||||
"checked": true,
|
||||
"disabled": false,
|
||||
"outgoing": false,
|
||||
"open": true,
|
||||
"number": 1,
|
||||
"count": 32,
|
||||
"percentage": 91,
|
||||
"color": "#059669",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open advanced workflow 1",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Team",
|
||||
"href": "/team",
|
||||
"value": "team",
|
||||
"icon": "icon-[lucide--users]"
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Settings",
|
||||
"href": "/settings",
|
||||
"value": "settings",
|
||||
"icon": "icon-[lucide--settings]"
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Unlimited"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"id": "nav-2-2",
|
||||
"key": "nav-2-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A richer configuration with more supporting information and actions.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#nav-demo",
|
||||
"actionHref": "#nav-demo",
|
||||
"actionLabel": "Explore workflow",
|
||||
"icon": "icon-[lucide--circle-check]",
|
||||
"iconClass": "icon-[lucide--circle-check]",
|
||||
"variant": "success",
|
||||
"status": "Complete",
|
||||
"time": "11:45",
|
||||
"current": false,
|
||||
"selected": false,
|
||||
"checked": false,
|
||||
"disabled": true,
|
||||
"outgoing": true,
|
||||
"open": true,
|
||||
"number": 2,
|
||||
"count": 64,
|
||||
"percentage": 91,
|
||||
"color": "#059669",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open advanced workflow 2",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Unlimited"
|
||||
]
|
||||
<span>}</span>
|
||||
]'
|
||||
active="team"
|
||||
orientation="vertical"
|
||||
label="Advanced example"
|
||||
collapsible="false"
|
||||
toggleLabel="Advanced example"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component outputs</span><h2>Receive every typed component output</h2><p>Use declarative output handlers in <code>.wrn</code> files or register a direct output handler from JavaScript. The canonical API exposes <code>payload</code> and does not require <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code><Nav
|
||||
<section id="events" class="detail-section"><div class="detail-section-heading"><span>Component outputs</span><h2>Receive every typed component output</h2><p>Use declarative output handlers in <code>.wrn</code> files or register a direct output handler from JavaScript. The canonical API exposes <code>payload</code> and does not require <code>event.detail</code>.</p></div><div class="detail-events-grid"><div class="detail-events-list"><div><code>@select</code><span>Fires when an item, option, card, or result is selected.</span></div><div><code>@change</code><span>Fires when the component's committed value or selection changes.</span></div></div><div class="detail-event-examples"><section class="demo-code"><header><span><span class="icon-[lucide--braces] size-4" aria-hidden="true"></span>Declarative handlers</span><small>.wrn</small></header><pre><code><Nav
|
||||
@select='console.log(payload)'
|
||||
@change='console.log(payload)'
|
||||
/></code></pre></section><section class="demo-code"><header><span><span class="icon-[lucide--radio] size-4" aria-hidden="true"></span>Direct output handlers</span><small>.js</small></header><pre><code>import <span>{</span> registerOutputHandler <span>}</span> from "@wrnexus/csr/outputs"
|
||||
|
||||
const component = document.querySelector("[data-ui-component=\"Nav\"], [data-component=\"Nav\"]")
|
||||
|
||||
if (component) registerOutputHandler(component, "select", (payload) => <span>{</span>
|
||||
console.log("select", payload)
|
||||
<span>}</span>)
|
||||
|
||||
if (component) registerOutputHandler(component, "change", (payload) => <span>{</span>
|
||||
console.log("change", payload)
|
||||
<span>}</span>)</code></pre></section></div></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Main"</code></td><td>No</td></tr><tr><td><code>collapsible</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>toggleLabel</code></td><td>string</td><td><code>"Menu"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Nav"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#nav-demo-1">Horizontal links</a><a href="#nav-demo-2">Nested submenus</a><a href="#nav-demo-3">Vertical rail</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#nav-demo-1">Production default</a><a href="#nav-demo-2">Compact application</a><a href="#nav-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
|
||||
@@ -325,7 +325,7 @@ page NavbarDetail {
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>13 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-navbar-size"><span><strong>size</strong><small>string</small></span><select id="playground-navbar-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-navbar-color"><span><strong>color</strong><small>string</small></span><select id="playground-navbar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-navbar-label"><span><strong>label</strong><small>string</small></span><input id="playground-navbar-label" name="pg_label" type="text" value="Navbar" /></label><label class="playground-field" for="playground-navbar-topbarLabel"><span><strong>topbar Label</strong><small>string</small></span><input id="playground-navbar-topbarLabel" name="pg_topbarLabel" type="text" value="Navbar" /></label><label class="playground-field" for="playground-navbar-brand"><span><strong>brand</strong><small>Record<string, unknown></small></span><textarea id="playground-navbar-brand" name="pg_brand" rows="5" spellcheck="false" data-playground-json>{
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-navbar-size"><span><strong>size</strong><small>string</small></span><select id="playground-navbar-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-navbar-color"><span><strong>color</strong><small>string</small></span><select id="playground-navbar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-navbar-label"><span><strong>label</strong><small>string</small></span><input id="playground-navbar-label" name="pg_label" type="text" value="Navbar" /></label><label class="playground-field" for="playground-navbar-topbarLabel"><span><strong>topbar Label</strong><small>string</small></span><input id="playground-navbar-topbarLabel" name="pg_topbarLabel" type="text" value="Navbar" /></label><label class="playground-field" for="playground-navbar-brand"><span><strong>brand</strong><small>Record<string, unknown></small></span><textarea id="playground-navbar-brand" name="pg_brand" rows="5" spellcheck="false" data-playground-json>{
|
||||
"id": "navbar-0-1",
|
||||
"key": "navbar-0-1",
|
||||
"value": "primary",
|
||||
@@ -354,31 +354,31 @@ page NavbarDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-navbar-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-navbar-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
}</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-navbar-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-navbar-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
"id": "navbar-0-1",
|
||||
"key": "navbar-0-1",
|
||||
"value": "primary",
|
||||
@@ -407,31 +407,31 @@ page NavbarDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "navbar-0-2",
|
||||
"key": "navbar-0-2",
|
||||
"value": "secondary",
|
||||
@@ -460,32 +460,32 @@ page NavbarDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-navbar-actions"><span><strong>actions</strong><small>unknown[]</small></span><textarea id="playground-navbar-actions" name="pg_actions" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "navbar-0-1",
|
||||
"key": "navbar-0-1",
|
||||
"value": "primary",
|
||||
@@ -514,31 +514,31 @@ page NavbarDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "navbar-0-2",
|
||||
"key": "navbar-0-2",
|
||||
"value": "secondary",
|
||||
@@ -567,30 +567,30 @@ page NavbarDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-navbar-active"><span><strong>active</strong><small>string</small></span><input id="playground-navbar-active" name="pg_active" type="text" value="" /></label><label class="playground-toggle" for="playground-navbar-sticky"><span><strong>sticky</strong><small>boolean</small></span><input id="playground-navbar-sticky" name="pg_sticky" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-navbar-openOnHover"><span><strong>open On Hover</strong><small>boolean</small></span><input id="playground-navbar-openOnHover" name="pg_openOnHover" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-navbar-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-navbar-maxWidth" name="pg_maxWidth"><option value="full" selected>full</option><option value="compact">compact</option><option value="lg">lg</option><option value="xl">xl</option><option value="wide">wide</option><option value="2xl">2xl</option></select></label><label class="playground-field" for="playground-navbar-mobileLabel"><span><strong>mobile Label</strong><small>string</small></span><input id="playground-navbar-mobileLabel" name="pg_mobileLabel" type="text" value="Navbar" /></label><label class="playground-field" for="playground-navbar-class"><span><strong>class</strong><small>string</small></span><input id="playground-navbar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -607,7 +607,7 @@ page NavbarDetail {
|
||||
<div id="navbar-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Navbar size="default" label="Navbar" topbarLabel="Navbar" brand='({"id":"navbar-0-1","key":"navbar-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]})' items='[{"id":"navbar-0-1","key":"navbar-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"navbar-0-2","key":"navbar-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' actions='[{"id":"navbar-0-1","key":"navbar-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"navbar-0-2","key":"navbar-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' sticky="false" openOnHover="false" mobileLabel="Navbar" class="showcase-instance showcase-instance--1" /></div>
|
||||
<div class="demo-render"><Navbar size="default" label="Navbar" topbarLabel="Navbar" brand='{"id":"navbar-0-1","key":"navbar-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}' items='[{"id":"navbar-0-1","key":"navbar-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"navbar-0-2","key":"navbar-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' actions='[{"id":"navbar-0-1","key":"navbar-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"navbar-0-2","key":"navbar-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' sticky="false" openOnHover="false" mobileLabel="Navbar" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -903,7 +903,7 @@ page NavbarDetail {
|
||||
<div id="navbar-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Navbar size="sm" label="Compact example" topbarLabel="Compact example" brand='({"id":"navbar-1-1","key":"navbar-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]})' items='[{"id":"navbar-1-1","key":"navbar-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"navbar-1-2","key":"navbar-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' actions='[{"id":"navbar-1-1","key":"navbar-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"navbar-1-2","key":"navbar-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' sticky="false" openOnHover="false" mobileLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
|
||||
<div class="demo-render"><Navbar size="sm" label="Compact example" topbarLabel="Compact example" brand='{"id":"navbar-1-1","key":"navbar-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}' items='[{"id":"navbar-1-1","key":"navbar-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"navbar-1-2","key":"navbar-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' actions='[{"id":"navbar-1-1","key":"navbar-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"navbar-1-2","key":"navbar-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' sticky="false" openOnHover="false" mobileLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
@@ -1200,7 +1200,7 @@ page NavbarDetail {
|
||||
<div id="navbar-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Navbar size="lg" label="Advanced example" topbarLabel="Advanced example" brand='({"id":"navbar-2-1","key":"navbar-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]})' items='[{"id":"navbar-2-1","key":"navbar-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"navbar-2-2","key":"navbar-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' actions='[{"id":"navbar-2-1","key":"navbar-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"navbar-2-2","key":"navbar-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' sticky="false" openOnHover="false" mobileLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div>
|
||||
<div class="demo-render"><Navbar size="lg" label="Advanced example" topbarLabel="Advanced example" brand='{"id":"navbar-2-1","key":"navbar-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}' items='[{"id":"navbar-2-1","key":"navbar-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"navbar-2-2","key":"navbar-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' actions='[{"id":"navbar-2-1","key":"navbar-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"navbar-2-2","key":"navbar-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#navbar-demo","actionHref":"#navbar-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' sticky="false" openOnHover="false" mobileLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
|
||||
@@ -183,19 +183,19 @@ page PageHeaderDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>25 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-page-header-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-page-header-eyebrow" name="pg_eyebrow" type="text" value="" /></label><label class="playground-field" for="playground-page-header-title"><span><strong>title</strong><small>string</small></span><input id="playground-page-header-title" name="pg_title" type="text" value="Page Header example" /></label><label class="playground-field" for="playground-page-header-description"><span><strong>description</strong><small>string</small></span><input id="playground-page-header-description" name="pg_description" type="text" value="A polished default page header for a modern application." /></label><label class="playground-field" for="playground-page-header-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-page-header-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-page-header-id"><span><strong>id</strong><small>string</small></span><input id="playground-page-header-id" name="pg_id" type="text" value="page-title" /></label><label class="playground-field" for="playground-page-header-align"><span><strong>align</strong><small>string</small></span><select id="playground-page-header-align" name="pg_align"><option value="start" selected>start</option><option value="left">left</option><option value="center">center</option><option value="right">right</option><option value="end">end</option><option value="stretch">stretch</option></select></label><label class="playground-toggle" for="playground-page-header-centered"><span><strong>centered</strong><small>boolean</small></span><input id="playground-page-header-centered" name="pg_centered" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-page-header-compact"><span><strong>compact</strong><small>boolean</small></span><input id="playground-page-header-compact" name="pg_compact" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-page-header-size"><span><strong>size</strong><small>string</small></span><select id="playground-page-header-size" name="pg_size"><option value="default" selected>default</option><option value="small">small</option><option value="large">large</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-page-header-maxWidth"><span><strong>max Width</strong><small>string</small></span><select id="playground-page-header-maxWidth" name="pg_maxWidth"><option value="full" selected>full</option><option value="xl">xl</option><option value="compact">compact</option><option value="lg">lg</option><option value="wide">wide</option><option value="2xl">2xl</option></select></label><label class="playground-toggle" for="playground-page-header-showBreadcrumbs"><span><strong>show Breadcrumbs</strong><small>boolean</small></span><input id="playground-page-header-showBreadcrumbs" name="pg_showBreadcrumbs" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-page-header-breadcrumbs"><span><strong>breadcrumbs</strong><small>unknown[]</small></span><textarea id="playground-page-header-breadcrumbs" name="pg_breadcrumbs" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"label": "Home",
|
||||
"href": "/",
|
||||
"icon": "icon-[lucide--house]"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Components",
|
||||
"href": "/base"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Page header",
|
||||
"current": true
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-page-header-breadcrumbParent"><span><strong>breadcrumb Parent</strong><small>string</small></span><input id="playground-page-header-breadcrumbParent" name="pg_breadcrumbParent" type="text" value="" /></label><label class="playground-field" for="playground-page-header-breadcrumbParentHref"><span><strong>breadcrumb Parent Href</strong><small>string</small></span><input id="playground-page-header-breadcrumbParentHref" name="pg_breadcrumbParentHref" type="text" value="#page-header-demo" /></label><label class="playground-field" for="playground-page-header-breadcrumbCurrent"><span><strong>breadcrumb Current</strong><small>string</small></span><input id="playground-page-header-breadcrumbCurrent" name="pg_breadcrumbCurrent" type="text" value="" /></label><label class="playground-field" for="playground-page-header-primaryLabel"><span><strong>primary Label</strong><small>string</small></span><input id="playground-page-header-primaryLabel" name="pg_primaryLabel" type="text" value="Page Header" /></label><label class="playground-field" for="playground-page-header-primaryHref"><span><strong>primary Href</strong><small>string</small></span><input id="playground-page-header-primaryHref" name="pg_primaryHref" type="text" value="#page-header-demo" /></label><label class="playground-field" for="playground-page-header-primaryIcon"><span><strong>primary Icon</strong><small>string</small></span><input id="playground-page-header-primaryIcon" name="pg_primaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-page-header-secondaryLabel"><span><strong>secondary Label</strong><small>string</small></span><input id="playground-page-header-secondaryLabel" name="pg_secondaryLabel" type="text" value="Page Header" /></label><label class="playground-field" for="playground-page-header-secondaryHref"><span><strong>secondary Href</strong><small>string</small></span><input id="playground-page-header-secondaryHref" name="pg_secondaryHref" type="text" value="#page-header-demo" /></label><label class="playground-field" for="playground-page-header-secondaryIcon"><span><strong>secondary Icon</strong><small>string</small></span><input id="playground-page-header-secondaryIcon" name="pg_secondaryIcon" type="text" value="" /></label><label class="playground-field" for="playground-page-header-color"><span><strong>color</strong><small>string</small></span><select id="playground-page-header-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="info">info</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option></select></label><label class="playground-field" for="playground-page-header-variant"><span><strong>variant</strong><small>string</small></span><select id="playground-page-header-variant" name="pg_variant"><option value="default" selected>default</option><option value="minimal">minimal</option><option value="soft">soft</option><option value="raised">raised</option><option value="tinted">tinted</option><option value="solid">solid</option></select></label><label class="playground-toggle" for="playground-page-header-borderBottom"><span><strong>border Bottom</strong><small>boolean</small></span><input id="playground-page-header-borderBottom" name="pg_borderBottom" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-page-header-class"><span><strong>class</strong><small>string</small></span><input id="playground-page-header-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -1,17 +1,12 @@
|
||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||
page PaginationDetail {
|
||||
layout = "showcase"
|
||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||
state playground_page = Number(ctx.url.searchParams.get("pg_page") ?? "3")
|
||||
state playground_pageSize = Number(ctx.url.searchParams.get("pg_pageSize") ?? "3")
|
||||
state playground_total = Number(ctx.url.searchParams.get("pg_total") ?? "3")
|
||||
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "compact"
|
||||
state playground_siblingCount = Number(ctx.url.searchParams.get("pg_siblingCount") ?? "3")
|
||||
state playground_showSummary = (ctx.url.searchParams.get("pg_showSummary") ?? "true") === "true"
|
||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Pagination"
|
||||
state playground_previousLabel = ctx.url.searchParams.get("pg_previousLabel") ?? "Pagination"
|
||||
state playground_nextLabel = ctx.url.searchParams.get("pg_nextLabel") ?? "Pagination"
|
||||
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"pagination-0-1\",\"key\":\"pagination-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#pagination-demo\",\"actionHref\":\"#pagination-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"pagination-0-2\",\"key\":\"pagination-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#pagination-demo\",\"actionHref\":\"#pagination-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
|
||||
state playground_active = ctx.url.searchParams.get("pg_active") ?? ""
|
||||
state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
title = "Pagination"
|
||||
@@ -26,7 +21,7 @@ page PaginationDetail {
|
||||
<span class="showcase-eyebrow">Navigation component</span>
|
||||
<h1>Pagination</h1>
|
||||
<p>Theme-aware, responsive pagination component.</p>
|
||||
<div class="detail-badges"><span>12 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
<div class="detail-badges"><span>7 props</span><span>1 slots</span><span>3 outputs</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
</div>
|
||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||
</header>
|
||||
@@ -35,24 +30,233 @@ page PaginationDetail {
|
||||
<div class="playground-workbench">
|
||||
<div class="playground-preview">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="playground-preview-source" data-playground-preview><Pagination color='{playground_color}' size='{playground_size}' page='{playground_page}' pageSize='{playground_pageSize}' total='{playground_total}' variant='{playground_variant}' siblingCount='{playground_siblingCount}' showSummary='{playground_showSummary}' label='{playground_label}' previousLabel='{playground_previousLabel}' nextLabel='{playground_nextLabel}' class='{playground_class}' /></div>
|
||||
<div class="playground-preview-source" data-playground-preview><Pagination size='{playground_size}' color='{playground_color}' label='{playground_label}' items='{playground_items}' active='{playground_active}' orientation='{playground_orientation}' class='{playground_class}' /></div>
|
||||
<section class="playground-code" aria-label="Current component code">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||
<pre><code data-playground-code><Pagination
|
||||
page="3"
|
||||
pageSize="3"
|
||||
total="3"
|
||||
siblingCount="3"
|
||||
previousLabel="Pagination"
|
||||
nextLabel="Pagination"
|
||||
items='[
|
||||
<span>{</span>
|
||||
"id": "pagination-0-1",
|
||||
"key": "pagination-0-1",
|
||||
"value": "primary",
|
||||
"label": "Primary workflow",
|
||||
"title": "Primary workflow",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "A configurable sample message.",
|
||||
"href": "#pagination-demo",
|
||||
"actionHref": "#pagination-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--sparkles]",
|
||||
"iconClass": "icon-[lucide--sparkles]",
|
||||
"variant": "primary",
|
||||
"status": "Active",
|
||||
"time": "09:30",
|
||||
"current": true,
|
||||
"selected": true,
|
||||
"checked": true,
|
||||
"disabled": false,
|
||||
"outgoing": false,
|
||||
"open": true,
|
||||
"number": 1,
|
||||
"count": 16,
|
||||
"percentage": 72,
|
||||
"color": "#7c3aed",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"id": "pagination-0-2",
|
||||
"key": "pagination-0-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#pagination-demo",
|
||||
"actionHref": "#pagination-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--sparkles]",
|
||||
"iconClass": "icon-[lucide--sparkles]",
|
||||
"variant": "primary",
|
||||
"status": "Active",
|
||||
"time": "09:30",
|
||||
"current": false,
|
||||
"selected": false,
|
||||
"checked": false,
|
||||
"disabled": false,
|
||||
"outgoing": true,
|
||||
"open": true,
|
||||
"number": 2,
|
||||
"count": 32,
|
||||
"percentage": 72,
|
||||
"color": "#7c3aed",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>
|
||||
]'
|
||||
/></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>12 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-pagination-color"><span><strong>color</strong><small>string</small></span><select id="playground-pagination-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-pagination-size"><span><strong>size</strong><small>string</small></span><select id="playground-pagination-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-pagination-page"><span><strong>page</strong><small>number</small></span><input id="playground-pagination-page" name="pg_page" type="number" value="3" /></label><label class="playground-field" for="playground-pagination-pageSize"><span><strong>page Size</strong><small>number</small></span><input id="playground-pagination-pageSize" name="pg_pageSize" type="number" value="3" /></label><label class="playground-field" for="playground-pagination-total"><span><strong>total</strong><small>number</small></span><input id="playground-pagination-total" name="pg_total" type="number" value="3" /></label><label class="playground-field" for="playground-pagination-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-pagination-variant" name="pg_variant" type="text" value="compact" /></label><label class="playground-field" for="playground-pagination-siblingCount"><span><strong>sibling Count</strong><small>number</small></span><input id="playground-pagination-siblingCount" name="pg_siblingCount" type="number" value="3" /></label><label class="playground-toggle" for="playground-pagination-showSummary"><span><strong>show Summary</strong><small>boolean</small></span><input id="playground-pagination-showSummary" name="pg_showSummary" type="checkbox" value="true" checked data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-pagination-label"><span><strong>label</strong><small>string</small></span><input id="playground-pagination-label" name="pg_label" type="text" value="Pagination" /></label><label class="playground-field" for="playground-pagination-previousLabel"><span><strong>previous Label</strong><small>string</small></span><input id="playground-pagination-previousLabel" name="pg_previousLabel" type="text" value="Pagination" /></label><label class="playground-field" for="playground-pagination-nextLabel"><span><strong>next Label</strong><small>string</small></span><input id="playground-pagination-nextLabel" name="pg_nextLabel" type="text" value="Pagination" /></label><label class="playground-field" for="playground-pagination-class"><span><strong>class</strong><small>string</small></span><input id="playground-pagination-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-pagination-size"><span><strong>size</strong><small>string</small></span><select id="playground-pagination-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-pagination-color"><span><strong>color</strong><small>string</small></span><select id="playground-pagination-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-pagination-label"><span><strong>label</strong><small>string</small></span><input id="playground-pagination-label" name="pg_label" type="text" value="Pagination" /></label><label class="playground-field" for="playground-pagination-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-pagination-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
"id": "pagination-0-1",
|
||||
"key": "pagination-0-1",
|
||||
"value": "primary",
|
||||
"label": "Primary workflow",
|
||||
"title": "Primary workflow",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "A configurable sample message.",
|
||||
"href": "#pagination-demo",
|
||||
"actionHref": "#pagination-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--sparkles]",
|
||||
"iconClass": "icon-[lucide--sparkles]",
|
||||
"variant": "primary",
|
||||
"status": "Active",
|
||||
"time": "09:30",
|
||||
"current": true,
|
||||
"selected": true,
|
||||
"checked": true,
|
||||
"disabled": false,
|
||||
"outgoing": false,
|
||||
"open": true,
|
||||
"number": 1,
|
||||
"count": 16,
|
||||
"percentage": 72,
|
||||
"color": "#7c3aed",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "pagination-0-2",
|
||||
"key": "pagination-0-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#pagination-demo",
|
||||
"actionHref": "#pagination-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--sparkles]",
|
||||
"iconClass": "icon-[lucide--sparkles]",
|
||||
"variant": "primary",
|
||||
"status": "Active",
|
||||
"time": "09:30",
|
||||
"current": false,
|
||||
"selected": false,
|
||||
"checked": false,
|
||||
"disabled": false,
|
||||
"outgoing": true,
|
||||
"open": true,
|
||||
"number": 2,
|
||||
"count": 32,
|
||||
"percentage": 72,
|
||||
"color": "#7c3aed",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-pagination-active"><span><strong>active</strong><small>string</small></span><input id="playground-pagination-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-pagination-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-pagination-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-pagination-class"><span><strong>class</strong><small>string</small></span><input id="playground-pagination-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -61,75 +265,382 @@ page PaginationDetail {
|
||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Compact arrows</h2><p>The default: previous and next with a page counter, and a summary of the range in view.</p></div>
|
||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
||||
<span class="demo-case-number">01</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="pagination-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Pagination size="default" page="2" pageSize="10" total="137" variant="compact" siblingCount="3" showSummary="true" label="Pagination" previousLabel="Pagination" nextLabel="Pagination" class="showcase-instance showcase-instance--1" /></div>
|
||||
<div class="demo-render"><Pagination size="default" label="Pagination" items='[{"id":"pagination-0-1","key":"pagination-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#pagination-demo","actionHref":"#pagination-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"pagination-0-2","key":"pagination-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#pagination-demo","actionHref":"#pagination-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact arrows usage">
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Pagination
|
||||
page="2"
|
||||
total="137"
|
||||
siblingCount="3"
|
||||
previousLabel="Pagination"
|
||||
nextLabel="Pagination"
|
||||
items='[
|
||||
<span>{</span>
|
||||
"id": "pagination-0-1",
|
||||
"key": "pagination-0-1",
|
||||
"value": "primary",
|
||||
"label": "Primary workflow",
|
||||
"title": "Primary workflow",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "A configurable sample message.",
|
||||
"href": "#pagination-demo",
|
||||
"actionHref": "#pagination-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--sparkles]",
|
||||
"iconClass": "icon-[lucide--sparkles]",
|
||||
"variant": "primary",
|
||||
"status": "Active",
|
||||
"time": "09:30",
|
||||
"current": true,
|
||||
"selected": true,
|
||||
"checked": true,
|
||||
"disabled": false,
|
||||
"outgoing": false,
|
||||
"open": true,
|
||||
"number": 1,
|
||||
"count": 16,
|
||||
"percentage": 72,
|
||||
"color": "#7c3aed",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"id": "pagination-0-2",
|
||||
"key": "pagination-0-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#pagination-demo",
|
||||
"actionHref": "#pagination-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--sparkles]",
|
||||
"iconClass": "icon-[lucide--sparkles]",
|
||||
"variant": "primary",
|
||||
"status": "Active",
|
||||
"time": "09:30",
|
||||
"current": false,
|
||||
"selected": false,
|
||||
"checked": false,
|
||||
"disabled": false,
|
||||
"outgoing": true,
|
||||
"open": true,
|
||||
"number": 2,
|
||||
"count": 32,
|
||||
"percentage": 72,
|
||||
"color": "#7c3aed",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>
|
||||
]'
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Numbered pages</h2><p>Page numbers windowed around the current page with ellipsis gaps, so a large set never renders hundreds of buttons.</p></div>
|
||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
||||
<span class="demo-case-number">02</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="pagination-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Pagination size="sm" page="5" pageSize="10" total="200" variant="numbered" siblingCount="1" showSummary="true" label="Compact example" previousLabel="Compact example" nextLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
|
||||
<div class="demo-render"><Pagination size="sm" label="Compact example" items='[{"id":"pagination-1-1","key":"pagination-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#pagination-demo","actionHref":"#pagination-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"pagination-1-2","key":"pagination-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#pagination-demo","actionHref":"#pagination-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Numbered pages usage">
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Pagination
|
||||
size="sm"
|
||||
page="5"
|
||||
total="200"
|
||||
variant="numbered"
|
||||
label="Compact example"
|
||||
previousLabel="Compact example"
|
||||
nextLabel="Compact example"
|
||||
items='[
|
||||
<span>{</span>
|
||||
"id": "pagination-1-1",
|
||||
"key": "pagination-1-1",
|
||||
"value": "primary",
|
||||
"label": "Secondary workflow",
|
||||
"title": "Secondary workflow",
|
||||
"description": "A compact configuration designed for dense application layouts.",
|
||||
"text": "A configurable sample message.",
|
||||
"href": "#pagination-demo",
|
||||
"actionHref": "#pagination-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--zap]",
|
||||
"iconClass": "icon-[lucide--zap]",
|
||||
"variant": "secondary",
|
||||
"status": "Active",
|
||||
"time": "10:15",
|
||||
"current": true,
|
||||
"selected": true,
|
||||
"checked": true,
|
||||
"disabled": false,
|
||||
"outgoing": false,
|
||||
"open": true,
|
||||
"number": 1,
|
||||
"count": 24,
|
||||
"percentage": 48,
|
||||
"color": "#0284c7",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open secondary workflow 1",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"id": "pagination-1-2",
|
||||
"key": "pagination-1-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A compact configuration designed for dense application layouts.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#pagination-demo",
|
||||
"actionHref": "#pagination-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--zap]",
|
||||
"iconClass": "icon-[lucide--zap]",
|
||||
"variant": "secondary",
|
||||
"status": "Active",
|
||||
"time": "10:15",
|
||||
"current": false,
|
||||
"selected": false,
|
||||
"checked": false,
|
||||
"disabled": false,
|
||||
"outgoing": true,
|
||||
"open": true,
|
||||
"number": 2,
|
||||
"count": 48,
|
||||
"percentage": 48,
|
||||
"color": "#0284c7",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open secondary workflow 2",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>
|
||||
]'
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Advanced</span><h2>Wider window</h2><p>siblingCount widens how many pages sit either side of the current one.</p></div>
|
||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
||||
<span class="demo-case-number">03</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="pagination-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Pagination size="lg" page="8" pageSize="25" total="900" variant="numbered" siblingCount="2" showSummary="true" label="Advanced example" previousLabel="Advanced example" nextLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div>
|
||||
<div class="demo-render"><Pagination size="lg" label="Advanced example" items='[{"id":"pagination-2-1","key":"pagination-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#pagination-demo","actionHref":"#pagination-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"pagination-2-2","key":"pagination-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#pagination-demo","actionHref":"#pagination-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Wider window usage">
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Pagination
|
||||
size="lg"
|
||||
page="8"
|
||||
pageSize="25"
|
||||
total="900"
|
||||
variant="numbered"
|
||||
siblingCount="2"
|
||||
label="Advanced example"
|
||||
previousLabel="Advanced example"
|
||||
nextLabel="Advanced example"
|
||||
items='[
|
||||
<span>{</span>
|
||||
"id": "pagination-2-1",
|
||||
"key": "pagination-2-1",
|
||||
"value": "primary",
|
||||
"label": "Advanced workflow",
|
||||
"title": "Advanced workflow",
|
||||
"description": "A richer configuration with more supporting information and actions.",
|
||||
"text": "A configurable sample message.",
|
||||
"href": "#pagination-demo",
|
||||
"actionHref": "#pagination-demo",
|
||||
"actionLabel": "Explore workflow",
|
||||
"icon": "icon-[lucide--circle-check]",
|
||||
"iconClass": "icon-[lucide--circle-check]",
|
||||
"variant": "success",
|
||||
"status": "Complete",
|
||||
"time": "11:45",
|
||||
"current": true,
|
||||
"selected": true,
|
||||
"checked": true,
|
||||
"disabled": false,
|
||||
"outgoing": false,
|
||||
"open": true,
|
||||
"number": 1,
|
||||
"count": 32,
|
||||
"percentage": 91,
|
||||
"color": "#059669",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open advanced workflow 1",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Unlimited"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"id": "pagination-2-2",
|
||||
"key": "pagination-2-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A richer configuration with more supporting information and actions.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#pagination-demo",
|
||||
"actionHref": "#pagination-demo",
|
||||
"actionLabel": "Explore workflow",
|
||||
"icon": "icon-[lucide--circle-check]",
|
||||
"iconClass": "icon-[lucide--circle-check]",
|
||||
"variant": "success",
|
||||
"status": "Complete",
|
||||
"time": "11:45",
|
||||
"current": false,
|
||||
"selected": false,
|
||||
"checked": false,
|
||||
"disabled": true,
|
||||
"outgoing": true,
|
||||
"open": true,
|
||||
"number": 2,
|
||||
"count": 64,
|
||||
"percentage": 91,
|
||||
"color": "#059669",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open advanced workflow 2",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Unlimited"
|
||||
]
|
||||
<span>}</span>
|
||||
]'
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
@@ -153,10 +664,10 @@ if (component) registerOutputHandler(component, "previous", (payload) => <spa
|
||||
if (component) registerOutputHandler(component, "next", (payload) => <span>{</span>
|
||||
console.log("next", payload)
|
||||
<span>}</span>)</code></pre></section></div></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>page</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>pageSize</code></td><td>number</td><td><code>10</code></td><td>No</td></tr><tr><td><code>total</code></td><td>number</td><td><code>0</code></td><td>No</td></tr><tr><td><code>variant</code></td><td>string</td><td><code>"compact"</code></td><td>No</td></tr><tr><td><code>siblingCount</code></td><td>number</td><td><code>1</code></td><td>No</td></tr><tr><td><code>showSummary</code></td><td>boolean</td><td><code>true</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Pagination"</code></td><td>No</td></tr><tr><td><code>previousLabel</code></td><td>string</td><td><code>"Previous"</code></td><td>No</td></tr><tr><td><code>nextLabel</code></td><td>string</td><td><code>"Next"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Pagination"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#pagination-demo-1">Compact arrows</a><a href="#pagination-demo-2">Numbered pages</a><a href="#pagination-demo-3">Wider window</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#pagination-demo-1">Production default</a><a href="#pagination-demo-2">Compact application</a><a href="#pagination-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
|
||||
@@ -487,7 +487,7 @@ page PortalDashboardDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>14 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-portal-dashboard-size"><span><strong>size</strong><small>string</small></span><select id="playground-portal-dashboard-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-portal-dashboard-color"><span><strong>color</strong><small>string</small></span><select id="playground-portal-dashboard-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-portal-dashboard-eyebrow"><span><strong>eyebrow</strong><small>string</small></span><input id="playground-portal-dashboard-eyebrow" name="pg_eyebrow" type="text" value="Overview" /></label><label class="playground-field" for="playground-portal-dashboard-eyebrowKey"><span><strong>eyebrow Key</strong><small>string</small></span><input id="playground-portal-dashboard-eyebrowKey" name="pg_eyebrowKey" type="text" value="" /></label><label class="playground-field" for="playground-portal-dashboard-title"><span><strong>title</strong><small>string</small></span><input id="playground-portal-dashboard-title" name="pg_title" type="text" value="Portal Dashboard example" /></label><label class="playground-field" for="playground-portal-dashboard-titleKey"><span><strong>title Key</strong><small>string</small></span><input id="playground-portal-dashboard-titleKey" name="pg_titleKey" type="text" value="" /></label><label class="playground-field" for="playground-portal-dashboard-description"><span><strong>description</strong><small>string</small></span><input id="playground-portal-dashboard-description" name="pg_description" type="text" value="A polished default portal dashboard for a modern application." /></label><label class="playground-field" for="playground-portal-dashboard-descriptionKey"><span><strong>description Key</strong><small>string</small></span><input id="playground-portal-dashboard-descriptionKey" name="pg_descriptionKey" type="text" value="A polished default portal dashboard for a modern application." /></label><label class="playground-field" for="playground-portal-dashboard-userName"><span><strong>user Name</strong><small>string</small></span><input id="playground-portal-dashboard-userName" name="pg_userName" type="text" value="" /></label><label class="playground-field" for="playground-portal-dashboard-metrics"><span><strong>metrics</strong><small>unknown[]</small></span><textarea id="playground-portal-dashboard-metrics" name="pg_metrics" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "portal-dashboard-0-1",
|
||||
"key": "portal-dashboard-0-1",
|
||||
"value": "primary",
|
||||
@@ -516,31 +516,31 @@ page PortalDashboardDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "portal-dashboard-0-2",
|
||||
"key": "portal-dashboard-0-2",
|
||||
"value": "secondary",
|
||||
@@ -569,32 +569,32 @@ page PortalDashboardDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-portal-dashboard-actions"><span><strong>actions</strong><small>unknown[]</small></span><textarea id="playground-portal-dashboard-actions" name="pg_actions" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "portal-dashboard-0-1",
|
||||
"key": "portal-dashboard-0-1",
|
||||
"value": "primary",
|
||||
@@ -623,31 +623,31 @@ page PortalDashboardDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "portal-dashboard-0-2",
|
||||
"key": "portal-dashboard-0-2",
|
||||
"value": "secondary",
|
||||
@@ -676,32 +676,32 @@ page PortalDashboardDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-portal-dashboard-updates"><span><strong>updates</strong><small>unknown[]</small></span><textarea id="playground-portal-dashboard-updates" name="pg_updates" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "portal-dashboard-0-1",
|
||||
"key": "portal-dashboard-0-1",
|
||||
"value": "primary",
|
||||
@@ -730,31 +730,31 @@ page PortalDashboardDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "portal-dashboard-0-2",
|
||||
"key": "portal-dashboard-0-2",
|
||||
"value": "secondary",
|
||||
@@ -783,32 +783,32 @@ page PortalDashboardDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-portal-dashboard-tasks"><span><strong>tasks</strong><small>unknown[]</small></span><textarea id="playground-portal-dashboard-tasks" name="pg_tasks" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "portal-dashboard-0-1",
|
||||
"key": "portal-dashboard-0-1",
|
||||
"value": "primary",
|
||||
@@ -837,31 +837,31 @@ page PortalDashboardDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "portal-dashboard-0-2",
|
||||
"key": "portal-dashboard-0-2",
|
||||
"value": "secondary",
|
||||
@@ -890,30 +890,30 @@ page PortalDashboardDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-portal-dashboard-class"><span><strong>class</strong><small>string</small></span><input id="playground-portal-dashboard-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -170,7 +170,7 @@ page RadioDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>25 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-radio-size"><span><strong>size</strong><small>string</small></span><select id="playground-radio-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-radio-color"><span><strong>color</strong><small>string</small></span><select id="playground-radio-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-radio-id"><span><strong>id</strong><small>string</small></span><input id="playground-radio-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-radio-name"><span><strong>name</strong><small>string</small></span><input id="playground-radio-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-radio-label"><span><strong>label</strong><small>string</small></span><input id="playground-radio-label" name="pg_label" type="text" value="Radio" /></label><label class="playground-toggle" for="playground-radio-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-radio-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-radio-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-radio-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-radio-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-radio-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-radio-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-radio-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-radio-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-radio-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-radio-value"><span><strong>value</strong><small>string</small></span><input id="playground-radio-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-radio-options"><span><strong>options</strong><small>unknown[]</small></span><textarea id="playground-radio-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "radio-0-1",
|
||||
"key": "radio-0-1",
|
||||
"value": "primary",
|
||||
@@ -199,31 +199,31 @@ page RadioDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "radio-0-2",
|
||||
"key": "radio-0-2",
|
||||
"value": "secondary",
|
||||
@@ -252,30 +252,30 @@ page RadioDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-toggle" for="playground-radio-checked"><span><strong>checked</strong><small>boolean</small></span><input id="playground-radio-checked" name="pg_checked" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-radio-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-radio-orientation" name="pg_orientation"><option value="vertical" selected>vertical</option><option value="horizontal">horizontal</option></select></label><label class="playground-toggle" for="playground-radio-card"><span><strong>card</strong><small>boolean</small></span><input id="playground-radio-card" name="pg_card" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-radio-rightAligned"><span><strong>right Aligned</strong><small>boolean</small></span><input id="playground-radio-rightAligned" name="pg_rightAligned" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-radio-list"><span><strong>list</strong><small>boolean</small></span><input id="playground-radio-list" name="pg_list" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-radio-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-radio-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-radio-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-radio-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-radio-error"><span><strong>error</strong><small>string</small></span><input id="playground-radio-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-radio-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-radio-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-radio-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-radio-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-radio-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-radio-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-radio-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-radio-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-radio-class"><span><strong>class</strong><small>string</small></span><input id="playground-radio-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -152,7 +152,7 @@ page RatingDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-rating-size"><span><strong>size</strong><small>string</small></span><select id="playground-rating-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-rating-color"><span><strong>color</strong><small>string</small></span><select id="playground-rating-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-rating-title"><span><strong>title</strong><small>string</small></span><input id="playground-rating-title" name="pg_title" type="text" value="Rating example" /></label><label class="playground-field" for="playground-rating-description"><span><strong>description</strong><small>string</small></span><input id="playground-rating-description" name="pg_description" type="text" value="A polished default rating for a modern application." /></label><label class="playground-field" for="playground-rating-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-rating-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "rating-0-1",
|
||||
"key": "rating-0-1",
|
||||
"value": "primary",
|
||||
@@ -181,31 +181,31 @@ page RatingDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "rating-0-2",
|
||||
"key": "rating-0-2",
|
||||
"value": "secondary",
|
||||
@@ -234,30 +234,30 @@ page RatingDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-rating-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-rating-variant" name="pg_variant" type="text" value="default" /></label><label class="playground-field" for="playground-rating-class"><span><strong>class</strong><small>string</small></span><input id="playground-rating-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||
page ScrollspyDetail {
|
||||
layout = "showcase"
|
||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Scrollspy"
|
||||
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"scrollspy-0-1\",\"key\":\"scrollspy-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#scrollspy-demo\",\"actionHref\":\"#scrollspy-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"scrollspy-0-2\",\"key\":\"scrollspy-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#scrollspy-demo\",\"actionHref\":\"#scrollspy-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
|
||||
state playground_active = ctx.url.searchParams.get("pg_active") ?? ""
|
||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Scrollspy"
|
||||
state playground_heading = ctx.url.searchParams.get("pg_heading") ?? ""
|
||||
state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
title = "Scrollspy"
|
||||
@@ -30,7 +30,7 @@ page ScrollspyDetail {
|
||||
<div class="playground-workbench">
|
||||
<div class="playground-preview">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="playground-preview-source" data-playground-preview><Scrollspy color='{playground_color}' size='{playground_size}' items='{playground_items}' active='{playground_active}' label='{playground_label}' heading='{playground_heading}' class='{playground_class}' /></div>
|
||||
<div class="playground-preview-source" data-playground-preview><Scrollspy size='{playground_size}' color='{playground_color}' label='{playground_label}' items='{playground_items}' active='{playground_active}' orientation='{playground_orientation}' class='{playground_class}' /></div>
|
||||
<section class="playground-code" aria-label="Current component code">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||
<pre><code data-playground-code><Scrollspy
|
||||
@@ -142,7 +142,6 @@ page ScrollspyDetail {
|
||||
]
|
||||
<span>}</span>
|
||||
]'
|
||||
label="Scrollspy"
|
||||
/></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
@@ -150,8 +149,8 @@ page ScrollspyDetail {
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>7 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-scrollspy-color"><span><strong>color</strong><small>string</small></span><select id="playground-scrollspy-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-scrollspy-size"><span><strong>size</strong><small>string</small></span><select id="playground-scrollspy-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-scrollspy-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-scrollspy-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-scrollspy-size"><span><strong>size</strong><small>string</small></span><select id="playground-scrollspy-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-scrollspy-color"><span><strong>color</strong><small>string</small></span><select id="playground-scrollspy-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-scrollspy-label"><span><strong>label</strong><small>string</small></span><input id="playground-scrollspy-label" name="pg_label" type="text" value="Scrollspy" /></label><label class="playground-field" for="playground-scrollspy-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-scrollspy-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
"id": "scrollspy-0-1",
|
||||
"key": "scrollspy-0-1",
|
||||
"value": "primary",
|
||||
@@ -180,31 +179,31 @@ page ScrollspyDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "scrollspy-0-2",
|
||||
"key": "scrollspy-0-2",
|
||||
"value": "secondary",
|
||||
@@ -233,31 +232,31 @@ page ScrollspyDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-scrollspy-active"><span><strong>active</strong><small>string</small></span><input id="playground-scrollspy-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-scrollspy-label"><span><strong>label</strong><small>string</small></span><input id="playground-scrollspy-label" name="pg_label" type="text" value="Scrollspy" /></label><label class="playground-field" for="playground-scrollspy-heading"><span><strong>heading</strong><small>string</small></span><input id="playground-scrollspy-heading" name="pg_heading" type="text" value="" /></label><label class="playground-field" for="playground-scrollspy-class"><span><strong>class</strong><small>string</small></span><input id="playground-scrollspy-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-scrollspy-active"><span><strong>active</strong><small>string</small></span><input id="playground-scrollspy-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-scrollspy-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-scrollspy-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-scrollspy-class"><span><strong>class</strong><small>string</small></span><input id="playground-scrollspy-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -266,75 +265,382 @@ page ScrollspyDetail {
|
||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Table of contents</h2><p>Each href points at an element on the page. The runtime observes those elements and moves aria-current to the link for whichever one is in view, so the marker follows the reader without any component state.</p></div>
|
||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
||||
<span class="demo-case-number">01</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="scrollspy-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Scrollspy size="default" items='[{"label":"Overview","href":"#overview"},{"label":"Installation","href":"#installation"},{"label":"Usage","href":"#usage"},{"label":"API","href":"#api"}]' active="#overview" label="Scrollspy" heading="On this page" class="showcase-instance showcase-instance--1" /></div>
|
||||
<div class="demo-render"><Scrollspy size="default" label="Scrollspy" items='[{"id":"scrollspy-0-1","key":"scrollspy-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#scrollspy-demo","actionHref":"#scrollspy-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"scrollspy-0-2","key":"scrollspy-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#scrollspy-demo","actionHref":"#scrollspy-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Table of contents usage">
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Scrollspy
|
||||
items='[
|
||||
<span>{</span>
|
||||
"label": "Overview",
|
||||
"href": "#overview"
|
||||
"id": "scrollspy-0-1",
|
||||
"key": "scrollspy-0-1",
|
||||
"value": "primary",
|
||||
"label": "Primary workflow",
|
||||
"title": "Primary workflow",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "A configurable sample message.",
|
||||
"href": "#scrollspy-demo",
|
||||
"actionHref": "#scrollspy-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--sparkles]",
|
||||
"iconClass": "icon-[lucide--sparkles]",
|
||||
"variant": "primary",
|
||||
"status": "Active",
|
||||
"time": "09:30",
|
||||
"current": true,
|
||||
"selected": true,
|
||||
"checked": true,
|
||||
"disabled": false,
|
||||
"outgoing": false,
|
||||
"open": true,
|
||||
"number": 1,
|
||||
"count": 16,
|
||||
"percentage": 72,
|
||||
"color": "#7c3aed",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Installation",
|
||||
"href": "#installation"
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Usage",
|
||||
"href": "#usage"
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API",
|
||||
"href": "#api"
|
||||
"id": "scrollspy-0-2",
|
||||
"key": "scrollspy-0-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#scrollspy-demo",
|
||||
"actionHref": "#scrollspy-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--sparkles]",
|
||||
"iconClass": "icon-[lucide--sparkles]",
|
||||
"variant": "primary",
|
||||
"status": "Active",
|
||||
"time": "09:30",
|
||||
"current": false,
|
||||
"selected": false,
|
||||
"checked": false,
|
||||
"disabled": false,
|
||||
"outgoing": true,
|
||||
"open": true,
|
||||
"number": 2,
|
||||
"count": 32,
|
||||
"percentage": 72,
|
||||
"color": "#7c3aed",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>
|
||||
]'
|
||||
active="#overview"
|
||||
label="Scrollspy"
|
||||
heading="On this page"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Advanced</span><h2>Compact rail</h2><p>On a phone the rail becomes a horizontal strip that scrolls, so a long contents list costs one line rather than a screenful.</p></div>
|
||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
||||
<span class="demo-case-number">02</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="scrollspy-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Scrollspy size="sm" items='[{"label":"Getting started","href":"#getting-started"},{"label":"Configuration","href":"#configuration"},{"label":"Troubleshooting","href":"#troubleshooting"}]' active="#configuration" label="Compact example" heading="Sections" class="showcase-instance showcase-instance--2" /></div>
|
||||
<div class="demo-render"><Scrollspy size="sm" label="Compact example" items='[{"id":"scrollspy-1-1","key":"scrollspy-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#scrollspy-demo","actionHref":"#scrollspy-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"scrollspy-1-2","key":"scrollspy-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#scrollspy-demo","actionHref":"#scrollspy-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Compact rail usage">
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Scrollspy
|
||||
size="sm"
|
||||
label="Compact example"
|
||||
items='[
|
||||
<span>{</span>
|
||||
"label": "Getting started",
|
||||
"href": "#getting-started"
|
||||
"id": "scrollspy-1-1",
|
||||
"key": "scrollspy-1-1",
|
||||
"value": "primary",
|
||||
"label": "Secondary workflow",
|
||||
"title": "Secondary workflow",
|
||||
"description": "A compact configuration designed for dense application layouts.",
|
||||
"text": "A configurable sample message.",
|
||||
"href": "#scrollspy-demo",
|
||||
"actionHref": "#scrollspy-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--zap]",
|
||||
"iconClass": "icon-[lucide--zap]",
|
||||
"variant": "secondary",
|
||||
"status": "Active",
|
||||
"time": "10:15",
|
||||
"current": true,
|
||||
"selected": true,
|
||||
"checked": true,
|
||||
"disabled": false,
|
||||
"outgoing": false,
|
||||
"open": true,
|
||||
"number": 1,
|
||||
"count": 24,
|
||||
"percentage": 48,
|
||||
"color": "#0284c7",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open secondary workflow 1",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Configuration",
|
||||
"href": "#configuration"
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Troubleshooting",
|
||||
"href": "#troubleshooting"
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"id": "scrollspy-1-2",
|
||||
"key": "scrollspy-1-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A compact configuration designed for dense application layouts.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#scrollspy-demo",
|
||||
"actionHref": "#scrollspy-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--zap]",
|
||||
"iconClass": "icon-[lucide--zap]",
|
||||
"variant": "secondary",
|
||||
"status": "Active",
|
||||
"time": "10:15",
|
||||
"current": false,
|
||||
"selected": false,
|
||||
"checked": false,
|
||||
"disabled": false,
|
||||
"outgoing": true,
|
||||
"open": true,
|
||||
"number": 2,
|
||||
"count": 48,
|
||||
"percentage": 48,
|
||||
"color": "#0284c7",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open secondary workflow 2",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>
|
||||
]'
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
||||
<span class="demo-case-number">03</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="scrollspy-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Scrollspy size="lg" label="Advanced example" items='[{"id":"scrollspy-2-1","key":"scrollspy-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#scrollspy-demo","actionHref":"#scrollspy-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"scrollspy-2-2","key":"scrollspy-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#scrollspy-demo","actionHref":"#scrollspy-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Scrollspy
|
||||
size="lg"
|
||||
label="Advanced example"
|
||||
items='[
|
||||
<span>{</span>
|
||||
"id": "scrollspy-2-1",
|
||||
"key": "scrollspy-2-1",
|
||||
"value": "primary",
|
||||
"label": "Advanced workflow",
|
||||
"title": "Advanced workflow",
|
||||
"description": "A richer configuration with more supporting information and actions.",
|
||||
"text": "A configurable sample message.",
|
||||
"href": "#scrollspy-demo",
|
||||
"actionHref": "#scrollspy-demo",
|
||||
"actionLabel": "Explore workflow",
|
||||
"icon": "icon-[lucide--circle-check]",
|
||||
"iconClass": "icon-[lucide--circle-check]",
|
||||
"variant": "success",
|
||||
"status": "Complete",
|
||||
"time": "11:45",
|
||||
"current": true,
|
||||
"selected": true,
|
||||
"checked": true,
|
||||
"disabled": false,
|
||||
"outgoing": false,
|
||||
"open": true,
|
||||
"number": 1,
|
||||
"count": 32,
|
||||
"percentage": 91,
|
||||
"color": "#059669",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open advanced workflow 1",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Unlimited"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"id": "scrollspy-2-2",
|
||||
"key": "scrollspy-2-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A richer configuration with more supporting information and actions.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#scrollspy-demo",
|
||||
"actionHref": "#scrollspy-demo",
|
||||
"actionLabel": "Explore workflow",
|
||||
"icon": "icon-[lucide--circle-check]",
|
||||
"iconClass": "icon-[lucide--circle-check]",
|
||||
"variant": "success",
|
||||
"status": "Complete",
|
||||
"time": "11:45",
|
||||
"current": false,
|
||||
"selected": false,
|
||||
"checked": false,
|
||||
"disabled": true,
|
||||
"outgoing": true,
|
||||
"open": true,
|
||||
"number": 2,
|
||||
"count": 64,
|
||||
"percentage": 91,
|
||||
"color": "#059669",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open advanced workflow 2",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Unlimited"
|
||||
]
|
||||
<span>}</span>
|
||||
]'
|
||||
active="#configuration"
|
||||
label="Compact example"
|
||||
heading="Sections"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
@@ -348,10 +654,10 @@ const component = document.querySelector("[data-ui-component=\"Scrollspy\"], [da
|
||||
if (component) registerOutputHandler(component, "change", (payload) => <span>{</span>
|
||||
console.log("change", payload)
|
||||
<span>}</span>)</code></pre></section></div></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"On this page"</code></td><td>No</td></tr><tr><td><code>heading</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Scrollspy"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#scrollspy-demo-1">Table of contents</a><a href="#scrollspy-demo-2">Compact rail</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#scrollspy-demo-1">Production default</a><a href="#scrollspy-demo-2">Compact application</a><a href="#scrollspy-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
|
||||
@@ -275,7 +275,7 @@ page SelectDetail {
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>22 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-select-size"><span><strong>size</strong><small>string</small></span><select id="playground-select-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-select-color"><span><strong>color</strong><small>string</small></span><select id="playground-select-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-select-id"><span><strong>id</strong><small>string</small></span><input id="playground-select-id" name="pg_id" type="text" value="" /></label><label class="playground-field" for="playground-select-name"><span><strong>name</strong><small>string</small></span><input id="playground-select-name" name="pg_name" type="text" value="" /></label><label class="playground-field" for="playground-select-label"><span><strong>label</strong><small>string</small></span><input id="playground-select-label" name="pg_label" type="text" value="Select" /></label><label class="playground-toggle" for="playground-select-hiddenLabel"><span><strong>hidden Label</strong><small>boolean</small></span><input id="playground-select-hiddenLabel" name="pg_hiddenLabel" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-select-value"><span><strong>value</strong><small>string</small></span><input id="playground-select-value" name="pg_value" type="text" value="sample-1" /></label><label class="playground-field" for="playground-select-values"><span><strong>values</strong><small>unknown[]</small></span><textarea id="playground-select-values" name="pg_values" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "select-0-1",
|
||||
"key": "select-0-1",
|
||||
"value": "primary",
|
||||
@@ -304,31 +304,31 @@ page SelectDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "select-0-2",
|
||||
"key": "select-0-2",
|
||||
"value": "secondary",
|
||||
@@ -357,32 +357,32 @@ page SelectDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-select-options"><span><strong>options</strong><small>unknown[]</small></span><textarea id="playground-select-options" name="pg_options" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
{
|
||||
"id": "select-0-1",
|
||||
"key": "select-0-1",
|
||||
"value": "primary",
|
||||
@@ -411,31 +411,31 @@ page SelectDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "select-0-2",
|
||||
"key": "select-0-2",
|
||||
"value": "secondary",
|
||||
@@ -464,30 +464,30 @@ page SelectDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-select-placeholder"><span><strong>placeholder</strong><small>string</small></span><input id="playground-select-placeholder" name="pg_placeholder" type="text" value="Enter a sample value" /></label><label class="playground-field" for="playground-select-variant"><span><strong>variant</strong><small>string</small></span><input id="playground-select-variant" name="pg_variant" type="text" value="normal" /></label><label class="playground-field" for="playground-select-icon"><span><strong>icon</strong><small>string</small></span><input id="playground-select-icon" name="pg_icon" type="text" value="" /></label><label class="playground-field" for="playground-select-iconPosition"><span><strong>icon Position</strong><small>string</small></span><select id="playground-select-iconPosition" name="pg_iconPosition"><option value="start" selected>start</option><option value="end">end</option><option value="left">left</option><option value="right">right</option></select></label><label class="playground-field" for="playground-select-helperText"><span><strong>helper Text</strong><small>string</small></span><input id="playground-select-helperText" name="pg_helperText" type="text" value="" /></label><label class="playground-field" for="playground-select-cornerHint"><span><strong>corner Hint</strong><small>string</small></span><input id="playground-select-cornerHint" name="pg_cornerHint" type="text" value="" /></label><label class="playground-field" for="playground-select-error"><span><strong>error</strong><small>string</small></span><input id="playground-select-error" name="pg_error" type="text" value="" /></label><label class="playground-toggle" for="playground-select-inline"><span><strong>inline</strong><small>boolean</small></span><input id="playground-select-inline" name="pg_inline" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-select-multiple"><span><strong>multiple</strong><small>boolean</small></span><input id="playground-select-multiple" name="pg_multiple" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-select-readonly"><span><strong>readonly</strong><small>boolean</small></span><input id="playground-select-readonly" name="pg_readonly" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-select-disabled"><span><strong>disabled</strong><small>boolean</small></span><input id="playground-select-disabled" name="pg_disabled" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-toggle" for="playground-select-required"><span><strong>required</strong><small>boolean</small></span><input id="playground-select-required" name="pg_required" type="checkbox" value="true" data-playground-boolean /><i aria-hidden="true"></i></label><label class="playground-field" for="playground-select-class"><span><strong>class</strong><small>string</small></span><input id="playground-select-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
// Generated by scripts/generate-showcase.mjs. Do not edit directly.
|
||||
page SidebarDetail {
|
||||
layout = "showcase"
|
||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
|
||||
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
|
||||
state playground_label = ctx.url.searchParams.get("pg_label") ?? "Sidebar"
|
||||
state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"sidebar-0-1\",\"key\":\"sidebar-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#sidebar-demo\",\"actionHref\":\"#sidebar-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"sidebar-0-2\",\"key\":\"sidebar-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#sidebar-demo\",\"actionHref\":\"#sidebar-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
|
||||
state playground_active = ctx.url.searchParams.get("pg_active") ?? ""
|
||||
state playground_orientation = ctx.url.searchParams.get("pg_orientation") ?? "horizontal"
|
||||
state playground_mobileLabel = ctx.url.searchParams.get("pg_mobileLabel") ?? "Sidebar"
|
||||
state playground_drawerTitle = ctx.url.searchParams.get("pg_drawerTitle") ?? "Sidebar example"
|
||||
state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
|
||||
seo {
|
||||
title = "Sidebar"
|
||||
@@ -22,7 +22,7 @@ page SidebarDetail {
|
||||
<span class="showcase-eyebrow">Navigation component</span>
|
||||
<h1>Sidebar</h1>
|
||||
<p>Theme-aware, responsive sidebar component.</p>
|
||||
<div class="detail-badges"><span>8 props</span><span>2 slots</span><span>4 outputs</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
<div class="detail-badges"><span>8 props</span><span>1 slots</span><span>4 outputs</span><span>Theme ready</span><span>Responsive</span></div>
|
||||
</div>
|
||||
<div class="detail-hero-icon"><span class="icon-[lucide--component] size-10" aria-hidden="true"></span></div>
|
||||
</header>
|
||||
@@ -31,7 +31,7 @@ page SidebarDetail {
|
||||
<div class="playground-workbench">
|
||||
<div class="playground-preview">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
<div class="playground-preview-source" data-playground-preview><Sidebar color='{playground_color}' size='{playground_size}' label='{playground_label}' items='{playground_items}' active='{playground_active}' mobileLabel='{playground_mobileLabel}' drawerTitle='{playground_drawerTitle}' class='{playground_class}' /></div>
|
||||
<div class="playground-preview-source" data-playground-preview><Sidebar size='{playground_size}' color='{playground_color}' label='{playground_label}' items='{playground_items}' active='{playground_active}' orientation='{playground_orientation}' mobileLabel='{playground_mobileLabel}' class='{playground_class}' /></div>
|
||||
<section class="playground-code" aria-label="Current component code">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component code</span><button type="button" data-playground-copy><span class="icon-[lucide--copy] size-4" aria-hidden="true"></span>Copy</button></header>
|
||||
<pre><code data-playground-code><Sidebar
|
||||
@@ -144,19 +144,15 @@ page SidebarDetail {
|
||||
<span>}</span>
|
||||
]'
|
||||
mobileLabel="Sidebar"
|
||||
drawerTitle="Sidebar example">
|
||||
<div data-slot="drawer">
|
||||
<div class="showcase-slot">drawer slot</div>
|
||||
</div>
|
||||
</Sidebar></code></pre>
|
||||
/></code></pre>
|
||||
</section>
|
||||
<div class="playground-status" data-playground-status aria-live="polite"></div>
|
||||
<div class="playground-event-log" data-playground-event-log aria-live="polite"><strong>Event output</strong><span>Interact with the preview to inspect the typed <code>payload</code>.</span></div>
|
||||
</div>
|
||||
<form class="playground-controls" data-playground-form>
|
||||
<header><div><span>Component props</span><strong>8 controls</strong></div><button type="reset"><span class="icon-[lucide--rotate-ccw] size-4" aria-hidden="true"></span>Reset</button></header>
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-sidebar-color"><span><strong>color</strong><small>string</small></span><select id="playground-sidebar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-sidebar-size"><span><strong>size</strong><small>string</small></span><select id="playground-sidebar-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-sidebar-label"><span><strong>label</strong><small>string</small></span><input id="playground-sidebar-label" name="pg_label" type="text" value="Sidebar" /></label><label class="playground-field" for="playground-sidebar-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-sidebar-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
<div class="playground-fields"><label class="playground-field" for="playground-sidebar-size"><span><strong>size</strong><small>string</small></span><select id="playground-sidebar-size" name="pg_size"><option value="default" selected>default</option><option value="xs">xs</option><option value="sm">sm</option><option value="md">md</option><option value="lg">lg</option><option value="xl">xl</option><option value="icon">icon</option><option value="icon-xs">icon-xs</option><option value="icon-sm">icon-sm</option><option value="icon-lg">icon-lg</option></select></label><label class="playground-field" for="playground-sidebar-color"><span><strong>color</strong><small>string</small></span><select id="playground-sidebar-color" name="pg_color"><option value="primary" selected>primary</option><option value="secondary">secondary</option><option value="success">success</option><option value="warning">warning</option><option value="danger">danger</option><option value="info">info</option></select></label><label class="playground-field" for="playground-sidebar-label"><span><strong>label</strong><small>string</small></span><input id="playground-sidebar-label" name="pg_label" type="text" value="Sidebar" /></label><label class="playground-field" for="playground-sidebar-items"><span><strong>items</strong><small>unknown[]</small></span><textarea id="playground-sidebar-items" name="pg_items" rows="5" spellcheck="false" data-playground-json>[
|
||||
{
|
||||
"id": "sidebar-0-1",
|
||||
"key": "sidebar-0-1",
|
||||
"value": "primary",
|
||||
@@ -185,31 +181,31 @@ page SidebarDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"id": "sidebar-0-2",
|
||||
"key": "sidebar-0-2",
|
||||
"value": "secondary",
|
||||
@@ -238,31 +234,31 @@ page SidebarDetail {
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
{
|
||||
{
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
}
|
||||
}
|
||||
],
|
||||
"links": [
|
||||
{
|
||||
{
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
}
|
||||
}
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-sidebar-active"><span><strong>active</strong><small>string</small></span><input id="playground-sidebar-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-sidebar-mobileLabel"><span><strong>mobile Label</strong><small>string</small></span><input id="playground-sidebar-mobileLabel" name="pg_mobileLabel" type="text" value="Sidebar" /></label><label class="playground-field" for="playground-sidebar-drawerTitle"><span><strong>drawer Title</strong><small>string</small></span><input id="playground-sidebar-drawerTitle" name="pg_drawerTitle" type="text" value="Sidebar example" /></label><label class="playground-field" for="playground-sidebar-class"><span><strong>class</strong><small>string</small></span><input id="playground-sidebar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
}
|
||||
]</textarea><em data-playground-error></em></label><label class="playground-field" for="playground-sidebar-active"><span><strong>active</strong><small>string</small></span><input id="playground-sidebar-active" name="pg_active" type="text" value="" /></label><label class="playground-field" for="playground-sidebar-orientation"><span><strong>orientation</strong><small>string</small></span><select id="playground-sidebar-orientation" name="pg_orientation"><option value="horizontal" selected>horizontal</option><option value="vertical">vertical</option></select></label><label class="playground-field" for="playground-sidebar-mobileLabel"><span><strong>mobile Label</strong><small>string</small></span><input id="playground-sidebar-mobileLabel" name="pg_mobileLabel" type="text" value="Sidebar" /></label><label class="playground-field" for="playground-sidebar-class"><span><strong>class</strong><small>string</small></span><input id="playground-sidebar-class" name="pg_class" type="text" value="showcase-instance showcase-instance--1" /></label></div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
@@ -271,111 +267,386 @@ page SidebarDetail {
|
||||
<section class="detail-section"><div class="detail-section-heading"><span>Live examples</span><h2>Designed for real product surfaces</h2><p>Compare configurations and resize the browser to check responsive behavior.</p></div><div class="demo-list">
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Groups and nested levels</h2><p>An entry is a single link, a labelled group, or a branch nested up to three levels. Arrow keys move down the rail.</p></div>
|
||||
<div><span class="demo-case-eyebrow">Recommended</span><h2>Production default</h2><p>Balanced spacing, hierarchy, and content for the most common product workflow.</p></div>
|
||||
<span class="demo-case-number">01</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="sidebar-demo-1" class="demo-canvas demo-canvas--1">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Sidebar size="default" label="Workspace" items='[{"label":"Dashboard","href":"/","value":"dash","icon":"icon-[lucide--gauge]"},{"heading":"Projects","items":[{"label":"Active","href":"/active","value":"active","badge":"4"},{"label":"Archive","value":"archive","items":[{"label":"2025","href":"/a/2025","value":"a2025"},{"label":"2024","href":"/a/2024","value":"a2024"}]}]},{"heading":"Account","items":[{"label":"Settings","href":"/settings","value":"settings","icon":"icon-[lucide--settings]"}]}]' active="active" mobileLabel="Sidebar" drawerTitle="Sidebar example" class="showcase-instance showcase-instance--1" /></div>
|
||||
<div class="demo-render"><Sidebar size="default" label="Sidebar" items='[{"id":"sidebar-0-1","key":"sidebar-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#sidebar-demo","actionHref":"#sidebar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"sidebar-0-2","key":"sidebar-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#sidebar-demo","actionHref":"#sidebar-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' mobileLabel="Sidebar" class="showcase-instance showcase-instance--1" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Groups and nested levels usage">
|
||||
<section class="demo-code" aria-label="Production default usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Sidebar
|
||||
label="Workspace"
|
||||
items='[
|
||||
<span>{</span>
|
||||
"label": "Dashboard",
|
||||
"href": "/",
|
||||
"value": "dash",
|
||||
"icon": "icon-[lucide--gauge]"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"heading": "Projects",
|
||||
"id": "sidebar-0-1",
|
||||
"key": "sidebar-0-1",
|
||||
"value": "primary",
|
||||
"label": "Primary workflow",
|
||||
"title": "Primary workflow",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "A configurable sample message.",
|
||||
"href": "#sidebar-demo",
|
||||
"actionHref": "#sidebar-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--sparkles]",
|
||||
"iconClass": "icon-[lucide--sparkles]",
|
||||
"variant": "primary",
|
||||
"status": "Active",
|
||||
"time": "09:30",
|
||||
"current": true,
|
||||
"selected": true,
|
||||
"checked": true,
|
||||
"disabled": false,
|
||||
"outgoing": false,
|
||||
"open": true,
|
||||
"number": 1,
|
||||
"count": 16,
|
||||
"percentage": 72,
|
||||
"color": "#7c3aed",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 1",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Active",
|
||||
"href": "/active",
|
||||
"value": "active",
|
||||
"badge": "4"
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Archive",
|
||||
"value": "archive",
|
||||
"items": [
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "2025",
|
||||
"href": "/a/2025",
|
||||
"value": "a2025"
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "2024",
|
||||
"href": "/a/2024",
|
||||
"value": "a2024"
|
||||
<span>}</span>
|
||||
]
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"heading": "Account",
|
||||
"id": "sidebar-0-2",
|
||||
"key": "sidebar-0-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A clean default configuration for everyday product interfaces.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#sidebar-demo",
|
||||
"actionHref": "#sidebar-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--sparkles]",
|
||||
"iconClass": "icon-[lucide--sparkles]",
|
||||
"variant": "primary",
|
||||
"status": "Active",
|
||||
"time": "09:30",
|
||||
"current": false,
|
||||
"selected": false,
|
||||
"checked": false,
|
||||
"disabled": false,
|
||||
"outgoing": true,
|
||||
"open": true,
|
||||
"number": 2,
|
||||
"count": 32,
|
||||
"percentage": 72,
|
||||
"color": "#7c3aed",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open primary workflow 2",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Settings",
|
||||
"href": "/settings",
|
||||
"value": "settings",
|
||||
"icon": "icon-[lucide--settings]"
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>
|
||||
]'
|
||||
active="active"
|
||||
mobileLabel="Sidebar"
|
||||
drawerTitle="Sidebar example">
|
||||
<div data-slot="drawer">
|
||||
<div class="showcase-slot">drawer slot</div>
|
||||
</div>
|
||||
</Sidebar></code></pre>
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Advanced</span><h2>Drawer on small screens</h2><p>Below the tablet breakpoint the rail is replaced by a launcher that opens a Drawer. Composing Drawer rather than reimplementing it means the focus trap and the body scroll lock come from one place.</p></div>
|
||||
<div><span class="demo-case-eyebrow">Dense UI</span><h2>Compact application</h2><p>A tighter variation for dashboards, side panels, tables, and operational interfaces.</p></div>
|
||||
<span class="demo-case-number">02</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="sidebar-demo-2" class="demo-canvas demo-canvas--2">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Sidebar size="sm" label="Operations" items='[{"label":"Queue","href":"/queue","value":"queue","icon":"icon-[lucide--inbox]"},{"label":"Reports","href":"/reports","value":"reports","icon":"icon-[lucide--chart-no-axes-column]"}]' active="queue" mobileLabel="Open navigation" drawerTitle="Operations" class="showcase-instance showcase-instance--2" /></div>
|
||||
<div class="demo-render"><Sidebar size="sm" label="Compact example" items='[{"id":"sidebar-1-1","key":"sidebar-1-1","value":"primary","label":"Secondary workflow","title":"Secondary workflow","description":"A compact configuration designed for dense application layouts.","text":"A configurable sample message.","href":"#sidebar-demo","actionHref":"#sidebar-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":24,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"sidebar-1-2","key":"sidebar-1-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A compact configuration designed for dense application layouts.","text":"Another configurable message.","href":"#sidebar-demo","actionHref":"#sidebar-demo","actionLabel":"View details","icon":"icon-[lucide--zap]","iconClass":"icon-[lucide--zap]","variant":"secondary","status":"Active","time":"10:15","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":48,"percentage":48,"color":"#0284c7","target":"_self","ariaLabel":"Open secondary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' mobileLabel="Compact example" class="showcase-instance showcase-instance--2" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Drawer on small screens usage">
|
||||
<section class="demo-code" aria-label="Compact application usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Sidebar
|
||||
size="sm"
|
||||
label="Operations"
|
||||
label="Compact example"
|
||||
items='[
|
||||
<span>{</span>
|
||||
"label": "Queue",
|
||||
"href": "/queue",
|
||||
"value": "queue",
|
||||
"icon": "icon-[lucide--inbox]"
|
||||
"id": "sidebar-1-1",
|
||||
"key": "sidebar-1-1",
|
||||
"value": "primary",
|
||||
"label": "Secondary workflow",
|
||||
"title": "Secondary workflow",
|
||||
"description": "A compact configuration designed for dense application layouts.",
|
||||
"text": "A configurable sample message.",
|
||||
"href": "#sidebar-demo",
|
||||
"actionHref": "#sidebar-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--zap]",
|
||||
"iconClass": "icon-[lucide--zap]",
|
||||
"variant": "secondary",
|
||||
"status": "Active",
|
||||
"time": "10:15",
|
||||
"current": true,
|
||||
"selected": true,
|
||||
"checked": true,
|
||||
"disabled": false,
|
||||
"outgoing": false,
|
||||
"open": true,
|
||||
"number": 1,
|
||||
"count": 24,
|
||||
"percentage": 48,
|
||||
"color": "#0284c7",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open secondary workflow 1",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Reports",
|
||||
"href": "/reports",
|
||||
"value": "reports",
|
||||
"icon": "icon-[lucide--chart-no-axes-column]"
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"id": "sidebar-1-2",
|
||||
"key": "sidebar-1-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A compact configuration designed for dense application layouts.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#sidebar-demo",
|
||||
"actionHref": "#sidebar-demo",
|
||||
"actionLabel": "View details",
|
||||
"icon": "icon-[lucide--zap]",
|
||||
"iconClass": "icon-[lucide--zap]",
|
||||
"variant": "secondary",
|
||||
"status": "Active",
|
||||
"time": "10:15",
|
||||
"current": false,
|
||||
"selected": false,
|
||||
"checked": false,
|
||||
"disabled": false,
|
||||
"outgoing": true,
|
||||
"open": true,
|
||||
"number": 2,
|
||||
"count": 48,
|
||||
"percentage": 48,
|
||||
"color": "#0284c7",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open secondary workflow 2",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Standard"
|
||||
]
|
||||
<span>}</span>
|
||||
]'
|
||||
active="queue"
|
||||
drawerTitle="Operations">
|
||||
<div data-slot="drawer">
|
||||
<div class="showcase-slot">drawer slot</div>
|
||||
</div>
|
||||
</Sidebar></code></pre>
|
||||
mobileLabel="Compact example"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article>
|
||||
<article class="demo-case">
|
||||
<header class="demo-case-header">
|
||||
<div><span class="demo-case-eyebrow">Extended</span><h2>Rich configuration</h2><p>A more expressive variation using additional data, stronger emphasis, and optional states.</p></div>
|
||||
<span class="demo-case-number">03</span>
|
||||
</header>
|
||||
<div class="demo-workbench">
|
||||
<div id="sidebar-demo-3" class="demo-canvas demo-canvas--3">
|
||||
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
|
||||
|
||||
<div class="demo-render"><Sidebar size="lg" label="Advanced example" items='[{"id":"sidebar-2-1","key":"sidebar-2-1","value":"primary","label":"Advanced workflow","title":"Advanced workflow","description":"A richer configuration with more supporting information and actions.","text":"A configurable sample message.","href":"#sidebar-demo","actionHref":"#sidebar-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":32,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]},{"id":"sidebar-2-2","key":"sidebar-2-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A richer configuration with more supporting information and actions.","text":"Another configurable message.","href":"#sidebar-demo","actionHref":"#sidebar-demo","actionLabel":"Explore workflow","icon":"icon-[lucide--circle-check]","iconClass":"icon-[lucide--circle-check]","variant":"success","status":"Complete","time":"11:45","current":false,"selected":false,"checked":false,"disabled":true,"outgoing":true,"open":true,"number":2,"count":64,"percentage":91,"color":"#059669","target":"_self","ariaLabel":"Open advanced workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Unlimited"]}]' mobileLabel="Advanced example" class="showcase-instance showcase-instance--3" /></div>
|
||||
</div>
|
||||
<section class="demo-code" aria-label="Rich configuration usage">
|
||||
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
|
||||
<pre><code><Sidebar
|
||||
size="lg"
|
||||
label="Advanced example"
|
||||
items='[
|
||||
<span>{</span>
|
||||
"id": "sidebar-2-1",
|
||||
"key": "sidebar-2-1",
|
||||
"value": "primary",
|
||||
"label": "Advanced workflow",
|
||||
"title": "Advanced workflow",
|
||||
"description": "A richer configuration with more supporting information and actions.",
|
||||
"text": "A configurable sample message.",
|
||||
"href": "#sidebar-demo",
|
||||
"actionHref": "#sidebar-demo",
|
||||
"actionLabel": "Explore workflow",
|
||||
"icon": "icon-[lucide--circle-check]",
|
||||
"iconClass": "icon-[lucide--circle-check]",
|
||||
"variant": "success",
|
||||
"status": "Complete",
|
||||
"time": "11:45",
|
||||
"current": true,
|
||||
"selected": true,
|
||||
"checked": true,
|
||||
"disabled": false,
|
||||
"outgoing": false,
|
||||
"open": true,
|
||||
"number": 1,
|
||||
"count": 32,
|
||||
"percentage": 91,
|
||||
"color": "#059669",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open advanced workflow 1",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Unlimited"
|
||||
]
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"id": "sidebar-2-2",
|
||||
"key": "sidebar-2-2",
|
||||
"value": "secondary",
|
||||
"label": "Additional option",
|
||||
"title": "Supporting example",
|
||||
"description": "A richer configuration with more supporting information and actions.",
|
||||
"text": "Another configurable message.",
|
||||
"href": "#sidebar-demo",
|
||||
"actionHref": "#sidebar-demo",
|
||||
"actionLabel": "Explore workflow",
|
||||
"icon": "icon-[lucide--circle-check]",
|
||||
"iconClass": "icon-[lucide--circle-check]",
|
||||
"variant": "success",
|
||||
"status": "Complete",
|
||||
"time": "11:45",
|
||||
"current": false,
|
||||
"selected": false,
|
||||
"checked": false,
|
||||
"disabled": true,
|
||||
"outgoing": true,
|
||||
"open": true,
|
||||
"number": 2,
|
||||
"count": 64,
|
||||
"percentage": 91,
|
||||
"color": "#059669",
|
||||
"target": "_self",
|
||||
"ariaLabel": "Open advanced workflow 2",
|
||||
"items": [
|
||||
<span>{</span>
|
||||
"label": "Nested option A",
|
||||
"value": "nested-a"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "Nested option B",
|
||||
"value": "nested-b"
|
||||
<span>}</span>
|
||||
],
|
||||
"links": [
|
||||
<span>{</span>
|
||||
"label": "Documentation",
|
||||
"href": "#documentation"
|
||||
<span>}</span>,
|
||||
<span>{</span>
|
||||
"label": "API reference",
|
||||
"href": "#api-reference"
|
||||
<span>}</span>
|
||||
],
|
||||
"values": [
|
||||
"Included",
|
||||
"Unlimited"
|
||||
]
|
||||
<span>}</span>
|
||||
]'
|
||||
mobileLabel="Advanced example"
|
||||
/></code></pre>
|
||||
</section>
|
||||
</div>
|
||||
</article></div></section>
|
||||
@@ -403,10 +674,10 @@ if (component) registerOutputHandler(component, "close", (payload) => <span>&
|
||||
if (component) registerOutputHandler(component, "select", (payload) => <span>{</span>
|
||||
console.log("select", payload)
|
||||
<span>}</span>)</code></pre></section></div></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Sidebar"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>mobileLabel</code></td><td>string</td><td><code>"Open navigation"</code></td><td>No</td></tr><tr><td><code>drawerTitle</code></td><td>string</td><td><code>"Navigation"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
<section id="api" class="detail-section"><div class="detail-section-heading"><span>Component API</span><h2>Props and configuration</h2><p>All content and behavior shown above is supplied through these props and slots.</p></div><div class="docs-table-wrap"><table class="docs-table"><thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Required</th></tr></thead><tbody><tr><td><code>size</code></td><td>string</td><td><code>"default"</code></td><td>No</td></tr><tr><td><code>color</code></td><td>string</td><td><code>"primary"</code></td><td>No</td></tr><tr><td><code>label</code></td><td>string</td><td><code>"Sidebar"</code></td><td>No</td></tr><tr><td><code>items</code></td><td>unknown[]</td><td><code>[]</code></td><td>No</td></tr><tr><td><code>active</code></td><td>string</td><td><code>""</code></td><td>No</td></tr><tr><td><code>orientation</code></td><td>string</td><td><code>"horizontal"</code></td><td>No</td></tr><tr><td><code>mobileLabel</code></td><td>string</td><td><code>"Open navigation"</code></td><td>No</td></tr><tr><td><code>class</code></td><td>string</td><td><code>""</code></td><td>No</td></tr></tbody></table></div></section>
|
||||
</main>
|
||||
<aside class="detail-aside">
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#sidebar-demo-1">Groups and nested levels</a><a href="#sidebar-demo-2">Drawer on small screens</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
<div class="detail-toc"><strong>On this page</strong><a href="#playground">Playground</a><a href="#sidebar-demo-1">Production default</a><a href="#sidebar-demo-2">Compact application</a><a href="#sidebar-demo-3">Rich configuration</a><a href="#events">Outputs</a><a href="#api">Props API</a></div>
|
||||
</aside>
|
||||
</div>
|
||||
<nav class="detail-pagination">
|
||||
|
||||
File diff suppressed because one or more lines are too long
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user