From c0ac38c5725bc0148dececa45bb5c1e37e9d3ad4 Mon Sep 17 00:00:00 2001 From: Ajay Ghanwat Date: Wed, 30 Sep 2026 16:50:22 +0530 Subject: [PATCH] feat: sync showcase with WRNexusJS 0.8.72 and @wrnexus/ui 0.8.88 - Sync app, public, scripts, test and examples from the framework's component-showcase: redesigned component demos, marketing blocks under /blocks, template and preview galleries, distinct Timeline/Section variants, Chat Bubble receipts, a top-placement Drawer demo, and the playground code panel fix (objects in array props no longer blank out). - Standalone adaptations kept: the generator and tests read component-reference.json from the published @wrnexus/ui, and tests use the published @wrnexus/compiler and @wrnexus/syntax. - Dependencies: every @wrnexus/* package to its latest release (ui 0.8.88, styles 0.8.26, core 0.8.16, cli 0.8.72, ...), happy-dom for the playground tests, Tailwind 4.3; bun.lock and package-lock.json refreshed. Co-Authored-By: Claude Opus 5.5 --- app/layouts/document.wrn | 2 + app/layouts/gallery.wrn | 8 + app/layouts/showcase.wrn | 23 +- app/pages/accessibility.wrn | 11 +- app/pages/advanced-forms.wrn | 6 +- app/pages/base.wrn | 56 +- app/pages/block-library.wrn | 12 +- app/pages/blocks/announcement-bar.wrn | 10 + app/pages/blocks/ctasection.wrn | 20 + app/pages/blocks/feature-card.wrn | 10 + app/pages/blocks/feature-grid.wrn | 10 + app/pages/blocks/feature-icon-card.wrn | 10 + app/pages/blocks/footer.wrn | 10 + app/pages/blocks/hero-actions.wrn | 10 + app/pages/blocks/hero.wrn | 20 + app/pages/blocks/index.wrn | 5 + app/pages/blocks/marketing-section-header.wrn | 10 + app/pages/blocks/metric-grid.wrn | 10 + app/pages/blocks/page-header.wrn | 10 + app/pages/blocks/section-header.wrn | 10 + app/pages/blocks/split-hero.wrn | 20 + app/pages/blocks/stats-bar.wrn | 10 + app/pages/colors.wrn | 12 +- app/pages/components/accordion.wrn | 1258 +---- app/pages/components/advanced-select.wrn | 4070 +++++++++-------- app/pages/components/alert.wrn | 1252 +---- app/pages/components/announcement-bar.wrn | 175 - app/pages/components/auth-form.wrn | 169 - app/pages/components/auth-split-layout.wrn | 281 -- app/pages/components/avatar-group.wrn | 735 +-- app/pages/components/avatar.wrn | 63 +- app/pages/components/back-to-top.wrn | 50 +- app/pages/components/badge.wrn | 75 +- app/pages/components/blockquote.wrn | 21 +- app/pages/components/breadcrumb.wrn | 399 +- app/pages/components/button-group.wrn | 680 +-- app/pages/components/button.wrn | 27 +- app/pages/components/card.wrn | 1978 ++------ app/pages/components/carousel.wrn | 736 +-- app/pages/components/chart.wrn | 733 +-- app/pages/components/chat-bubble.wrn | 840 ++-- app/pages/components/checkbox.wrn | 1806 ++++---- app/pages/components/clipboard.wrn | 69 +- app/pages/components/collapse.wrn | 1786 ++++---- app/pages/components/color-picker.wrn | 54 +- app/pages/components/columns.wrn | 10 +- app/pages/components/combo-box.wrn | 1962 ++++---- app/pages/components/confetti.wrn | 46 +- app/pages/components/container.wrn | 10 +- app/pages/components/context-menu.wrn | 510 ++- app/pages/components/ctasection.wrn | 774 ---- app/pages/components/custom-scrollbar.wrn | 8 +- app/pages/components/data-map.wrn | 738 +-- app/pages/components/data-table.wrn | 2737 ++++++++--- app/pages/components/date-picker.wrn | 572 ++- app/pages/components/device-frame.wrn | 938 ++-- app/pages/components/divider.wrn | 12 +- app/pages/components/drag-and-drop.wrn | 678 +-- app/pages/components/drawer.wrn | 40 +- app/pages/components/dropdown.wrn | 537 ++- app/pages/components/feature-card.wrn | 211 - app/pages/components/feature-grid.wrn | 408 -- app/pages/components/feature-icon-card.wrn | 167 - app/pages/components/file-input.wrn | 47 +- app/pages/components/file-upload-progress.wrn | 74 +- app/pages/components/footer.wrn | 575 --- app/pages/components/grid.wrn | 12 +- app/pages/components/hero-actions.wrn | 293 -- app/pages/components/hero.wrn | 1705 ------- app/pages/components/image.wrn | 10 +- app/pages/components/input-group.wrn | 70 +- app/pages/components/input-number.wrn | 24 +- app/pages/components/input.wrn | 17 +- app/pages/components/kbd.wrn | 32 +- app/pages/components/layout-splitter.wrn | 10 +- app/pages/components/legend-indicator.wrn | 637 +-- app/pages/components/link.wrn | 12 +- app/pages/components/list-group.wrn | 722 +-- app/pages/components/list.wrn | 372 +- app/pages/components/map.wrn | 305 +- .../components/marketing-section-header.wrn | 171 - app/pages/components/marquee.wrn | 368 +- app/pages/components/mega-menu.wrn | 1088 ++++- app/pages/components/metric-card.wrn | 14 +- app/pages/components/metric-grid.wrn | 392 -- app/pages/components/modal.wrn | 90 +- app/pages/components/nav.wrn | 446 +- app/pages/components/navbar.wrn | 853 ++-- app/pages/components/page-header.wrn | 564 --- app/pages/components/pagination.wrn | 57 +- app/pages/components/pin-input.wrn | 34 +- app/pages/components/portal-dashboard.wrn | 2319 ---------- app/pages/components/preference-switcher.wrn | 35 +- app/pages/components/progress.wrn | 10 +- app/pages/components/public-page-shell.wrn | 190 - app/pages/components/radio.wrn | 938 ++-- app/pages/components/range-slider.wrn | 651 +-- app/pages/components/rating.wrn | 651 +-- app/pages/components/scrollspy.wrn | 345 +- app/pages/components/search-box.wrn | 6 +- app/pages/components/section-header.wrn | 160 - app/pages/components/section.wrn | 25 +- app/pages/components/select.wrn | 1806 ++++---- app/pages/components/sidebar.wrn | 421 +- app/pages/components/skeleton.wrn | 10 +- app/pages/components/spinner.wrn | 10 +- app/pages/components/split-hero.wrn | 1238 ----- app/pages/components/stats-bar.wrn | 351 -- app/pages/components/stepper.wrn | 561 +-- app/pages/components/strong-password.wrn | 24 +- app/pages/components/styled-icon.wrn | 638 +-- app/pages/components/switch.wrn | 6 +- app/pages/components/tabs.wrn | 442 +- app/pages/components/text-link.wrn | 8 +- app/pages/components/textarea.wrn | 6 +- app/pages/components/time-picker.wrn | 191 +- app/pages/components/timeline.wrn | 403 +- app/pages/components/toaster.wrn | 2 +- app/pages/components/toggle-count.wrn | 710 +-- app/pages/components/toggle-password.wrn | 268 +- app/pages/components/tree-view.wrn | 1279 +----- app/pages/components/typography.wrn | 12 +- app/pages/components/wysiwyg-editor.wrn | 633 +-- app/pages/core.wrn | 40 +- app/pages/dark-mode.wrn | 12 +- app/pages/data.wrn | 26 +- app/pages/fonts.wrn | 13 +- app/pages/forms.wrn | 14 +- app/pages/framework-guides.wrn | 13 +- app/pages/index.wrn | 10 +- app/pages/installation.wrn | 16 +- app/pages/integrations.wrn | 24 +- app/pages/layout.wrn | 57 +- app/pages/marketing.wrn | 111 +- app/pages/navigation.wrn | 30 +- app/pages/overlays.wrn | 10 +- app/pages/preview/custom-modal.wrn | 7 + app/pages/preview/index.wrn | 5 + app/pages/preview/profile.wrn | 621 +++ app/pages/preview/project-board.wrn | 7 + app/pages/preview/scheduling.wrn | 5 + app/pages/preview/sign-in.wrn | 613 +++ app/pages/preview/workspace.wrn | 623 +++ app/pages/resources.wrn | 14 +- app/pages/sizing.wrn | 12 +- app/pages/templates.wrn | 12 +- app/pages/templates/commerce.wrn | 6 + app/pages/templates/dashboards.wrn | 6 + app/pages/templates/marketing.wrn | 6 + app/pages/templates/productivity.wrn | 6 + app/pages/themes.wrn | 14 +- app/routes.gen.ts | 132 +- app/styles/global.css | 975 ++-- app/styles/workspace-preview.css | 552 +++ app/types/wrnexus.generated.api-checks.ts | 7 + app/types/wrnexus.generated.d.ts | 32 +- bun.lock | 107 +- examples/profile.wrn | 34 + examples/sign-in.wrn | 30 + examples/workspace.wrn | 35 + package-lock.json | 874 +++- package.json | 27 +- public/playground.js | 139 +- public/showcase-images/office-map.svg | 1 + scripts/generate-catalog-pages.mjs | 67 + scripts/generate-showcase.mjs | 437 +- scripts/showcase-profiles.mjs | 109 +- showcase-manifest.json | 391 +- test/playground-interaction.test.ts | 39 + test/showcase.test.ts | 56 +- wrnexus.config.ts | 1 + 171 files changed, 21983 insertions(+), 35658 deletions(-) create mode 100644 app/layouts/gallery.wrn create mode 100644 app/pages/blocks/announcement-bar.wrn create mode 100644 app/pages/blocks/ctasection.wrn create mode 100644 app/pages/blocks/feature-card.wrn create mode 100644 app/pages/blocks/feature-grid.wrn create mode 100644 app/pages/blocks/feature-icon-card.wrn create mode 100644 app/pages/blocks/footer.wrn create mode 100644 app/pages/blocks/hero-actions.wrn create mode 100644 app/pages/blocks/hero.wrn create mode 100644 app/pages/blocks/index.wrn create mode 100644 app/pages/blocks/marketing-section-header.wrn create mode 100644 app/pages/blocks/metric-grid.wrn create mode 100644 app/pages/blocks/page-header.wrn create mode 100644 app/pages/blocks/section-header.wrn create mode 100644 app/pages/blocks/split-hero.wrn create mode 100644 app/pages/blocks/stats-bar.wrn delete mode 100644 app/pages/components/announcement-bar.wrn delete mode 100644 app/pages/components/auth-form.wrn delete mode 100644 app/pages/components/auth-split-layout.wrn delete mode 100644 app/pages/components/ctasection.wrn delete mode 100644 app/pages/components/feature-card.wrn delete mode 100644 app/pages/components/feature-grid.wrn delete mode 100644 app/pages/components/feature-icon-card.wrn delete mode 100644 app/pages/components/footer.wrn delete mode 100644 app/pages/components/hero-actions.wrn delete mode 100644 app/pages/components/hero.wrn delete mode 100644 app/pages/components/marketing-section-header.wrn delete mode 100644 app/pages/components/metric-grid.wrn delete mode 100644 app/pages/components/page-header.wrn delete mode 100644 app/pages/components/portal-dashboard.wrn delete mode 100644 app/pages/components/public-page-shell.wrn delete mode 100644 app/pages/components/section-header.wrn delete mode 100644 app/pages/components/split-hero.wrn delete mode 100644 app/pages/components/stats-bar.wrn create mode 100644 app/pages/preview/custom-modal.wrn create mode 100644 app/pages/preview/index.wrn create mode 100644 app/pages/preview/profile.wrn create mode 100644 app/pages/preview/project-board.wrn create mode 100644 app/pages/preview/scheduling.wrn create mode 100644 app/pages/preview/sign-in.wrn create mode 100644 app/pages/preview/workspace.wrn create mode 100644 app/pages/templates/commerce.wrn create mode 100644 app/pages/templates/dashboards.wrn create mode 100644 app/pages/templates/marketing.wrn create mode 100644 app/pages/templates/productivity.wrn create mode 100644 app/styles/workspace-preview.css create mode 100644 app/types/wrnexus.generated.api-checks.ts create mode 100644 examples/profile.wrn create mode 100644 examples/sign-in.wrn create mode 100644 examples/workspace.wrn create mode 100644 public/showcase-images/office-map.svg create mode 100644 scripts/generate-catalog-pages.mjs create mode 100644 test/playground-interaction.test.ts diff --git a/app/layouts/document.wrn b/app/layouts/document.wrn index 7fd2b7d..bbdc762 100644 --- a/app/layouts/document.wrn +++ b/app/layouts/document.wrn @@ -1,5 +1,7 @@ // Generated by scripts/generate-showcase.mjs. Do not edit directly. layout Document { + runtime = "server" + props { cookies = {} theme = "light" diff --git a/app/layouts/gallery.wrn b/app/layouts/gallery.wrn new file mode 100644 index 0000000..4a69aa4 --- /dev/null +++ b/app/layouts/gallery.wrn @@ -0,0 +1,8 @@ +layout Gallery { + view { +
+
WRNexus UI
+
+
+ } +} diff --git a/app/layouts/showcase.wrn b/app/layouts/showcase.wrn index 3e13b77..c0db2c9 100644 --- a/app/layouts/showcase.wrn +++ b/app/layouts/showcase.wrn @@ -9,7 +9,7 @@ layout Showcase {
- +
@@ -26,24 +26,19 @@ layout Showcase {
diff --git a/app/pages/accessibility.wrn b/app/pages/accessibility.wrn index 445fb59..a0cbb11 100644 --- a/app/pages/accessibility.wrn +++ b/app/pages/accessibility.wrn @@ -8,13 +8,10 @@ page AccessibilityGuide {
Getting Started

Accessibility

Keyboard interaction, visible focus states, labels, and reduced-motion support ship by default.

-

Configure and use it

This is the smallest useful starting point. Copy it into the indicated application file or run it from the project root, then adjust the documented values for your product.

bunx wrnexus test accessibility .
-bunx wrnexus security headers .

What changes after this

Keyboard, focus, naming, contrast, zoom, and reduced-motion behavior become explicit acceptance criteria.

-

Keyboard first

Every interactive control must be reachable in a logical order and operable without a pointer. Preserve native elements and the component's documented keyboard behavior.

Names and descriptions

Provide visible labels or accessible names for icon-only actions. Associate help and validation messages with their fields rather than relying on color alone.

Focus and overlays

Keep visible focus rings. Modal, drawer, dropdown, and popover components manage focus and dismissal; test Escape, Tab, Shift+Tab, and focus restoration.

Motion and contrast

Theme tokens preserve semantic contrast, while components honor reduced motion. Verify custom colors in light and dark modes at 200% zoom.

-

Verify the result

Type-check the application, inspect the resolved package and styles, and build the production artifact. Test the page at a narrow viewport, with keyboard navigation, and in both color modes before shipping.

bunx wrnexus typecheck .
-bunx wrnexus inspect packages .
-bunx wrnexus inspect styles .
-bunx wrnexus build .

Expected result

The commands exit successfully, the build reports the installed UI components and active theme, and the rendered page remains usable before and after hydration.

+

Overview

Keyboard interaction, visible focus states, labels, and reduced-motion support ship by default.

Configuration

Use the design switcher in the header to test this setting live.

Component behavior

The setting is inherited by components, blocks, templates, and playground previews.

+

Label controls and explain errors

Give every control a visible label. Use helperText for instructions and error for actionable feedback. Test Tab, Shift+Tab, Enter and Escape; focus must remain visible and follow the reading order.

<Input label="Email address" type="email" name="email" required="true" helperText="Use your work email." error="Enter a valid email address." />
+<Button label="Save changes" disabled="true" />

Verify the result

Open the matching component page, change its options, and try the keyboard controls. Copy the demonstrated configuration into your page, then replace sample content with your data.

+
} diff --git a/app/pages/advanced-forms.wrn b/app/pages/advanced-forms.wrn index 37aaf37..1b6caa9 100644 --- a/app/pages/advanced-forms.wrn +++ b/app/pages/advanced-forms.wrn @@ -60,13 +60,13 @@ page AdvancedFormsShowcase {
Advanced Forms

Strong Password

Theme-aware, responsive strong password component.

-
27 props · 0 slotsExplore component
+
29 props · 0 slotsExplore component
-
+
Advanced Forms

Toggle Count

Theme-aware, responsive toggle count component.

@@ -80,7 +80,7 @@ page AdvancedFormsShowcase {
Advanced Forms

Toggle Password

Accessible password field with optional show and hide controls.

-
24 props · 0 slotsExplore component
+
27 props · 0 slotsExplore component
} diff --git a/app/pages/base.wrn b/app/pages/base.wrn index a0500a9..e8fe247 100644 --- a/app/pages/base.wrn +++ b/app/pages/base.wrn @@ -10,13 +10,13 @@ page BaseShowcase { Component category

Base

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
+
26 componentsMultiple use cases85 live configurations
-
+
Base

Accordion

Theme-aware, responsive accordion component.

@@ -26,7 +26,7 @@ page BaseShowcase {
-
+
Base

Alert

Theme-aware, responsive alert component.

@@ -36,7 +36,7 @@ page BaseShowcase {
-
+
Base

Avatar

Theme-aware, responsive avatar component.

@@ -46,7 +46,7 @@ page BaseShowcase {
-
+
Base

Avatar Group

Theme-aware, responsive avatar group component.

@@ -56,11 +56,11 @@ page BaseShowcase {
@@ -70,7 +70,7 @@ page BaseShowcase {
Base

Blockquote

Theme-aware, responsive blockquote component.

-
13 props · 1 slotsExplore component
+
14 props · 1 slotsExplore component
@@ -80,13 +80,13 @@ page BaseShowcase {
Base

Button

Theme-aware, responsive button component.

-
25 props · 1 slotsExplore component
+
26 props · 1 slotsExplore component
-
+
Base

Button Group

Theme-aware, responsive button group component.

@@ -96,27 +96,27 @@ page BaseShowcase {
-

Supporting content belongs inside the default slot.

+

Supporting content belongs inside the default slot.

Base

Card

Group related content in a responsive themed surface with title, description, content, and supporting slots.

-
31 props · 1 slotsExplore component
+
41 props · 3 slotsExplore component
-
+
Base

Chat Bubble

Theme-aware, responsive chat bubble component.

@@ -136,7 +136,7 @@ page BaseShowcase {
-
+
Base

Date Picker

Theme-aware, responsive date picker component.

@@ -156,17 +156,17 @@ page BaseShowcase {
-
+
Base

Legend Indicator

Theme-aware, responsive legend indicator component.

@@ -186,11 +186,11 @@ page BaseShowcase {
@@ -216,11 +216,11 @@ page BaseShowcase {
@@ -246,27 +246,27 @@ page BaseShowcase {
-
+
Base

Tree View

Theme-aware, responsive tree view component.

diff --git a/app/pages/block-library.wrn b/app/pages/block-library.wrn index ac80985..4c74601 100644 --- a/app/pages/block-library.wrn +++ b/app/pages/block-library.wrn @@ -1,11 +1,5 @@ page BlockLibrary { - layout = "showcase" - seo { title = "UI blocks" description = "Complete sections composed from WRNexus UI components." } - view { -
- -
Composable sections

Ready-to-use UI blocks

Complete responsive sections composed exclusively from the components in this library.

-
Application UI

Application shells

Headers, sidebars, content, and command areas.

View components →
Blog & Articles

Article layouts

Editorial headers, content, author, and sharing.

View components →
Application UI

Authentication

Sign in, registration, recovery, and verification.

View components →
-
- } + layout = "gallery" + seo { title = "UI blocks" } + view {
Composed sections

Ready-to-use blocks

Real sections with live previews and complete source code.

Announcement Bar

Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.

Open example →

CTASection

Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.

Open example →

Feature Card

Present one linked feature or service with media, icon, badge, description, and action.

Open example →

Feature Grid

Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.

Open example →

Feature Icon Card

Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.

Open example →

Footer

Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.

Open example →

Hero

Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel.

Open example →

Hero Actions

Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.

Open example →

Marketing Section Header

Introduce marketing content with an eyebrow, title, description, and optional linked action.

Open example →

Metric Grid

Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.

Open example →

Page Header

Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.

Open example →

Section Header

Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.

Open example →

Split Hero

Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel.

Open example →

Stats Bar

Present a compact responsive strip of key facts, counts, performance indicators, or trust signals.

Open example →
} } diff --git a/app/pages/blocks/announcement-bar.wrn b/app/pages/blocks/announcement-bar.wrn new file mode 100644 index 0000000..3ec9cb2 --- /dev/null +++ b/app/pages/blocks/announcement-bar.wrn @@ -0,0 +1,10 @@ +page AnnouncementBarBlock { + layout = "gallery" + + seo { title = "Announcement Bar block" } + view {
← All blocks

Announcement Bar

A ready-to-use section. Copy the complete example below.

Copy this example

page AnnouncementBarExample {
+  view {
+    <AnnouncementBar badge="Public notice" badgeIcon="icon-[lucide--sparkles]" message="All composite components are now available" description="Review each component and its recommended use cases." icon="icon-[lucide--megaphone]" actionLabel="View components" actionHref="#components" actionIcon="icon-[lucide--arrow-down]" dismissible="true" dismissLabel="Announcement Bar" sticky="false" compact="false" flush="false" mobileCompact="false" mobileMessageLines="2" hideBadgeOnMobile="false" hideDescriptionOnMobile="false" flushMobile="false" size="default" width="default" variant="soft" class="showcase-instance showcase-instance--1" />
+  }
+}
} +} \ No newline at end of file diff --git a/app/pages/blocks/ctasection.wrn b/app/pages/blocks/ctasection.wrn new file mode 100644 index 0000000..f846e51 --- /dev/null +++ b/app/pages/blocks/ctasection.wrn @@ -0,0 +1,20 @@ +page CTASectionBlock { + layout = "gallery" + + seo { title = "CTASection block" } + view {
← All blocks

CTASection

A ready-to-use section. Copy the complete example below.

+
+ + Composable visual panel +

Add a screenshot, product preview, media block, chart, form, or illustration.

+

Copy this example

page CTASectionExample {
+  view {
+    <CTASection eyebrow="Ready to continue" title="Build public pages with reusable components" description="Keep application pages focused on content and business data while the shared UI package owns presentation." icon="icon-[lucide--rocket]" align="split" size="default" variant="gradient" primaryLabel="Use these components" primaryHref="#components" primaryIcon="icon-[lucide--blocks]" secondaryLabel="Back to home" secondaryHref="/" secondaryIcon="icon-[lucide--house]" visualTitle="CTASection example" visualDescription="A polished default ctasection for a modern application." visualItems='[{"id":"ctasection-0-1","key":"ctasection-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":"#ctasection-demo","actionHref":"#ctasection-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":"ctasection-0-2","key":"ctasection-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#ctasection-demo","actionHref":"#ctasection-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"]}]' maxWidth="full" fullBleed="false" class="showcase-instance showcase-instance--1"><div data-slot="visual">
+<div class="showcase-visual-panel">
+  <span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
+  <strong>Composable visual panel</strong>
+  <p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
+</div></div></CTASection>
+  }
+}
} +} \ No newline at end of file diff --git a/app/pages/blocks/feature-card.wrn b/app/pages/blocks/feature-card.wrn new file mode 100644 index 0000000..d00b831 --- /dev/null +++ b/app/pages/blocks/feature-card.wrn @@ -0,0 +1,10 @@ +page FeatureCardBlock { + layout = "gallery" + + seo { title = "Feature Card block" } + view {
← All blocks

Feature Card

A ready-to-use section. Copy the complete example below.

Copy this example

page FeatureCardExample {
+  view {
+    <FeatureCard icon="icon-[lucide--shield-check]" iconStyle="soft" eyebrow="Citizen support" title="Citizen services" description="Report incidents, request certificates, and find safety information." href="#citizen-services" external="false" actionLabel="Explore services" showArrow="true" stretchedLink="true" badge="Public" size="default" color="primary" variant="default" hover="lift" align="start" disabled="false" class="showcase-instance showcase-instance--1" />
+  }
+}
} +} \ No newline at end of file diff --git a/app/pages/blocks/feature-grid.wrn b/app/pages/blocks/feature-grid.wrn new file mode 100644 index 0000000..ceaee24 --- /dev/null +++ b/app/pages/blocks/feature-grid.wrn @@ -0,0 +1,10 @@ +page FeatureGridBlock { + layout = "gallery" + + seo { title = "Feature Grid block" } + view {
← All blocks

Feature Grid

A ready-to-use section. Copy the complete example below.

Copy this example

page FeatureGridExample {
+  view {
+    <FeatureGrid size="default" items='[{"icon":"icon-[lucide--shield-check]","eyebrow":"Citizen support","title":"Citizen services","description":"Report incidents, request certificates, and find safety information.","href":"#citizen-services","actionLabel":"Explore services","badge":"Public","color":"primary","variant":"default","hover":"lift"},{"icon":"icon-[lucide--map-pin]","eyebrow":"Directory","title":"Station directory","description":"Locate offices, jurisdictions, contacts, and public service hours.","href":"#station-directory","actionLabel":"Find a station","badge":"Directory","color":"info","variant":"soft","hover":"border"},{"icon":"icon-[lucide--radio-tower]","eyebrow":"Verified","title":"Public updates","description":"Publish official alerts, notices, advisories, and verified information.","href":"#public-updates","actionLabel":"View updates","badge":"Live","color":"success","variant":"gradient","hover":"glow"}]' columns="3" tabletColumns="2" mobileColumns="1" gap="lg" equalHeight="true" align="start" maxWidth="full" variant="default" label="Feature Grid" class="showcase-instance showcase-instance--1" />
+  }
+}
} +} \ No newline at end of file diff --git a/app/pages/blocks/feature-icon-card.wrn b/app/pages/blocks/feature-icon-card.wrn new file mode 100644 index 0000000..bb32272 --- /dev/null +++ b/app/pages/blocks/feature-icon-card.wrn @@ -0,0 +1,10 @@ +page FeatureIconCardBlock { + layout = "gallery" + + seo { title = "Feature Icon Card block" } + view {
← All blocks

Feature Icon Card

A ready-to-use section. Copy the complete example below.

Copy this example

page FeatureIconCardExample {
+  view {
+    <FeatureIconCard icon="icon-[lucide--shield-check]" title="Secure by design" description="Build with consistent validation, accessibility, and theme support." href="#security" actionLabel="Review security" badge="Core" size="default" variant="default" align="start" clickableSurface="false" descriptionTone="A polished default feature icon card for a modern application." class="showcase-instance showcase-instance--1" />
+  }
+}
} +} \ No newline at end of file diff --git a/app/pages/blocks/footer.wrn b/app/pages/blocks/footer.wrn new file mode 100644 index 0000000..7f4bf05 --- /dev/null +++ b/app/pages/blocks/footer.wrn @@ -0,0 +1,10 @@ +page FooterBlock { + layout = "gallery" + + seo { title = "Footer block" } + view {
← All blocks

Footer

A ready-to-use section. Copy the complete example below.

Copy this example

page FooterExample {
+  view {
+    <Footer size="default" label="Footer" items='[{"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}]}]' columns="4" maxWidth="wide" mobileColumns="2" copyright="© 2026 WRNexusJS. All rights reserved." class="showcase-instance showcase-instance--1" />
+  }
+}
} +} \ No newline at end of file diff --git a/app/pages/blocks/hero-actions.wrn b/app/pages/blocks/hero-actions.wrn new file mode 100644 index 0000000..a21adc6 --- /dev/null +++ b/app/pages/blocks/hero-actions.wrn @@ -0,0 +1,10 @@ +page HeroActionsBlock { + layout = "gallery" + + seo { title = "Hero Actions block" } + view {
← All blocks

Hero Actions

A ready-to-use section. Copy the complete example below.

Copy this example

page HeroActionsExample {
+  view {
+    <HeroActions actions='[{"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"}]' align="left" orientation="horizontal" stackOnMobile="true" fullWidthMobile="true" size="default" class="showcase-instance showcase-instance--1" />
+  }
+}
} +} \ No newline at end of file diff --git a/app/pages/blocks/hero.wrn b/app/pages/blocks/hero.wrn new file mode 100644 index 0000000..ae570de --- /dev/null +++ b/app/pages/blocks/hero.wrn @@ -0,0 +1,20 @@ +page HeroBlock { + layout = "gallery" + + seo { title = "Hero block" } + view {
← All blocks

Hero

A ready-to-use section. Copy the complete example below.

+
+ + Composable visual panel +

Add a screenshot, product preview, media block, chart, form, or illustration.

+

Copy this example

page HeroExample {
+  view {
+    <Hero eyebrow="Reusable public UI" eyebrowIcon="icon-[lucide--sparkles]" icon="" title="Build polished pages" highlight="with consistent hero layouts" description="Create strong first impressions for public portals, product pages, and service overviews." align="start" size="default" variant="gradient" layout="split" visualPosition="right" visualStyle="card" showDecorations="true" fullBleed="true" visualTitle="Hero example" visualDescription="A polished default hero for a modern application." visualItems='[{"id":"hero-0-1","key":"hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"hero-0-2","key":"hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' primaryLabel="Explore components" primaryHref="#components" primaryIcon="icon-[lucide--arrow-right]" secondaryLabel="Read documentation" secondaryHref="#docs" secondaryIcon="icon-[lucide--book-open]" tertiaryLabel="Hero" tertiaryHref="#hero-demo" badges='[{"id":"hero-0-1","key":"hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"hero-0-2","key":"hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' trustItems='[{"id":"hero-0-1","key":"hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"hero-0-2","key":"hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#hero-demo","actionHref":"#hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' maxWidth="wide" class="showcase-instance showcase-instance--1"><div data-slot="visual">
+<div class="showcase-visual-panel">
+  <span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
+  <strong>Composable visual panel</strong>
+  <p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
+</div></div></Hero>
+  }
+}
} +} \ No newline at end of file diff --git a/app/pages/blocks/index.wrn b/app/pages/blocks/index.wrn new file mode 100644 index 0000000..a3680db --- /dev/null +++ b/app/pages/blocks/index.wrn @@ -0,0 +1,5 @@ +page BlocksIndex { + layout = "gallery" + seo { title = "UI blocks" } + view {

Announcement Bar

Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.

Open example →

CTASection

Close a page or major section with conversion-focused copy, actions, and optional supporting visual content.

Open example →

Feature Card

Present one linked feature or service with media, icon, badge, description, and action.

Open example →

Feature Grid

Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.

Open example →

Feature Icon Card

Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.

Open example →

Footer

Render structured responsive footer navigation, pre and post content, copyright content, links, and public events.

Open example →

Hero

Build a full-width responsive hero with constrained content, actions, trust signals, and a structured or custom visual panel.

Open example →

Hero Actions

Group hero and campaign actions with consistent alignment, orientation, sizing, and responsive mobile stacking.

Open example →

Marketing Section Header

Introduce marketing content with an eyebrow, title, description, and optional linked action.

Open example →

Metric Grid

Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.

Open example →

Page Header

Introduce an internal or public page with breadcrumbs, icon, title, description, and primary or secondary actions.

Open example →

Section Header

Introduce a section with an eyebrow, title, description, alignment, and responsive heading hierarchy.

Open example →

Split Hero

Build a responsive two-column introduction balancing descriptive content with a visual, image, or structured data panel.

Open example →

Stats Bar

Present a compact responsive strip of key facts, counts, performance indicators, or trust signals.

Open example →
} +} diff --git a/app/pages/blocks/marketing-section-header.wrn b/app/pages/blocks/marketing-section-header.wrn new file mode 100644 index 0000000..bb1d516 --- /dev/null +++ b/app/pages/blocks/marketing-section-header.wrn @@ -0,0 +1,10 @@ +page MarketingSectionHeaderBlock { + layout = "gallery" + + seo { title = "Marketing Section Header block" } + view {
← All blocks

Marketing Section Header

A ready-to-use section. Copy the complete example below.

Copy this example

page MarketingSectionHeaderExample {
+  view {
+    <MarketingSectionHeader eyebrow="Platform capabilities" title="Build complete public experiences" description="Use reusable sections, cards, metrics, heroes, and CTAs." align="split" size="default" actionLabel="Explore components" actionHref="#components" actionIcon="icon-[lucide--arrow-right]" actionExternal="false" class="showcase-instance showcase-instance--1" />
+  }
+}
} +} \ No newline at end of file diff --git a/app/pages/blocks/metric-grid.wrn b/app/pages/blocks/metric-grid.wrn new file mode 100644 index 0000000..530430c --- /dev/null +++ b/app/pages/blocks/metric-grid.wrn @@ -0,0 +1,10 @@ +page MetricGridBlock { + layout = "gallery" + + seo { title = "Metric Grid block" } + view {
← All blocks

Metric Grid

A ready-to-use section. Copy the complete example below.

Copy this example

page MetricGridExample {
+  view {
+    <MetricGrid items='[{"label":"Public services","value":"24","description":"Citizen-facing services available online.","icon":"icon-[lucide--hand-heart]","trend":"+4","trendLabel":"this release","trendDirection":"up","color":"primary"},{"label":"Police stations","value":"126","description":"Searchable station and jurisdiction entries.","icon":"icon-[lucide--landmark]","trend":"Updated","trendLabel":"today","color":"info"},{"label":"Availability","value":"99.9","suffix":"%","description":"Target service availability.","icon":"icon-[lucide--activity]","trend":"Stable","trendLabel":"30 days","trendDirection":"positive","color":"success"}]' columns="3" tabletColumns="2" mobileColumns="1" gap="lg" equalHeight="true" dividers="false" size="default" variant="default" maxWidth="full" class="showcase-instance showcase-instance--1" />
+  }
+}
} +} \ No newline at end of file diff --git a/app/pages/blocks/page-header.wrn b/app/pages/blocks/page-header.wrn new file mode 100644 index 0000000..74dbeb4 --- /dev/null +++ b/app/pages/blocks/page-header.wrn @@ -0,0 +1,10 @@ +page PageHeaderBlock { + layout = "gallery" + + seo { title = "Page Header block" } + view {
← All blocks

Page Header

A ready-to-use section. Copy the complete example below.

Copy this example

page PageHeaderExample {
+  view {
+    <PageHeader eyebrow="Component showcase" title="Page headers with clear hierarchy" description="Use PageHeader for services, directories, legal pages, guides, dashboards, and public information." icon="icon-[lucide--panel-top]" align="start" centered="false" compact="false" size="default" maxWidth="full" showBreadcrumbs="true" breadcrumbs='[{"label":"Home","href":"/","icon":"icon-[lucide--house]"},{"label":"Components","href":"/base"},{"label":"Page header","current":true}]' breadcrumbParentHref="#page-header-demo" primaryLabel="Primary action" primaryHref="#primary" primaryIcon="icon-[lucide--arrow-down]" secondaryLabel="Secondary action" secondaryHref="#secondary" secondaryIcon="icon-[lucide--house]" variant="default" borderBottom="true" class="showcase-instance showcase-instance--1" />
+  }
+}
} +} \ No newline at end of file diff --git a/app/pages/blocks/section-header.wrn b/app/pages/blocks/section-header.wrn new file mode 100644 index 0000000..2b9b182 --- /dev/null +++ b/app/pages/blocks/section-header.wrn @@ -0,0 +1,10 @@ +page SectionHeaderBlock { + layout = "gallery" + + seo { title = "Section Header block" } + view {
← All blocks

Section Header

A ready-to-use section. Copy the complete example below.

Copy this example

page SectionHeaderExample {
+  view {
+    <SectionHeader eyebrow="Public services" title="Everything citizens need" description="Discover online services, directories, guidance, and verified public information." align="left" size="default" headingLevel="2" maxWidth="3xl" class="showcase-instance showcase-instance--1" />
+  }
+}
} +} \ No newline at end of file diff --git a/app/pages/blocks/split-hero.wrn b/app/pages/blocks/split-hero.wrn new file mode 100644 index 0000000..8f4d0ae --- /dev/null +++ b/app/pages/blocks/split-hero.wrn @@ -0,0 +1,20 @@ +page SplitHeroBlock { + layout = "gallery" + + seo { title = "Split Hero block" } + view {
← All blocks

Split Hero

A ready-to-use section. Copy the complete example below.

+
+ + Composable visual panel +

Add a screenshot, product preview, media block, chart, form, or illustration.

+

Copy this example

page SplitHeroExample {
+  view {
+    <SplitHero eyebrow="Balanced layout" title="Combine detailed content" highlight="with a strong visual panel" description="Use SplitHero for product explanations, department introductions, campaigns, and feature storytelling." primaryLabel="View public services" primaryHref="#services" primaryIcon="icon-[lucide--arrow-right]" secondaryLabel="Contact department" secondaryHref="#contact" secondaryIcon="icon-[lucide--phone]" visualPosition="right" reverse="false" ratio="balanced" align="start" size="default" variant="default" maxWidth="wide" fullBleed="true" flushMobile="false" descriptionWeight="A polished default split hero for a modern application." mobileStack="true" visualTitle="Split Hero example" visualDescription="A polished default split hero for a modern application." visualItems='[{"id":"split-hero-0-1","key":"split-hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"split-hero-0-2","key":"split-hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' trustItems='[{"id":"split-hero-0-1","key":"split-hero-0-1","value":"primary","label":"Primary workflow","title":"Primary workflow","description":"A clean default configuration for everyday product interfaces.","text":"A configurable sample message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":true,"selected":true,"checked":true,"disabled":false,"outgoing":false,"open":true,"number":1,"count":16,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 1","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]},{"id":"split-hero-0-2","key":"split-hero-0-2","value":"secondary","label":"Additional option","title":"Supporting example","description":"A clean default configuration for everyday product interfaces.","text":"Another configurable message.","href":"#split-hero-demo","actionHref":"#split-hero-demo","actionLabel":"View details","icon":"icon-[lucide--sparkles]","iconClass":"icon-[lucide--sparkles]","variant":"primary","status":"Active","time":"09:30","current":false,"selected":false,"checked":false,"disabled":false,"outgoing":true,"open":true,"number":2,"count":32,"percentage":72,"color":"#7c3aed","target":"_self","ariaLabel":"Open primary workflow 2","items":[{"label":"Nested option A","value":"nested-a"},{"label":"Nested option B","value":"nested-b"}],"links":[{"label":"Documentation","href":"#documentation"},{"label":"API reference","href":"#api-reference"}],"values":["Included","Standard"]}]' class="showcase-instance showcase-instance--1"><div data-slot="visual">
+<div class="showcase-visual-panel">
+  <span class="icon-[lucide--layout-template] size-12" aria-hidden="true"></span>
+  <strong>Composable visual panel</strong>
+  <p>Add a screenshot, product preview, media block, chart, form, or illustration.</p>
+</div></div></SplitHero>
+  }
+}
} +} \ No newline at end of file diff --git a/app/pages/blocks/stats-bar.wrn b/app/pages/blocks/stats-bar.wrn new file mode 100644 index 0000000..29a828e --- /dev/null +++ b/app/pages/blocks/stats-bar.wrn @@ -0,0 +1,10 @@ +page StatsBarBlock { + layout = "gallery" + + seo { title = "Stats Bar block" } + view {
← All blocks

Stats Bar

A ready-to-use section. Copy the complete example below.

Copy this example

page StatsBarExample {
+  view {
+    <StatsBar items='[{"label":"Composite components","value":"18","description":"Reusable public-page building blocks","icon":"icon-[lucide--blocks]","color":"primary"},{"label":"Rendering","value":"SSR","description":"Server-first WRNexusJS rendering","icon":"icon-[lucide--server]","color":"info"},{"label":"Responsive","value":"Yes","description":"Mobile, tablet, and desktop layouts","icon":"icon-[lucide--monitor-smartphone]","color":"success"},{"label":"Theme aware","value":"Yes","description":"Active theme and accent palettes","icon":"icon-[lucide--palette]","color":"warning"}]' columns="4" compact="true" dividers="true" icons="true" size="default" variant="raised" maxWidth="xl" mobileColumns="1" class="showcase-instance showcase-instance--1" />
+  }
+}
} +} \ No newline at end of file diff --git a/app/pages/colors.wrn b/app/pages/colors.wrn index d39923e..7ef643d 100644 --- a/app/pages/colors.wrn +++ b/app/pages/colors.wrn @@ -8,13 +8,11 @@ page ColorsGuide {
Customization

Colors

Semantic primary, secondary, success, warning, danger, and info tokens remain available in every palette.

-

Configure and use it

This is the smallest useful starting point. Copy it into the indicated application file or run it from the project root, then adjust the documented values for your product.

<Button color="primary">Save</Button>
-<Alert color="danger">Unable to save</Alert>

What changes after this

Status and hierarchy use named semantic roles that remain understandable in both light and dark modes.

-

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.

-

Verify the result

Type-check the application, inspect the resolved package and styles, and build the production artifact. Test the page at a narrow viewport, with keyboard navigation, and in both color modes before shipping.

bunx wrnexus typecheck .
-bunx wrnexus inspect packages .
-bunx wrnexus inspect styles .
-bunx wrnexus build .

Expected result

The commands exit successfully, the build reports the installed UI components and active theme, and the rendered page remains usable before and after hydration.

+

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.

+

Choose color by meaning

Use primary for the main action, danger for destructive actions and success for completion. Always include text or an icon so color is not the only signal.

<Button label="Save" color="primary" />
+<Button label="Delete record" color="danger" />
+<Badge label="Active" color="success" />

Verify the result

Open the matching component page, change its options, and try the keyboard controls. Copy the demonstrated configuration into your page, then replace sample content with your data.

+
} diff --git a/app/pages/components/accordion.wrn b/app/pages/components/accordion.wrn index e711faf..5399610 100644 --- a/app/pages/components/accordion.wrn +++ b/app/pages/components/accordion.wrn @@ -6,13 +6,13 @@ page AccordionDetail { state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" 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_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"value\":\"workspace\",\"label\":\"How do I create a workspace?\",\"content\":\"Choose Create workspace, add a name, and invite your team. You can update the details any time in Settings.\"},{\"value\":\"billing\",\"label\":\"Can I change my plan later?\",\"content\":\"Yes. Open Billing to compare plans and choose the one that suits your team.\"},{\"value\":\"security\",\"label\":\"How is my account protected?\",\"content\":\"Enable two-step verification and add a recovery method to keep your account secure.\"}]") + state playground_defaultOpen = JSON.parse(ctx.url.searchParams.get("pg_defaultOpen") ?? "[\"workspace\"]") 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_indicator = ctx.url.searchParams.get("pg_indicator") ?? "chevron" + state playground_indicatorPosition = ctx.url.searchParams.get("pg_indicatorPosition") ?? "end" 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" @@ -43,224 +43,36 @@ page AccordionDetail {
Component code
- 
<Accordion
-  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"
-      ]
-    }
-  ]'
-  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"
-      ]
-    }
-  ]'
-/>
+ 
page AccordionExample {
+  state items = [
+  {
+    "value": "workspace",
+    "label": "How do I create a workspace?",
+    "content": "Choose Create workspace, add a name, and invite your team. You can update the details any time in Settings."
+  },
+  {
+    "value": "billing",
+    "label": "Can I change my plan later?",
+    "content": "Yes. Open Billing to compare plans and choose the one that suits your team."
+  },
+  {
+    "value": "security",
+    "label": "How is my account protected?",
+    "content": "Enable two-step verification and add a recovery method to keep your account secure."
+  }
+]
+  state defaultOpen = [
+  "workspace"
+]
+  view {
+    <Accordion
+      items="{items}"
+      defaultOpen="{defaultOpen}"
+      indicator="chevron"
+      indicatorPosition="end"
+    />
+  }
+}
Event outputInteract with the preview to inspect the typed payload.
@@ -269,219 +81,23 @@ page AccordionDetail {
Component props17 controls
+ "workspace" +]
@@ -490,707 +106,145 @@ page AccordionDetail {
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.

+
Recommended

Plain disclosure rows

Unframed questions with trailing chevrons and aligned answers.

01
Live preview
- -
+ +
-
+
Component usage.wrn
- 
<Accordion
-  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"
-      ]
-    }
-  ]'
-  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"
-      ]
-    }
-  ]'
-/>
+ 
page AccordionExample {
+  state items = [
+  {
+    "value": "workspace",
+    "label": "How do I create a workspace?",
+    "content": "Choose Create workspace, add a name, and invite your team. You can update the details any time in Settings."
+  },
+  {
+    "value": "billing",
+    "label": "Can I change my plan later?",
+    "content": "Yes. Open Billing to compare plans and choose the one that suits your team."
+  },
+  {
+    "value": "security",
+    "label": "How is my account protected?",
+    "content": "Enable two-step verification and add a recovery method to keep your account secure."
+  }
+]
+  state defaultOpen = [
+  "workspace"
+]
+  view {
+    <Accordion
+      items="{items}"
+      defaultOpen="{defaultOpen}"
+      indicator="chevron"
+      indicatorPosition="end"
+    />
+  }
+}
-
Dense UI

Compact application

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

+
Compact

Bordered group

One shared border with leading indicators.

02
Live preview
- -
+ +
-
+
Component usage.wrn
- 
<Accordion
-  size="sm"
-  variant="secondary"
-  items='[
-    {
-      "id": "accordion-1-1",
-      "key": "accordion-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": "#accordion-demo",
-      "actionHref": "#accordion-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": "accordion-1-2",
-      "key": "accordion-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#accordion-demo",
-      "actionHref": "#accordion-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"
-      ]
-    }
-  ]'
-  defaultOpen='[
-    {
-      "id": "accordion-1-1",
-      "key": "accordion-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": "#accordion-demo",
-      "actionHref": "#accordion-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": "accordion-1-2",
-      "key": "accordion-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#accordion-demo",
-      "actionHref": "#accordion-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"
-      ]
-    }
-  ]'
-/>
+ 
page AccordionExample {
+  state items = [
+  {
+    "value": "workspace",
+    "label": "How do I create a workspace?",
+    "content": "Choose Create workspace, add a name, and invite your team. You can update the details any time in Settings."
+  },
+  {
+    "value": "billing",
+    "label": "Can I change my plan later?",
+    "content": "Yes. Open Billing to compare plans and choose the one that suits your team."
+  },
+  {
+    "value": "security",
+    "label": "How is my account protected?",
+    "content": "Enable two-step verification and add a recovery method to keep your account secure."
+  }
+]
+  state defaultOpen = [
+  "workspace"
+]
+  view {
+    <Accordion
+      size="sm"
+      variant="secondary"
+      items="{items}"
+      defaultOpen="{defaultOpen}"
+      bordered="true"
+    />
+  }
+}
-
Extended

Rich configuration

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

+
Advanced

Separate panels

Individually framed rows; multiple answers can stay open.

03
Live preview
- -
+ +
-
+
Component usage.wrn
- 
<Accordion
-  size="lg"
-  variant="success"
-  items='[
-    {
-      "id": "accordion-2-1",
-      "key": "accordion-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": "#accordion-demo",
-      "actionHref": "#accordion-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": "accordion-2-2",
-      "key": "accordion-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": "#accordion-demo",
-      "actionHref": "#accordion-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"
-      ]
-    }
-  ]'
-  defaultOpen='[
-    {
-      "id": "accordion-2-1",
-      "key": "accordion-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": "#accordion-demo",
-      "actionHref": "#accordion-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": "accordion-2-2",
-      "key": "accordion-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": "#accordion-demo",
-      "actionHref": "#accordion-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"
-      ]
-    }
-  ]'
-/>
+ 
page AccordionExample {
+  state items = [
+  {
+    "value": "workspace",
+    "label": "How do I create a workspace?",
+    "content": "Choose Create workspace, add a name, and invite your team. You can update the details any time in Settings."
+  },
+  {
+    "value": "billing",
+    "label": "Can I change my plan later?",
+    "content": "Yes. Open Billing to compare plans and choose the one that suits your team."
+  },
+  {
+    "value": "security",
+    "label": "How is my account protected?",
+    "content": "Enable two-step verification and add a recovery method to keep your account secure."
+  }
+]
+  state defaultOpen = [
+  "workspace"
+]
+  view {
+    <Accordion
+      size="lg"
+      variant="success"
+      items="{items}"
+      defaultOpen="{defaultOpen}"
+      multiple="true"
+      indicator="chevron"
+      indicatorPosition="end"
+      bordered="true"
+      separated="true"
+    />
+  }
+}
@@ -1216,7 +270,7 @@ if (component) registerOutputHandler(component, "close", (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
variantstring"default"No
classstring""No
idstring"accordion"No
itemsunknown[][]No
defaultOpenunknown[][]No
multiplebooleanfalseNo
alwaysOpenbooleanfalseNo
disabledbooleanfalseNo
indicatorstring"plus"No
indicatorPositionstring"start"No
showIndicatorbooleantrueNo
borderedbooleanfalseNo
separatedbooleanfalseNo
flushbooleanfalseNo
contentItalicbooleanfalseNo
@@ -227,63 +241,70 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Grouped options"
-  name="advanced-select-2"
-  value="design"
-  values='[]'
-  options='[]'
-  groups='[
-    {
-      "label": "Product",
-      "options": [
-        {
-          "value": "design",
-          "label": "Design",
-          "description": "Product and visual design",
-          "icon": "icon-[lucide--palette]",
-          "color": "#8b5cf6",
-          "avatar": "/showcase-images/avatar-design.svg"
-        },
-        {
-          "value": "engineering",
-          "label": "Engineering",
-          "description": "Platform and application engineering",
-          "icon": "icon-[lucide--code-2]",
-          "color": "#0ea5e9",
-          "avatar": "/showcase-images/avatar-engineering.svg"
-        }
-      ]
-    },
-    {
-      "label": "Business",
-      "options": [
-        {
-          "value": "growth",
-          "label": "Growth",
-          "description": "Marketing and customer growth",
-          "icon": "icon-[lucide--trending-up]",
-          "color": "#10b981",
-          "avatar": "/showcase-images/avatar-growth.svg"
-        },
-        {
-          "value": "support",
-          "label": "Support",
-          "description": "Customer operations",
-          "disabled": false
-        }
-      ]
-    }
-  ]'
-  placeholder="Choose a team"
-  searchable="false"
-  allowEmpty="false"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = []
+  state groups = [
+  {
+    "label": "Product",
+    "options": [
+      {
+        "value": "design",
+        "label": "Design",
+        "description": "Product and visual design",
+        "icon": "icon-[lucide--palette]",
+        "color": "#8b5cf6",
+        "avatar": "/showcase-images/avatar-design.svg"
+      },
+      {
+        "value": "engineering",
+        "label": "Engineering",
+        "description": "Platform and application engineering",
+        "icon": "icon-[lucide--code-2]",
+        "color": "#0ea5e9",
+        "avatar": "/showcase-images/avatar-engineering.svg"
+      }
+    ]
+  },
+  {
+    "label": "Business",
+    "options": [
+      {
+        "value": "growth",
+        "label": "Growth",
+        "description": "Marketing and customer growth",
+        "icon": "icon-[lucide--trending-up]",
+        "color": "#10b981",
+        "avatar": "/showcase-images/avatar-growth.svg"
+      },
+      {
+        "value": "support",
+        "label": "Support",
+        "description": "Customer operations",
+        "disabled": false
+      }
+    ]
+  }
+]
+  view {
+    <AdvancedSelect
+      label="Grouped options"
+      name="advanced-select-2"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      searchable="false"
+      allowEmpty="false"
+    />
+  }
+}
@@ -295,54 +316,61 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Fixed-position dropdown"
-  name="advanced-select-3"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  searchable="false"
-  allowEmpty="false"
-  fixed="true"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Fixed-position dropdown"
+      name="advanced-select-3"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      searchable="false"
+      allowEmpty="false"
+      fixed="true"
+    />
+  }
+}
@@ -354,54 +382,61 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Placeholder with icon"
-  name="advanced-select-4"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a workspace"
-  placeholderIcon="icon-[lucide--building-2]"
-  searchable="false"
-  allowEmpty="false"
-  optionTemplate="icon"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Placeholder with icon"
+      name="advanced-select-4"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a workspace"
+      placeholderIcon="icon-[lucide--building-2]"
+      searchable="false"
+      allowEmpty="false"
+      optionTemplate="icon"
+    />
+  }
+}
@@ -413,52 +448,59 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Allow empty selection"
-  name="advanced-select-5"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  searchable="false"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Allow empty selection"
+      name="advanced-select-5"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      searchable="false"
+    />
+  }
+}
@@ -470,56 +512,63 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Multiple selection"
-  name="advanced-select-6"
-  values='[
-    "design",
-    "engineering"
-  ]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  multiple="true"
-  searchable="false"
-  allowEmpty="false"
-/>
+ 
page AdvancedSelectExample {
+  state values = [
+  "design",
+  "engineering"
+]
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Multiple selection"
+      name="advanced-select-6"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      multiple="true"
+      searchable="false"
+      allowEmpty="false"
+    />
+  }
+}
@@ -531,66 +580,73 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Multiple selection with optgroups"
-  name="advanced-select-7"
-  values='[
-    "design",
-    "engineering"
-  ]'
-  options='[]'
-  groups='[
-    {
-      "label": "Product",
-      "options": [
-        {
-          "value": "design",
-          "label": "Design",
-          "description": "Product and visual design",
-          "icon": "icon-[lucide--palette]",
-          "color": "#8b5cf6",
-          "avatar": "/showcase-images/avatar-design.svg"
-        },
-        {
-          "value": "engineering",
-          "label": "Engineering",
-          "description": "Platform and application engineering",
-          "icon": "icon-[lucide--code-2]",
-          "color": "#0ea5e9",
-          "avatar": "/showcase-images/avatar-engineering.svg"
-        }
-      ]
-    },
-    {
-      "label": "Business",
-      "options": [
-        {
-          "value": "growth",
-          "label": "Growth",
-          "description": "Marketing and customer growth",
-          "icon": "icon-[lucide--trending-up]",
-          "color": "#10b981",
-          "avatar": "/showcase-images/avatar-growth.svg"
-        },
-        {
-          "value": "support",
-          "label": "Support",
-          "description": "Customer operations",
-          "disabled": false
-        }
-      ]
-    }
-  ]'
-  placeholder="Choose a team"
-  multiple="true"
-  searchable="false"
-  allowEmpty="false"
-/>
+ 
page AdvancedSelectExample {
+  state values = [
+  "design",
+  "engineering"
+]
+  state options = []
+  state groups = [
+  {
+    "label": "Product",
+    "options": [
+      {
+        "value": "design",
+        "label": "Design",
+        "description": "Product and visual design",
+        "icon": "icon-[lucide--palette]",
+        "color": "#8b5cf6",
+        "avatar": "/showcase-images/avatar-design.svg"
+      },
+      {
+        "value": "engineering",
+        "label": "Engineering",
+        "description": "Platform and application engineering",
+        "icon": "icon-[lucide--code-2]",
+        "color": "#0ea5e9",
+        "avatar": "/showcase-images/avatar-engineering.svg"
+      }
+    ]
+  },
+  {
+    "label": "Business",
+    "options": [
+      {
+        "value": "growth",
+        "label": "Growth",
+        "description": "Marketing and customer growth",
+        "icon": "icon-[lucide--trending-up]",
+        "color": "#10b981",
+        "avatar": "/showcase-images/avatar-growth.svg"
+      },
+      {
+        "value": "support",
+        "label": "Support",
+        "description": "Customer operations",
+        "disabled": false
+      }
+    ]
+  }
+]
+  view {
+    <AdvancedSelect
+      label="Multiple selection with optgroups"
+      name="advanced-select-7"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      multiple="true"
+      searchable="false"
+      allowEmpty="false"
+    />
+  }
+}
@@ -602,57 +658,64 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Multiple selection with option templates"
-  name="advanced-select-8"
-  values='[
-    "design",
-    "engineering"
-  ]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  multiple="true"
-  searchable="false"
-  allowEmpty="false"
-  optionTemplate="icon"
-/>
+ 
page AdvancedSelectExample {
+  state values = [
+  "design",
+  "engineering"
+]
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Multiple selection with option templates"
+      name="advanced-select-8"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      multiple="true"
+      searchable="false"
+      allowEmpty="false"
+      optionTemplate="icon"
+    />
+  }
+}
@@ -664,57 +727,64 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Multiple selection with counter"
-  name="advanced-select-9"
-  values='[
-    "design",
-    "engineering"
-  ]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  multiple="true"
-  searchable="false"
-  allowEmpty="false"
-  showCounter="true"
-/>
+ 
page AdvancedSelectExample {
+  state values = [
+  "design",
+  "engineering"
+]
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Multiple selection with counter"
+      name="advanced-select-9"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      multiple="true"
+      searchable="false"
+      allowEmpty="false"
+      showCounter="true"
+    />
+  }
+}
@@ -726,58 +796,65 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Multiple selection with conditional counter"
-  name="advanced-select-10"
-  values='[
-    "design",
-    "engineering"
-  ]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  multiple="true"
-  searchable="false"
-  allowEmpty="false"
-  maxSelections="3"
-  showCounter="true"
-/>
+ 
page AdvancedSelectExample {
+  state values = [
+  "design",
+  "engineering"
+]
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Multiple selection with conditional counter"
+      name="advanced-select-10"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      multiple="true"
+      searchable="false"
+      allowEmpty="false"
+      maxSelections="3"
+      showCounter="true"
+    />
+  }
+}
@@ -789,55 +866,62 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Counter with option templates"
-  name="advanced-select-11"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  searchable="false"
-  allowEmpty="false"
-  showCounter="true"
-  optionTemplate="icon"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Counter with option templates"
+      name="advanced-select-11"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      searchable="false"
+      allowEmpty="false"
+      showCounter="true"
+      optionTemplate="icon"
+    />
+  }
+}
@@ -849,52 +933,59 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Searchable dropdown"
-  name="advanced-select-12"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  allowEmpty="false"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Searchable dropdown"
+      name="advanced-select-12"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      allowEmpty="false"
+    />
+  }
+}
@@ -906,53 +997,60 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Minimum search length"
-  name="advanced-select-13"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  allowEmpty="false"
-  minSearchLength="3"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Minimum search length"
+      name="advanced-select-13"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      allowEmpty="false"
+      minSearchLength="3"
+    />
+  }
+}
@@ -964,53 +1062,60 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Search result limit"
-  name="advanced-select-14"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  allowEmpty="false"
-  searchResultLimit="3"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Search result limit"
+      name="advanced-select-14"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      allowEmpty="false"
+      searchResultLimit="3"
+    />
+  }
+}
@@ -1022,53 +1127,60 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Scroll to selected option"
-  name="advanced-select-15"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  searchable="false"
-  allowEmpty="false"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Scroll to selected option"
+      name="advanced-select-15"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      searchable="false"
+      allowEmpty="false"
+    />
+  }
+}
@@ -1080,53 +1192,60 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Search match mode"
-  name="advanced-select-16"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  allowEmpty="false"
-  searchMode="startsWith"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Search match mode"
+      name="advanced-select-16"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      allowEmpty="false"
+      searchMode="startsWith"
+    />
+  }
+}
@@ -1138,52 +1257,59 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Search labels and descriptions"
-  name="advanced-select-17"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  allowEmpty="false"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Search labels and descriptions"
+      name="advanced-select-17"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      allowEmpty="false"
+    />
+  }
+}
@@ -1195,54 +1321,61 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Tag-style selection"
-  name="advanced-select-18"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  searchable="false"
-  allowEmpty="false"
-  tags="true"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Tag-style selection"
+      name="advanced-select-18"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      searchable="false"
+      allowEmpty="false"
+      tags="true"
+    />
+  }
+}
@@ -1254,55 +1387,62 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Disabled tag selection"
-  name="advanced-select-19"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  searchable="false"
-  allowEmpty="false"
-  tags="true"
-  disabled="true"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Disabled tag selection"
+      name="advanced-select-19"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      searchable="false"
+      allowEmpty="false"
+      tags="true"
+      disabled="true"
+    />
+  }
+}
@@ -1314,54 +1454,61 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Option template with icons"
-  name="advanced-select-20"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  searchable="false"
-  allowEmpty="false"
-  optionTemplate="icon"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Option template with icons"
+      name="advanced-select-20"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      searchable="false"
+      allowEmpty="false"
+      optionTemplate="icon"
+    />
+  }
+}
@@ -1373,54 +1520,61 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Option template with avatars"
-  name="advanced-select-21"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  searchable="false"
-  allowEmpty="false"
-  optionTemplate="avatar"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Option template with avatars"
+      name="advanced-select-21"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      searchable="false"
+      allowEmpty="false"
+      optionTemplate="avatar"
+    />
+  }
+}
@@ -1432,54 +1586,61 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Option template with color indicators"
-  name="advanced-select-22"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  searchable="false"
-  allowEmpty="false"
-  optionTemplate="color"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Option template with color indicators"
+      name="advanced-select-22"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      searchable="false"
+      allowEmpty="false"
+      optionTemplate="color"
+    />
+  }
+}
@@ -1491,54 +1652,61 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  size="lg"
-  label="Advanced select sizes"
-  name="advanced-select-23"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  searchable="false"
-  allowEmpty="false"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      size="lg"
+      label="Advanced select sizes"
+      name="advanced-select-23"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      searchable="false"
+      allowEmpty="false"
+    />
+  }
+}
@@ -1550,54 +1718,61 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Disabled advanced select"
-  name="advanced-select-24"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  searchable="false"
-  allowEmpty="false"
-  disabled="true"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Disabled advanced select"
+      name="advanced-select-24"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      searchable="false"
+      allowEmpty="false"
+      disabled="true"
+    />
+  }
+}
@@ -1609,53 +1784,60 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Inside a modal"
-  name="advanced-select-25"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  searchable="false"
-  allowEmpty="false"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Inside a modal"
+      name="advanced-select-25"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      searchable="false"
+      allowEmpty="false"
+    />
+  }
+}
@@ -1667,54 +1849,61 @@ page AdvancedSelectDetail {
Live preview
- -
+ +
Component usage.wrn
- 
<AdvancedSelect
-  label="Validation states"
-  name="advanced-select-26"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  searchable="false"
-  allowEmpty="false"
-  required="true"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Validation states"
+      name="advanced-select-26"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      searchable="false"
+      allowEmpty="false"
+      required="true"
+    />
+  }
+}
@@ -1726,54 +1915,61 @@ page AdvancedSelectDetail {
Live preview
- -
+ +
Component usage.wrn
- 
<AdvancedSelect
-  label="Dynamic validation styling"
-  name="advanced-select-27"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  searchable="false"
-  allowEmpty="false"
-  required="true"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Dynamic validation styling"
+      name="advanced-select-27"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      searchable="false"
+      allowEmpty="false"
+      required="true"
+    />
+  }
+}
@@ -1785,53 +1981,60 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Add or remove options"
-  name="advanced-select-28"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  searchable="false"
-  allowEmpty="false"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Add or remove options"
+      name="advanced-select-28"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      searchable="false"
+      allowEmpty="false"
+    />
+  }
+}
@@ -1843,56 +2046,63 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Add or remove options in multiple mode"
-  name="advanced-select-29"
-  values='[
-    "design",
-    "engineering"
-  ]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  multiple="true"
-  searchable="false"
-  allowEmpty="false"
-/>
+ 
page AdvancedSelectExample {
+  state values = [
+  "design",
+  "engineering"
+]
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Add or remove options in multiple mode"
+      name="advanced-select-29"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      multiple="true"
+      searchable="false"
+      allowEmpty="false"
+    />
+  }
+}
@@ -1904,53 +2114,60 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Set a single value programmatically"
-  name="advanced-select-30"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  searchable="false"
-  allowEmpty="false"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Set a single value programmatically"
+      name="advanced-select-30"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      searchable="false"
+      allowEmpty="false"
+    />
+  }
+}
@@ -1962,56 +2179,63 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Set multiple values programmatically"
-  name="advanced-select-31"
-  values='[
-    "design",
-    "engineering"
-  ]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  multiple="true"
-  searchable="false"
-  allowEmpty="false"
-/>
+ 
page AdvancedSelectExample {
+  state values = [
+  "design",
+  "engineering"
+]
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Set multiple values programmatically"
+      name="advanced-select-31"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      multiple="true"
+      searchable="false"
+      allowEmpty="false"
+    />
+  }
+}
@@ -2023,55 +2247,62 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Remote data source"
-  name="advanced-select-32"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  allowEmpty="false"
-  minSearchLength="2"
-  remote="true"
-  remoteUrl="/api/teams"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Remote data source"
+      name="advanced-select-32"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      allowEmpty="false"
+      minSearchLength="2"
+      remote="true"
+      remoteUrl="/api/teams"
+    />
+  }
+}
@@ -2083,58 +2314,65 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Remote data source (multiple)"
-  name="advanced-select-33"
-  values='[
-    "design",
-    "engineering"
-  ]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  multiple="true"
-  allowEmpty="false"
-  minSearchLength="2"
-  remote="true"
-  remoteUrl="/api/teams"
-/>
+ 
page AdvancedSelectExample {
+  state values = [
+  "design",
+  "engineering"
+]
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Remote data source (multiple)"
+      name="advanced-select-33"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      multiple="true"
+      allowEmpty="false"
+      minSearchLength="2"
+      remote="true"
+      remoteUrl="/api/teams"
+    />
+  }
+}
@@ -2146,59 +2384,66 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Remote data tags"
-  name="advanced-select-34"
-  values='[
-    "design",
-    "engineering"
-  ]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  multiple="true"
-  allowEmpty="false"
-  tags="true"
-  minSearchLength="2"
-  remote="true"
-  remoteUrl="/api/teams"
-/>
+ 
page AdvancedSelectExample {
+  state values = [
+  "design",
+  "engineering"
+]
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Remote data tags"
+      name="advanced-select-34"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      multiple="true"
+      allowEmpty="false"
+      tags="true"
+      minSearchLength="2"
+      remote="true"
+      remoteUrl="/api/teams"
+    />
+  }
+}
@@ -2210,56 +2455,63 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Option templates with remote data"
-  name="advanced-select-35"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  allowEmpty="false"
-  minSearchLength="2"
-  optionTemplate="icon"
-  remote="true"
-  remoteUrl="/api/teams"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Option templates with remote data"
+      name="advanced-select-35"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      allowEmpty="false"
+      minSearchLength="2"
+      optionTemplate="icon"
+      remote="true"
+      remoteUrl="/api/teams"
+    />
+  }
+}
@@ -2271,57 +2523,64 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Conditional counter with remote data"
-  name="advanced-select-36"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  allowEmpty="false"
-  minSearchLength="2"
-  maxSelections="3"
-  showCounter="true"
-  remote="true"
-  remoteUrl="/api/teams"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Conditional counter with remote data"
+      name="advanced-select-36"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      allowEmpty="false"
+      minSearchLength="2"
+      maxSelections="3"
+      showCounter="true"
+      remote="true"
+      remoteUrl="/api/teams"
+    />
+  }
+}
@@ -2333,56 +2592,63 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Avatar template with remote data"
-  name="advanced-select-37"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  allowEmpty="false"
-  minSearchLength="2"
-  optionTemplate="avatar"
-  remote="true"
-  remoteUrl="/api/teams"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Avatar template with remote data"
+      name="advanced-select-37"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      allowEmpty="false"
+      minSearchLength="2"
+      optionTemplate="avatar"
+      remote="true"
+      remoteUrl="/api/teams"
+    />
+  }
+}
@@ -2394,53 +2660,60 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Preselected values"
-  name="advanced-select-38"
-  value="engineering"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  searchable="false"
-  allowEmpty="false"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Preselected values"
+      name="advanced-select-38"
+      value="engineering"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      searchable="false"
+      allowEmpty="false"
+    />
+  }
+}
@@ -2452,56 +2725,63 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Infinite scroll"
-  name="advanced-select-39"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  allowEmpty="false"
-  remote="true"
-  remoteUrl="/api/teams"
-  infinite="true"
-  hasMore="true"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Infinite scroll"
+      name="advanced-select-39"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      allowEmpty="false"
+      remote="true"
+      remoteUrl="/api/teams"
+      infinite="true"
+      hasMore="true"
+    />
+  }
+}
@@ -2513,54 +2793,61 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Inside overflow-hidden containers"
-  name="advanced-select-40"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  searchable="false"
-  allowEmpty="false"
-  fixed="true"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Inside overflow-hidden containers"
+      name="advanced-select-40"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      searchable="false"
+      allowEmpty="false"
+      fixed="true"
+    />
+  }
+}
@@ -2572,53 +2859,60 @@ page AdvancedSelectDetail {
Live preview
- +
Component usage.wrn
- 
<AdvancedSelect
-  label="Destroy and reinitialize"
-  name="advanced-select-41"
-  value="design"
-  values='[]'
-  options='[
-    {
-      "value": "design",
-      "label": "Design",
-      "description": "Product and visual design",
-      "icon": "icon-[lucide--palette]",
-      "color": "#8b5cf6",
-      "avatar": "/showcase-images/avatar-design.svg"
-    },
-    {
-      "value": "engineering",
-      "label": "Engineering",
-      "description": "Platform and application engineering",
-      "icon": "icon-[lucide--code-2]",
-      "color": "#0ea5e9",
-      "avatar": "/showcase-images/avatar-engineering.svg"
-    },
-    {
-      "value": "growth",
-      "label": "Growth",
-      "description": "Marketing and customer growth",
-      "icon": "icon-[lucide--trending-up]",
-      "color": "#10b981",
-      "avatar": "/showcase-images/avatar-growth.svg"
-    },
-    {
-      "value": "support",
-      "label": "Support",
-      "description": "Customer operations",
-      "disabled": false
-    }
-  ]'
-  groups='[]'
-  placeholder="Choose a team"
-  searchable="false"
-  allowEmpty="false"
-/>
+ 
page AdvancedSelectExample {
+  state values = []
+  state options = [
+  {
+    "value": "design",
+    "label": "Design",
+    "description": "Product and visual design",
+    "icon": "icon-[lucide--palette]",
+    "color": "#8b5cf6",
+    "avatar": "/showcase-images/avatar-design.svg"
+  },
+  {
+    "value": "engineering",
+    "label": "Engineering",
+    "description": "Platform and application engineering",
+    "icon": "icon-[lucide--code-2]",
+    "color": "#0ea5e9",
+    "avatar": "/showcase-images/avatar-engineering.svg"
+  },
+  {
+    "value": "growth",
+    "label": "Growth",
+    "description": "Marketing and customer growth",
+    "icon": "icon-[lucide--trending-up]",
+    "color": "#10b981",
+    "avatar": "/showcase-images/avatar-growth.svg"
+  },
+  {
+    "value": "support",
+    "label": "Support",
+    "description": "Customer operations",
+    "disabled": false
+  }
+]
+  state groups = []
+  view {
+    <AdvancedSelect
+      label="Destroy and reinitialize"
+      name="advanced-select-41"
+      value="design"
+      values="{values}"
+      options="{options}"
+      groups="{groups}"
+      placeholder="Choose a team"
+      searchable="false"
+      allowEmpty="false"
+    />
+  }
+}
diff --git a/app/pages/components/alert.wrn b/app/pages/components/alert.wrn index 66e98fd..a1d0e68 100644 --- a/app/pages/components/alert.wrn +++ b/app/pages/components/alert.wrn @@ -2,25 +2,25 @@ page AlertDetail { layout = "showcase" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" - state playground_color = ctx.url.searchParams.get("pg_color") ?? "info" + state playground_color = ctx.url.searchParams.get("pg_color") ?? "success" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "soft" - state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" + state playground_class = ctx.url.searchParams.get("pg_class") ?? "" state playground_radius = ctx.url.searchParams.get("pg_radius") ?? "md" - state playground_shadow = ctx.url.searchParams.get("pg_shadow") ?? "sm" - state playground_title = ctx.url.searchParams.get("pg_title") ?? "Alert example" - state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default alert for a modern application." - state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"alert-0-1\",\"key\":\"alert-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\":\"#alert-demo\",\"actionHref\":\"#alert-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\":\"alert-0-2\",\"key\":\"alert-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#alert-demo\",\"actionHref\":\"#alert-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_actions = JSON.parse(ctx.url.searchParams.get("pg_actions") ?? "[{\"id\":\"alert-0-1\",\"key\":\"alert-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\":\"#alert-demo\",\"actionHref\":\"#alert-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\":\"alert-0-2\",\"key\":\"alert-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#alert-demo\",\"actionHref\":\"#alert-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_shadow = ctx.url.searchParams.get("pg_shadow") ?? "none" + state playground_title = ctx.url.searchParams.get("pg_title") ?? "Changes saved" + state playground_description = ctx.url.searchParams.get("pg_description") ?? "Your workspace settings are up to date." + state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[]") + state playground_actions = JSON.parse(ctx.url.searchParams.get("pg_actions") ?? "[]") state playground_showIcon = (ctx.url.searchParams.get("pg_showIcon") ?? "true") === "true" - state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "" + state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "icon-[lucide--circle-check]" state playground_dismissible = (ctx.url.searchParams.get("pg_dismissible") ?? "true") === "true" - state playground_dismissLabel = ctx.url.searchParams.get("pg_dismissLabel") ?? "Alert" + state playground_dismissLabel = ctx.url.searchParams.get("pg_dismissLabel") ?? "Dismiss alert" state playground_role = ctx.url.searchParams.get("pg_role") ?? "alert" state playground_live = ctx.url.searchParams.get("pg_live") ?? "polite" - state playground_linkLabel = ctx.url.searchParams.get("pg_linkLabel") ?? "Alert" - state playground_linkHref = ctx.url.searchParams.get("pg_linkHref") ?? "#alert-demo" - state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "Alert" - state playground_actionHref = ctx.url.searchParams.get("pg_actionHref") ?? "#alert-demo" + state playground_linkLabel = ctx.url.searchParams.get("pg_linkLabel") ?? "" + state playground_linkHref = ctx.url.searchParams.get("pg_linkHref") ?? "" + state playground_actionLabel = ctx.url.searchParams.get("pg_actionLabel") ?? "" + state playground_actionHref = ctx.url.searchParams.get("pg_actionHref") ?? "" state playground_compact = (ctx.url.searchParams.get("pg_compact") ?? "false") === "true" seo { title = "Alert" @@ -47,454 +47,30 @@ page AlertDetail {
Component code
- 
<Alert
-  title="Alert example"
-  description="A polished default alert for a modern application."
-  items='[
-    {
-      "id": "alert-0-1",
-      "key": "alert-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": "#alert-demo",
-      "actionHref": "#alert-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": "alert-0-2",
-      "key": "alert-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#alert-demo",
-      "actionHref": "#alert-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": "alert-0-1",
-      "key": "alert-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": "#alert-demo",
-      "actionHref": "#alert-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": "alert-0-2",
-      "key": "alert-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#alert-demo",
-      "actionHref": "#alert-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"
-      ]
-    }
-  ]'
-  showIcon="true"
-  dismissible="true"
-  dismissLabel="Alert"
-  linkLabel="Alert"
-  linkHref="#alert-demo"
-  actionLabel="Alert"
-  actionHref="#alert-demo"
-/>
+ 
page AlertExample {
+  state items = []
+  state actions = []
+  view {
+    <Alert
+      color="success"
+      shadow="none"
+      title="Changes saved"
+      description="Your workspace settings are up to date."
+      items="{items}"
+      actions="{actions}"
+      showIcon="true"
+      icon="icon-[lucide--circle-check]"
+      dismissible="true"
+    />
+  }
+}
Event outputInteract with the preview to inspect the typed payload.
Component props21 controls
-
+
@@ -503,737 +79,101 @@ page AlertDetail {
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.

+
Recommended

Success message

A concise confirmation that can be dismissed.

01
Live preview
- -
+ +
-
+
Component usage.wrn
- 
<Alert
-  title="Alert example"
-  description="A polished default alert for a modern application."
-  items='[
-    {
-      "id": "alert-0-1",
-      "key": "alert-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": "#alert-demo",
-      "actionHref": "#alert-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": "alert-0-2",
-      "key": "alert-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#alert-demo",
-      "actionHref": "#alert-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": "alert-0-1",
-      "key": "alert-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": "#alert-demo",
-      "actionHref": "#alert-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": "alert-0-2",
-      "key": "alert-0-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A clean default configuration for everyday product interfaces.",
-      "text": "Another configurable message.",
-      "href": "#alert-demo",
-      "actionHref": "#alert-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"
-      ]
-    }
-  ]'
-  showIcon="true"
-  dismissible="true"
-  dismissLabel="Alert"
-  linkLabel="Alert"
-  linkHref="#alert-demo"
-  actionLabel="Alert"
-  actionHref="#alert-demo"
-/>
+ 
page AlertExample {
+  state items = []
+  state actions = []
+  view {
+    <Alert
+      color="success"
+      shadow="none"
+      title="Changes saved"
+      description="Your workspace settings are up to date."
+      items="{items}"
+      actions="{actions}"
+      showIcon="true"
+      icon="icon-[lucide--circle-check]"
+      dismissible="true"
+    />
+  }
+}
-
Dense UI

Compact application

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

+
Compact

Informational notice

One useful message without unnecessary actions.

02
Live preview
- -
+ +
-
+
Component usage.wrn
- 
<Alert
-  size="sm"
-  variant="secondary"
-  title="Compact Alert"
-  description="A compact configuration for dashboards and dense product surfaces."
-  items='[
-    {
-      "id": "alert-1-1",
-      "key": "alert-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": "#alert-demo",
-      "actionHref": "#alert-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": "alert-1-2",
-      "key": "alert-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#alert-demo",
-      "actionHref": "#alert-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": "alert-1-1",
-      "key": "alert-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": "#alert-demo",
-      "actionHref": "#alert-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": "alert-1-2",
-      "key": "alert-1-2",
-      "value": "secondary",
-      "label": "Additional option",
-      "title": "Supporting example",
-      "description": "A compact configuration designed for dense application layouts.",
-      "text": "Another configurable message.",
-      "href": "#alert-demo",
-      "actionHref": "#alert-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"
-      ]
-    }
-  ]'
-  showIcon="true"
-  icon="icon-[lucide--arrow-right]"
-  dismissible="true"
-  dismissLabel="Compact example"
-  linkLabel="Compact example"
-  linkHref="#alert-demo"
-  actionLabel="Compact example"
-  actionHref="#alert-demo"
-  compact="true"
-/>
+ 
page AlertExample {
+  state items = []
+  state actions = []
+  view {
+    <Alert
+      shadow="none"
+      title="Scheduled maintenance"
+      description="The dashboard will be unavailable Sunday, 02:00–02:30 UTC."
+      items="{items}"
+      actions="{actions}"
+      showIcon="true"
+      icon="icon-[lucide--info]"
+      dismissible="true"
+    />
+  }
+}
-
Extended

Rich configuration

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

+
Advanced

Action required

A warning with one relevant next step.

03
Live preview
- -
+ +
-
+
Component usage.wrn
- 
<Alert
-  size="lg"
-  variant="success"
-  title="Advanced Alert"
-  description="A richer configuration demonstrating additional content and hierarchy."
-  items='[
-    {
-      "id": "alert-2-1",
-      "key": "alert-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": "#alert-demo",
-      "actionHref": "#alert-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": "alert-2-2",
-      "key": "alert-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": "#alert-demo",
-      "actionHref": "#alert-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": "alert-2-1",
-      "key": "alert-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": "#alert-demo",
-      "actionHref": "#alert-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": "alert-2-2",
-      "key": "alert-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": "#alert-demo",
-      "actionHref": "#alert-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"
-      ]
-    }
-  ]'
-  showIcon="true"
-  icon="icon-[lucide--trash-2]"
-  dismissible="true"
-  dismissLabel="Advanced example"
-  linkLabel="Advanced example"
-  linkHref="#alert-demo"
-  actionLabel="Advanced example"
-  actionHref="#alert-demo"
-/>
+ 
page AlertExample {
+  state items = []
+  state actions = []
+  view {
+    <Alert
+      color="warning"
+      shadow="none"
+      title="Payment needs attention"
+      description="Update your payment method to keep your subscription active."
+      items="{items}"
+      actions="{actions}"
+      showIcon="true"
+      icon="icon-[lucide--triangle-alert]"
+      dismissible="true"
+      actionLabel="Update payment"
+      actionHref="#payment"
+    />
+  }
+}
@@ -1254,7 +194,7 @@ if (component) registerOutputHandler(component, "action", (payload) =>
Component API

Props and configuration

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

PropTypeDefaultRequired
sizestring"default"No
colorstring"info"No
variantstring"soft"No
classstring""No
radiusstring"md"No
shadowstring"sm"No
titlestring"Alert"No
descriptionstring""No
itemsunknown[][]No
actionsunknown[][]No
showIconbooleanfalseNo
iconstring""No
dismissiblebooleanfalseNo
dismissLabelstring"Dismiss alert"No
rolestring"alert"No
livestring"polite"No
linkLabelstring""No
linkHrefstring""No
actionLabelstring""No
actionHrefstring""No
compactbooleanfalseNo