diff --git a/examples/component-showcase/app/layouts/showcase.wrn b/examples/component-showcase/app/layouts/showcase.wrn index a5898d4f..6b42d494 100644 --- a/examples/component-showcase/app/layouts/showcase.wrn +++ b/examples/component-showcase/app/layouts/showcase.wrn @@ -31,11 +31,11 @@ layout Showcase {
Advanced Forms -
Advanced SelectCombo BoxCopy MarkupInput NumberPin InputStrong PasswordToggle CountToggle Password
+
Advanced SelectCombo BoxInput NumberPin InputStrong PasswordToggle CountToggle Password
Base -
AccordionAlertAvatarAvatar GroupBadgeBlockquoteButtonButton GroupCardCarouselChat BubbleCollapseDate PickerDevice FrameFile Upload ProgressLegend IndicatorListList GroupMarqueeProgressRatingSkeletonSpinnerStyled IconTimelineToastTree View
+
AccordionAlertAvatarAvatar GroupBadgeBlockquoteButtonButton GroupCardCarouselChat BubbleCollapseDate PickerDevice FrameFile Upload ProgressLegend IndicatorListList GroupMarqueeProgressRatingSkeletonSpinnerStyled IconTimelineTree View
Core @@ -51,7 +51,7 @@ layout Showcase {
Integrations -
Advanced Date PickerAdvanced Range SliderChartClipboardConfettiData MapDrag And DropFile UploadMapToast NotificationsWysiwyg Editor
+
ChartClipboardConfettiData MapDrag And DropMapWysiwyg Editor
Layout diff --git a/examples/component-showcase/app/pages/advanced-forms.wrn b/examples/component-showcase/app/pages/advanced-forms.wrn index 5aaccd1b..37aaf37f 100644 --- a/examples/component-showcase/app/pages/advanced-forms.wrn +++ b/examples/component-showcase/app/pages/advanced-forms.wrn @@ -3,14 +3,14 @@ page AdvancedFormsShowcase { layout = "showcase" seo { title = "Advanced Forms components" - description = "8 advanced-forms components from @wrnexus/ui." + description = "7 advanced-forms components from @wrnexus/ui." } view {
Component category

Advanced Forms

-

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

-
8 componentsMultiple use cases112 live configurations
+

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

+
7 componentsMultiple use cases109 live configurations
-
-
- -
-
-
-
Advanced Forms

Copy Markup

Theme-aware, responsive copy markup component.

-
13 props · 0 slotsExplore component
-
-
diff --git a/examples/component-showcase/app/pages/base.wrn b/examples/component-showcase/app/pages/base.wrn index 40276a11..a0500a9d 100644 --- a/examples/component-showcase/app/pages/base.wrn +++ b/examples/component-showcase/app/pages/base.wrn @@ -3,14 +3,14 @@ page BaseShowcase { layout = "showcase" seo { title = "Base components" - description = "27 base components from @wrnexus/ui." + description = "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 componentsMultiple use cases86 live configurations
+

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

+
26 componentsMultiple use cases83 live configurations
} diff --git a/examples/component-showcase/app/pages/components/advanced-date-picker.wrn b/examples/component-showcase/app/pages/components/advanced-date-picker.wrn deleted file mode 100644 index b5a40355..00000000 --- a/examples/component-showcase/app/pages/components/advanced-date-picker.wrn +++ /dev/null @@ -1,696 +0,0 @@ -// Generated by scripts/generate-showcase.mjs. Do not edit directly. -page AdvancedDatePickerDetail { - layout = "showcase" - state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" - state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" - state playground_title = ctx.url.searchParams.get("pg_title") ?? "Advanced Date Picker example" - state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default advanced date picker for a modern application." - state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"advanced-date-picker-0-1\",\"key\":\"advanced-date-picker-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#advanced-date-picker-demo\",\"actionHref\":\"#advanced-date-picker-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"advanced-date-picker-0-2\",\"key\":\"advanced-date-picker-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#advanced-date-picker-demo\",\"actionHref\":\"#advanced-date-picker-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]") - state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" - state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" - seo { - title = "Advanced Date Picker" - description = "Theme-aware, responsive advanced date picker component." - } - view { - -
-
- Integrations component -

Advanced Date Picker

-

Theme-aware, responsive advanced date picker component.

-
7 props1 slots5 outputsTheme readyResponsive
-
-
-
-
-
Interactive playground

Configure Advanced Date Picker

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

-
-
-
Live preview
-
-
-
Component code
- 
<AdvancedDatePicker
-  title="Advanced Date Picker example"
-  description="A polished default advanced date picker for a modern application."
-  items='[
-    {
-      "id": "advanced-date-picker-0-1",
-      "key": "advanced-date-picker-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#advanced-date-picker-demo",
-      "actionHref": "#advanced-date-picker-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    },
-    {
-      "id": "advanced-date-picker-0-2",
-      "key": "advanced-date-picker-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#advanced-date-picker-demo",
-      "actionHref": "#advanced-date-picker-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    }
-  ]'
-/>
-
-
-
Event outputInteract with the preview to inspect the typed payload.
-
-
-
Component props7 controls
-
-
-
-
-
-
-
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

-
-
-
Recommended

Production default

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

- 01 -
-
-
-
Live preview
- -
-
-
-
Component usage.wrn
- 
<AdvancedDatePicker
-  title="Advanced Date Picker example"
-  description="A polished default advanced date picker for a modern application."
-  items='[
-    {
-      "id": "advanced-date-picker-0-1",
-      "key": "advanced-date-picker-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#advanced-date-picker-demo",
-      "actionHref": "#advanced-date-picker-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    },
-    {
-      "id": "advanced-date-picker-0-2",
-      "key": "advanced-date-picker-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#advanced-date-picker-demo",
-      "actionHref": "#advanced-date-picker-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    }
-  ]'
-/>
-
-
-
-
-
-
Dense UI

Compact application

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

- 02 -
-
-
-
Live preview
- -
-
-
-
Component usage.wrn
- 
<AdvancedDatePicker
-  size="sm"
-  title="Compact Advanced Date Picker"
-  description="A compact configuration for dashboards and dense product surfaces."
-  items='[
-    {
-      "id": "advanced-date-picker-1-1",
-      "key": "advanced-date-picker-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#advanced-date-picker-demo",
-      "actionHref": "#advanced-date-picker-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    },
-    {
-      "id": "advanced-date-picker-1-2",
-      "key": "advanced-date-picker-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#advanced-date-picker-demo",
-      "actionHref": "#advanced-date-picker-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    }
-  ]'
-  variant="secondary"
-/>
-
-
-
-
-
-
Extended

Rich configuration

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

- 03 -
-
-
-
Live preview
- -
-
-
-
Component usage.wrn
- 
<AdvancedDatePicker
-  size="lg"
-  title="Advanced Advanced Date Picker"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  items='[
-    {
-      "id": "advanced-date-picker-2-1",
-      "key": "advanced-date-picker-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#advanced-date-picker-demo",
-      "actionHref": "#advanced-date-picker-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    },
-    {
-      "id": "advanced-date-picker-2-2",
-      "key": "advanced-date-picker-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#advanced-date-picker-demo",
-      "actionHref": "#advanced-date-picker-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    }
-  ]'
-  variant="success"
-/>
-
-
-
-
Component outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@inputFires as the editable value changes.
@changeFires when the component's committed value or selection changes.
@openFires after the component opens.
@closeFires after the component closes.
@clearFires after the current value or selection is cleared.
Declarative handlers.wrn
<AdvancedDatePicker
-  @input='console.log(payload)'
-  @change='console.log(payload)'
-  @open='console.log(payload)'
-  @close='console.log(payload)'
-  @clear='console.log(payload)'
-/>
Direct output handlers.js
import { registerOutputHandler } from "@wrnexus/csr/outputs"
-
-const component = document.querySelector("[data-ui-component=\"AdvancedDatePicker\"], [data-component=\"AdvancedDatePicker\"]")
-
-if (component) registerOutputHandler(component, "input", (payload) => {
-  console.log("input", payload)
-})
-
-if (component) registerOutputHandler(component, "change", (payload) => {
-  console.log("change", payload)
-})
-
-if (component) registerOutputHandler(component, "open", (payload) => {
-  console.log("open", payload)
-})
-
-if (component) registerOutputHandler(component, "close", (payload) => {
-  console.log("close", payload)
-})
-
-if (component) registerOutputHandler(component, "clear", (payload) => {
-  console.log("clear", payload)
-})
-
Component API

Props and configuration

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

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Advanced Date Picker"No
descriptionstring""No
itemsunknown[][]No
variantstring"default"No
classstring""No
-
- -
- - } -} diff --git a/examples/component-showcase/app/pages/components/advanced-range-slider.wrn b/examples/component-showcase/app/pages/components/advanced-range-slider.wrn deleted file mode 100644 index 39b0b2b8..00000000 --- a/examples/component-showcase/app/pages/components/advanced-range-slider.wrn +++ /dev/null @@ -1,691 +0,0 @@ -// Generated by scripts/generate-showcase.mjs. Do not edit directly. -page AdvancedRangeSliderDetail { - layout = "showcase" - state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" - state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" - state playground_title = ctx.url.searchParams.get("pg_title") ?? "Advanced Range Slider example" - state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default advanced range slider for a modern application." - state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"advanced-range-slider-0-1\",\"key\":\"advanced-range-slider-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#advanced-range-slider-demo\",\"actionHref\":\"#advanced-range-slider-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"advanced-range-slider-0-2\",\"key\":\"advanced-range-slider-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#advanced-range-slider-demo\",\"actionHref\":\"#advanced-range-slider-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]") - state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" - state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" - seo { - title = "Advanced Range Slider" - description = "Theme-aware, responsive advanced range slider component." - } - view { - -
-
- Integrations component -

Advanced Range Slider

-

Theme-aware, responsive advanced range slider component.

-
7 props1 slots4 outputsTheme readyResponsive
-
-
-
-
-
Interactive playground

Configure Advanced Range Slider

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

-
-
-
Live preview
-
-
-
Component code
- 
<AdvancedRangeSlider
-  title="Advanced Range Slider example"
-  description="A polished default advanced range slider for a modern application."
-  items='[
-    {
-      "id": "advanced-range-slider-0-1",
-      "key": "advanced-range-slider-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#advanced-range-slider-demo",
-      "actionHref": "#advanced-range-slider-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    },
-    {
-      "id": "advanced-range-slider-0-2",
-      "key": "advanced-range-slider-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#advanced-range-slider-demo",
-      "actionHref": "#advanced-range-slider-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    }
-  ]'
-/>
-
-
-
Event outputInteract with the preview to inspect the typed payload.
-
-
-
Component props7 controls
-
-
-
-
-
-
-
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

-
-
-
Recommended

Production default

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

- 01 -
-
-
-
Live preview
- -
-
-
-
Component usage.wrn
- 
<AdvancedRangeSlider
-  title="Advanced Range Slider example"
-  description="A polished default advanced range slider for a modern application."
-  items='[
-    {
-      "id": "advanced-range-slider-0-1",
-      "key": "advanced-range-slider-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#advanced-range-slider-demo",
-      "actionHref": "#advanced-range-slider-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    },
-    {
-      "id": "advanced-range-slider-0-2",
-      "key": "advanced-range-slider-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#advanced-range-slider-demo",
-      "actionHref": "#advanced-range-slider-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    }
-  ]'
-/>
-
-
-
-
-
-
Dense UI

Compact application

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

- 02 -
-
-
-
Live preview
- -
-
-
-
Component usage.wrn
- 
<AdvancedRangeSlider
-  size="sm"
-  title="Compact Advanced Range Slider"
-  description="A compact configuration for dashboards and dense product surfaces."
-  items='[
-    {
-      "id": "advanced-range-slider-1-1",
-      "key": "advanced-range-slider-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#advanced-range-slider-demo",
-      "actionHref": "#advanced-range-slider-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    },
-    {
-      "id": "advanced-range-slider-1-2",
-      "key": "advanced-range-slider-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#advanced-range-slider-demo",
-      "actionHref": "#advanced-range-slider-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    }
-  ]'
-  variant="secondary"
-/>
-
-
-
-
-
-
Extended

Rich configuration

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

- 03 -
-
-
-
Live preview
- -
-
-
-
Component usage.wrn
- 
<AdvancedRangeSlider
-  size="lg"
-  title="Advanced Advanced Range Slider"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  items='[
-    {
-      "id": "advanced-range-slider-2-1",
-      "key": "advanced-range-slider-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#advanced-range-slider-demo",
-      "actionHref": "#advanced-range-slider-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    },
-    {
-      "id": "advanced-range-slider-2-2",
-      "key": "advanced-range-slider-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#advanced-range-slider-demo",
-      "actionHref": "#advanced-range-slider-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    }
-  ]'
-  variant="success"
-/>
-
-
-
-
Component outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@inputFires as the editable value changes.
@changeFires when the component's committed value or selection changes.
@startFires when the component emits the start event.
@endFires when the component emits the end event.
Declarative handlers.wrn
<AdvancedRangeSlider
-  @input='console.log(payload)'
-  @change='console.log(payload)'
-  @start='console.log(payload)'
-  @end='console.log(payload)'
-/>
Direct output handlers.js
import { registerOutputHandler } from "@wrnexus/csr/outputs"
-
-const component = document.querySelector("[data-ui-component=\"AdvancedRangeSlider\"], [data-component=\"AdvancedRangeSlider\"]")
-
-if (component) registerOutputHandler(component, "input", (payload) => {
-  console.log("input", payload)
-})
-
-if (component) registerOutputHandler(component, "change", (payload) => {
-  console.log("change", payload)
-})
-
-if (component) registerOutputHandler(component, "start", (payload) => {
-  console.log("start", payload)
-})
-
-if (component) registerOutputHandler(component, "end", (payload) => {
-  console.log("end", payload)
-})
-
Component API

Props and configuration

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

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Advanced Range Slider"No
descriptionstring""No
itemsunknown[][]No
variantstring"default"No
classstring""No
-
- -
- - } -} diff --git a/examples/component-showcase/app/pages/components/chart.wrn b/examples/component-showcase/app/pages/components/chart.wrn index 311675e6..47a6f945 100644 --- a/examples/component-showcase/app/pages/components/chart.wrn +++ b/examples/component-showcase/app/pages/components/chart.wrn @@ -1,12 +1,17 @@ // Generated by scripts/generate-showcase.mjs. Do not edit directly. page ChartDetail { layout = "showcase" - state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" - state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_title = ctx.url.searchParams.get("pg_title") ?? "Chart example" state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default chart for a modern application." state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"chart-0-1\",\"key\":\"chart-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#chart-demo\",\"actionHref\":\"#chart-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"chart-0-2\",\"key\":\"chart-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#chart-demo\",\"actionHref\":\"#chart-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]") - state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_valueKey = ctx.url.searchParams.get("pg_valueKey") ?? "value" + state playground_labelKey = ctx.url.searchParams.get("pg_labelKey") ?? "label" + state playground_height = Number(ctx.url.searchParams.get("pg_height") ?? "240") + state playground_showLegend = (ctx.url.searchParams.get("pg_showLegend") ?? "true") === "true" + state playground_showValues = (ctx.url.searchParams.get("pg_showValues") ?? "true") === "true" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "bar" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" seo { title = "Chart" @@ -21,7 +26,7 @@ page ChartDetail { Integrations component

Chart

Theme-aware, responsive chart component.

-
7 props1 slots3 outputsTheme readyResponsive
+
12 props1 slots3 outputsTheme readyResponsive
@@ -30,7 +35,7 @@ page ChartDetail {
Live preview
-
+
Component code
<Chart
@@ -150,8 +155,8 @@ page ChartDetail {
           
Event outputInteract with the preview to inspect the typed payload.
-
Component props7 controls
-
+]
@@ -274,7 +279,7 @@ page ChartDetail {
Live preview
-
+
Component usage.wrn
@@ -402,12 +407,11 @@ page ChartDetail {
Live preview
-
+
Component usage.wrn
<Chart
-  size="sm"
   title="Compact Chart"
   description="A compact configuration for dashboards and dense product surfaces."
   items='[
@@ -518,6 +522,7 @@ page ChartDetail {
       ]
     }
   ]'
+  size="sm"
   variant="secondary"
 />
@@ -532,12 +537,11 @@ page ChartDetail {
Live preview
-
+
Component usage.wrn
<Chart
-  size="lg"
   title="Advanced Chart"
   description="A richer configuration demonstrating additional content and hierarchy."
   items='[
@@ -648,6 +652,7 @@ page ChartDetail {
       ]
     }
   ]'
+  size="lg"
   variant="success"
 />
@@ -672,14 +677,14 @@ if (component) registerOutputHandler(component, "dataPointClick", (payload) => if (component) registerOutputHandler(component, "legendToggle", (payload) => { console.log("legendToggle", payload) })
-
Component API

Props and configuration

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

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Chart"No
descriptionstring""No
itemsunknown[][]No
variantstring"default"No
classstring""No
+
Component API

Props and configuration

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

PropTypeDefaultRequired
titlestring"Chart"No
descriptionstring""No
itemsunknown[][]No
valueKeystring"value"No
labelKeystring"label"No
heightnumber240No
showLegendbooleantrueNo
showValuesbooleantrueNo
sizestring"default"No
colorstring"primary"No
variantstring"bar"No
classstring""No
} diff --git a/examples/component-showcase/app/pages/components/clipboard.wrn b/examples/component-showcase/app/pages/components/clipboard.wrn index 90d4991b..49bd2833 100644 --- a/examples/component-showcase/app/pages/components/clipboard.wrn +++ b/examples/component-showcase/app/pages/components/clipboard.wrn @@ -1,12 +1,16 @@ // Generated by scripts/generate-showcase.mjs. Do not edit directly. page ClipboardDetail { layout = "showcase" - state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" - state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" + state playground_label = ctx.url.searchParams.get("pg_label") ?? "Clipboard" + state playground_copiedLabel = ctx.url.searchParams.get("pg_copiedLabel") ?? "Clipboard" + state playground_errorLabel = ctx.url.searchParams.get("pg_errorLabel") ?? "Clipboard" state playground_title = ctx.url.searchParams.get("pg_title") ?? "Clipboard example" state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default clipboard for a modern application." - state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"clipboard-0-1\",\"key\":\"clipboard-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#clipboard-demo\",\"actionHref\":\"#clipboard-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"clipboard-0-2\",\"key\":\"clipboard-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#clipboard-demo\",\"actionHref\":\"#clipboard-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]") - state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" + state playground_code = (ctx.url.searchParams.get("pg_code") ?? "true") === "true" + state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" + state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" seo { title = "Clipboard" @@ -21,7 +25,7 @@ page ClipboardDetail { Integrations component

Clipboard

Theme-aware, responsive clipboard component.

-
7 props1 slots3 outputsTheme readyResponsive
+
11 props1 slots3 outputsTheme readyResponsive
@@ -30,235 +34,24 @@ page ClipboardDetail {
Live preview
-
+
Component code
<Clipboard
+  value="sample-1"
+  label="Clipboard"
+  copiedLabel="Clipboard"
+  errorLabel="Clipboard"
   title="Clipboard example"
   description="A polished default clipboard for a modern application."
-  items='[
-    {
-      "id": "clipboard-0-1",
-      "key": "clipboard-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#clipboard-demo",
-      "actionHref": "#clipboard-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    },
-    {
-      "id": "clipboard-0-2",
-      "key": "clipboard-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#clipboard-demo",
-      "actionHref": "#clipboard-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    }
-  ]'
 />
Event outputInteract with the preview to inspect the typed payload.
-
Component props7 controls
-
+
Component props11 controls
+
@@ -274,121 +67,17 @@ page ClipboardDetail {
Live preview
-
+
Component usage.wrn
<Clipboard
+  value="sample-1"
+  label="Clipboard"
+  copiedLabel="Clipboard"
+  errorLabel="Clipboard"
   title="Clipboard example"
   description="A polished default clipboard for a modern application."
-  items='[
-    {
-      "id": "clipboard-0-1",
-      "key": "clipboard-0-1",
-      "value": "primary",
-      "label": "Primary workflow",
-      "title": "Primary workflow",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "A configurable sample message.",
-      "href": "#clipboard-demo",
-      "actionHref": "#clipboard-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 16,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 1",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    },
-    {
-      "id": "clipboard-0-2",
-      "key": "clipboard-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#clipboard-demo",
-      "actionHref": "#clipboard-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--sparkles]",
-      "iconClass": "icon-[lucide--sparkles]",
-      "variant": "primary",
-      "status": "Active",
-      "time": "09:30",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 32,
-      "percentage": 72,
-      "color": "#7c3aed",
-      "target": "_self",
-      "ariaLabel": "Open primary workflow 2",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    }
-  ]'
 />
@@ -402,123 +91,18 @@ page ClipboardDetail {
Live preview
-
+
Component usage.wrn
<Clipboard
-  size="sm"
+  value="sample-2"
+  label="Compact example"
+  copiedLabel="Compact example"
+  errorLabel="Compact example"
   title="Compact Clipboard"
   description="A compact configuration for dashboards and dense product surfaces."
-  items='[
-    {
-      "id": "clipboard-1-1",
-      "key": "clipboard-1-1",
-      "value": "primary",
-      "label": "Secondary workflow",
-      "title": "Secondary workflow",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "A configurable sample message.",
-      "href": "#clipboard-demo",
-      "actionHref": "#clipboard-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 24,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 1",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    },
-    {
-      "id": "clipboard-1-2",
-      "key": "clipboard-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#clipboard-demo",
-      "actionHref": "#clipboard-demo",
-      "actionLabel": "View details",
-      "icon": "icon-[lucide--zap]",
-      "iconClass": "icon-[lucide--zap]",
-      "variant": "secondary",
-      "status": "Active",
-      "time": "10:15",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": false,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 48,
-      "percentage": 48,
-      "color": "#0284c7",
-      "target": "_self",
-      "ariaLabel": "Open secondary workflow 2",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Standard"
-      ]
-    }
-  ]'
-  variant="secondary"
+  size="sm"
 />
@@ -532,123 +116,18 @@ page ClipboardDetail {
Live preview
-
+
Component usage.wrn
<Clipboard
-  size="lg"
+  value="sample-3"
+  label="Advanced example"
+  copiedLabel="Advanced example"
+  errorLabel="Advanced example"
   title="Advanced Clipboard"
   description="A richer configuration demonstrating additional content and hierarchy."
-  items='[
-    {
-      "id": "clipboard-2-1",
-      "key": "clipboard-2-1",
-      "value": "primary",
-      "label": "Advanced workflow",
-      "title": "Advanced workflow",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "A configurable sample message.",
-      "href": "#clipboard-demo",
-      "actionHref": "#clipboard-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": true,
-      "selected": true,
-      "checked": true,
-      "disabled": false,
-      "outgoing": false,
-      "open": true,
-      "number": 1,
-      "count": 32,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 1",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    },
-    {
-      "id": "clipboard-2-2",
-      "key": "clipboard-2-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A richer configuration with more supporting information and actions.",
-      "text": "Another configurable message.",
-      "href": "#clipboard-demo",
-      "actionHref": "#clipboard-demo",
-      "actionLabel": "Explore workflow",
-      "icon": "icon-[lucide--circle-check]",
-      "iconClass": "icon-[lucide--circle-check]",
-      "variant": "success",
-      "status": "Complete",
-      "time": "11:45",
-      "current": false,
-      "selected": false,
-      "checked": false,
-      "disabled": true,
-      "outgoing": true,
-      "open": true,
-      "number": 2,
-      "count": 64,
-      "percentage": 91,
-      "color": "#059669",
-      "target": "_self",
-      "ariaLabel": "Open advanced workflow 2",
-      "items": [
-        {
-          "label": "Nested option A",
-          "value": "nested-a"
-        },
-        {
-          "label": "Nested option B",
-          "value": "nested-b"
-        }
-      ],
-      "links": [
-        {
-          "label": "Documentation",
-          "href": "#documentation"
-        },
-        {
-          "label": "API reference",
-          "href": "#api-reference"
-        }
-      ],
-      "values": [
-        "Included",
-        "Unlimited"
-      ]
-    }
-  ]'
-  variant="success"
+  size="lg"
 />
@@ -672,7 +151,7 @@ if (component) registerOutputHandler(component, "success", (payload) => { console.log("error", payload) }) -
Component API

Props and configuration

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

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Clipboard"No
descriptionstring""No
itemsunknown[][]No
variantstring"default"No
classstring""No
+
Component API

Props and configuration

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

PropTypeDefaultRequired
valuestring""No
labelstring"Copy"No
copiedLabelstring"Copied"No
errorLabelstring"Copy failed"No
titlestring"Clipboard"No
descriptionstring""No
codebooleantrueNo
sizestring"default"No
colorstring"primary"No
disabledbooleanfalseNo
classstring""No