Advanced Forms Toggle Password Accessible password field with optional show and hide controls.
diff --git a/app/pages/base.wrn b/app/pages/base.wrn
index 741a3d6..a0500a9 100644
--- a/app/pages/base.wrn
+++ b/app/pages/base.wrn
@@ -3,284 +3,274 @@ page BaseShowcase {
layout = "showcase"
seo {
title = "Base components"
- description = "27 base components from @wrnexus/ui."
+ description = "26 base components from @wrnexus/ui."
}
view {
Component category
Base
- 27 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.
- 27 components Multiple use cases 169 live configurations
+ 26 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.
+ 26 components Multiple use cases 83 live configurations
-
+
Base Accordion Theme-aware, responsive accordion component.
-
+
Base Alert Theme-aware, responsive alert component.
-
+
Base Avatar Theme-aware, responsive avatar component.
-
+
Base Avatar Group Theme-aware, responsive avatar group component.
-
+
Base Badge Theme-aware, responsive badge component.
-
+
Base Blockquote Theme-aware, responsive blockquote component.
-
+
Base Button Theme-aware, responsive button component.
-
+
Base Button Group Theme-aware, responsive button group component.
-
+
-
+
Supporting content belongs inside the default slot.
-
Base Card Theme-aware, responsive card component.
+
Base Card Group related content in a responsive themed surface with title, description, content, and supporting slots.
-
+
Base Carousel Theme-aware, responsive carousel component.
-
+
Base Chat Bubble Theme-aware, responsive chat bubble component.
-
+
Base Collapse Theme-aware, responsive collapse component.
-
+
Base Date Picker Theme-aware, responsive date picker component.
-
+
Base Device Frame Theme-aware, responsive device frame component.
-
+
Base File Upload Progress Theme-aware, responsive file upload progress component.
-
+
Base Legend Indicator Theme-aware, responsive legend indicator component.
-
+
-
Base List Theme-aware, responsive list component.
+
Base List Present structured responsive linked or status items with icons, descriptions, actions, and selection events.
-
+
Base List Group Theme-aware, responsive list group component.
-
+
-
Base Marquee Theme-aware, responsive marquee component.
+
Base Marquee Continuously present responsive labels, partners, notices, or capabilities with pause and resume behavior.
-
+
Base Progress Theme-aware, responsive progress component.
-
+
Base Rating Theme-aware, responsive rating component.
-
+
Base Skeleton Theme-aware, responsive skeleton component.
-
+
Base Spinner Theme-aware, responsive spinner component.
-
+
Base Styled Icon Theme-aware, responsive styled icon component.
-
+
-
Base Timeline Theme-aware, responsive timeline component.
+
Base Timeline Present responsive chronological activity, milestones, or workflow status with rich item metadata.
-
+
-
-
Base Toast Theme-aware, responsive toast component.
-
-
-
-
Base Tree View Theme-aware, responsive tree view component.
-
+
}
diff --git a/app/pages/blocks.wrn b/app/pages/block-library.wrn
similarity index 99%
rename from app/pages/blocks.wrn
rename to app/pages/block-library.wrn
index 59df0ea..ac80985 100644
--- a/app/pages/blocks.wrn
+++ b/app/pages/block-library.wrn
@@ -1,4 +1,4 @@
-page Blocks {
+page BlockLibrary {
layout = "showcase"
seo { title = "UI blocks" description = "Complete sections composed from WRNexus UI components." }
view {
diff --git a/app/pages/colors.wrn b/app/pages/colors.wrn
index 4949fc9..046a464 100644
--- a/app/pages/colors.wrn
+++ b/app/pages/colors.wrn
@@ -8,9 +8,10 @@ page ColorsGuide {
Docs / Colors Customization Colors Semantic primary, secondary, success, warning, danger, and info tokens remain available in every palette.
Brand colors Primary and secondary tokens communicate brand hierarchy.
Status colors Success, warning, danger, and info preserve their semantic meaning in every palette.
Component override Pass color="success" or another semantic color to any component.
Explore components → Browse blocks → Semantic roles Primary and secondary communicate hierarchy; success, warning, danger, and info communicate state. Use roles consistently instead of choosing colors by appearance.
Component colors Every maintained component accepts the shared color contract. Prefer the color prop for supported variants and tokens for application-owned surfaces.
Accessible combinations Check text, icons, borders, hover, focus, selected, and disabled states. Never make color the only carrier of meaning.
Brand overrides Define brand values once through theme tokens. Derived surfaces and on-colors keep contrast coherent across light and dark modes.
Quick start <Button color="primary">Save</Button>
+<Alert color="danger">Unable to save</Alert>Explore components → Browse blocks →
}
}
diff --git a/app/pages/components/accordion.wrn b/app/pages/components/accordion.wrn
index 2922b61..e711faf 100644
--- a/app/pages/components/accordion.wrn
+++ b/app/pages/components/accordion.wrn
@@ -4,20 +4,20 @@ page AccordionDetail {
state playground_size = ctx.url.searchParams.get("pg_size") ?? "default"
state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary"
state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default"
- state playground_class = ctx.url.searchParams.get("pg_class") ?? ""
- state playground_id = ctx.url.searchParams.get("pg_id") ?? "accordion-example-1"
- state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"value\": \"first\",\n \"label\": \"Accordion #1\",\n \"content\": \"This is the item's accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.\"\n },\n {\n \"value\": \"second\",\n \"label\": \"Accordion #2\",\n \"content\": \"This is the item's accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.\"\n },\n {\n \"value\": \"third\",\n \"label\": \"Accordion #3\",\n \"content\": \"This is the item's accordion body. It is hidden by default until the section is opened. Use it for supporting details, explanations, or progressive disclosure.\"\n }\n]"
- state playground_defaultOpen = ctx.url.searchParams.get("pg_defaultOpen") ?? "[\n \"first\"\n]"
- state playground_multiple = ctx.url.searchParams.get("pg_multiple") ?? "false"
- state playground_alwaysOpen = ctx.url.searchParams.get("pg_alwaysOpen") ?? "false"
- state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false"
+ state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1"
+ state playground_id = ctx.url.searchParams.get("pg_id") ?? "accordion"
+ state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"accordion-0-1\",\"key\":\"accordion-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#accordion-demo\",\"actionHref\":\"#accordion-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"accordion-0-2\",\"key\":\"accordion-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#accordion-demo\",\"actionHref\":\"#accordion-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
+ state playground_defaultOpen = JSON.parse(ctx.url.searchParams.get("pg_defaultOpen") ?? "[{\"id\":\"accordion-0-1\",\"key\":\"accordion-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#accordion-demo\",\"actionHref\":\"#accordion-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"accordion-0-2\",\"key\":\"accordion-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#accordion-demo\",\"actionHref\":\"#accordion-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]")
+ state playground_multiple = (ctx.url.searchParams.get("pg_multiple") ?? "false") === "true"
+ state playground_alwaysOpen = (ctx.url.searchParams.get("pg_alwaysOpen") ?? "false") === "true"
+ state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true"
state playground_indicator = ctx.url.searchParams.get("pg_indicator") ?? "plus"
state playground_indicatorPosition = ctx.url.searchParams.get("pg_indicatorPosition") ?? "start"
- state playground_showIndicator = ctx.url.searchParams.get("pg_showIndicator") ?? "true"
- state playground_bordered = ctx.url.searchParams.get("pg_bordered") ?? "false"
- state playground_separated = ctx.url.searchParams.get("pg_separated") ?? "false"
- state playground_flush = ctx.url.searchParams.get("pg_flush") ?? "false"
- state playground_contentItalic = ctx.url.searchParams.get("pg_contentItalic") ?? "true"
+ state playground_showIndicator = (ctx.url.searchParams.get("pg_showIndicator") ?? "true") === "true"
+ state playground_bordered = (ctx.url.searchParams.get("pg_bordered") ?? "false") === "true"
+ state playground_separated = (ctx.url.searchParams.get("pg_separated") ?? "false") === "true"
+ state playground_flush = (ctx.url.searchParams.get("pg_flush") ?? "false") === "true"
+ state playground_contentItalic = (ctx.url.searchParams.get("pg_contentItalic") ?? "false") === "true"
seo {
title = "Accordion"
description = "Theme-aware, responsive accordion component."
@@ -31,66 +31,457 @@ page AccordionDetail {
Base component
Accordion
Theme-aware, responsive accordion component.
-
17 props 0 slots 3 events Theme ready Responsive
+
17 props 0 slots 3 outputs Theme ready Responsive